/* =========================================================
   Floow Design System Authority 2.0 · v2.7.104
   ÚLTIMA CAPA GLOBAL. Toda geometría/superficie nueva debe
   consumir estos tokens; no crear valores locales paralelos.
   ========================================================= */
:root{
  /* Geometry primitives */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:999px;

  /* Semantic geometry aliases */
  --radius-control:var(--radius-md);
  --radius-card:var(--radius-lg);
  --radius-panel:var(--radius-xl);
  --radius-modal:var(--radius-xl);
  --radius-floating:var(--radius-lg);

  /* Spacing primitives */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;
  --space-10:40px;--space-12:48px;
  --space-card:var(--space-5);
  --space-card-gap:var(--space-4);
  --section-stack-gap:var(--space-5);

  /* Canonical surfaces */
  --surface-app:var(--gris-50);
  --surface-card:#fff;
  --surface-soft:var(--gris-50);
  --surface-elevated:#fff;
  --surface-raised:var(--surface-elevated);
  --surface-overlay:var(--surface-elevated);
  --surface-2:var(--surface-soft);
  --surface-3:var(--surface-elevated);

  /* Canonical text aliases */
  --text-main:var(--gris-950);
  --text-primary:var(--text-main);
  --text-secondary:var(--gris-600);
  --text-muted:#64748b;
  --text:var(--text-main);
  --muted:var(--text-muted);
  --texto:var(--text-main);
  --texto-secundario:var(--text-secondary);
  --texto-muted:var(--text-muted);

  /* Borders */
  --line-soft:var(--gris-200);
  --border-subtle:var(--line-soft);
  --border-soft:var(--border-subtle);
  --border-default:color-mix(in srgb,var(--text-muted) 26%,transparent);
  --border-strong:color-mix(in srgb,var(--text-muted) 42%,transparent);
  --borde:var(--border-default);
  --borde-suave:var(--border-subtle);

  /* Brand Theme Engine contract. Runtime may replace brand tokens only. */
  --brand-primary:var(--color-primario,#4338CA);
  --brand-primary-hover:color-mix(in srgb,var(--brand-primary) 86%,#000);
  --brand-primary-active:color-mix(in srgb,var(--brand-primary) 76%,#000);
  --brand-primary-soft:color-mix(in srgb,var(--brand-primary) 10%,var(--surface-card));
  --brand-primary-soft-strong:color-mix(in srgb,var(--brand-primary) 18%,var(--surface-card));
  --brand-primary-border:color-mix(in srgb,var(--brand-primary) 28%,var(--border-subtle));
  --brand-primary-foreground:#fff;
  --brand-focus-ring:color-mix(in srgb,var(--brand-primary) 22%,transparent);
  --color-secundario:#0F172A;
  --color-acento:#22C55E;
  --brand-secondary:var(--color-secundario);
  --brand-accent:var(--color-acento);
  --primario:var(--brand-primary);
  --primary:var(--brand-primary);
  --color-primario:var(--brand-primary);
  --color-primario-suave:var(--brand-primary-soft);
  --brand-soft-bg:var(--brand-primary-soft);
  --brand-soft-strong:var(--brand-primary-soft-strong);

  /* Semantic aliases */
  --semantic-success:var(--verde);--semantic-success-soft:var(--verde-suave);
  --semantic-danger:var(--rojo);--semantic-danger-soft:var(--rojo-suave);
  --semantic-warning:var(--ambar);--semantic-warning-soft:var(--ambar-suave);
  --semantic-info:var(--azul);--semantic-info-soft:var(--azul-suave);
  --success:var(--semantic-success);--danger:var(--semantic-danger);--warning:var(--semantic-warning);
  --warning-border:color-mix(in srgb,var(--semantic-warning) 34%,var(--border-subtle));
  --warning-text:color-mix(in srgb,var(--semantic-warning) 80%,var(--text-main));
  --amarillo:var(--semantic-warning);

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(15,23,42,.035);
  --shadow-sm:0 1px 2px rgba(15,23,42,.035),0 5px 18px rgba(15,23,42,.04);
  --shadow-md:0 12px 34px rgba(15,23,42,.06);
  --shadow-lg:0 18px 52px rgba(15,23,42,.10);
  --shadow-overlay:0 24px 70px rgba(15,23,42,.18);
  --sombra:var(--shadow-sm);
  --sombra-suave:var(--shadow-md);

  /* Typography aliases still consumed by legacy modules */
  --type-caption:.72rem;
  --type-body-small:.8125rem;
  --type-title-sm:1rem;
  --type-overline:.6875rem;
  --tracking-overline:.055em;
  --tracking-section:.04em;

  /* Auth defaults; White Label may override them at runtime */
  --auth-brand-fg:#fff;
  --auth-brand-fg-muted:rgba(255,255,255,.76);
  --auth-brand-fg-soft:rgba(255,255,255,.12);
  --analytics-dot:var(--color-primario);
}

html[data-theme="dark"]{
  --surface-app:#0f141c;
  --surface-card:#151b24;
  --surface-soft:#111720;
  --surface-elevated:#1a212c;
  --text-main:#f5f7fb;
  --text-secondary:#c7d0dd;
  --text-muted:#8e9bad;
  --line-soft:#2a3442;
  --border-default:color-mix(in srgb,var(--text-muted) 35%,transparent);
  --border-strong:color-mix(in srgb,var(--text-muted) 50%,transparent);
  --shadow-xs:0 1px 2px rgba(0,0,0,.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,.18),0 7px 22px rgba(0,0,0,.16);
  --shadow-md:0 16px 38px rgba(0,0,0,.22);
  --shadow-lg:0 22px 60px rgba(0,0,0,.28);
}

/* Global surface authority. Specific modules may change layout, never geometry language. */
:where(.card,.surface-panel,.dashboard-activity-showcase,.activity-showcase-card,.role-template-card,
       .company-master-guide,.company-approval-section,.linked-master-card,.data-table-shell,.table-shell,
       .empty-state-surface,.metric-card,.stat-card){
  border-radius:var(--radius-card);
}

:where(.modal-card,.movement-dialog,.app-modal-dialog,.notificaciones-panel,.usuario-menu-panel,
       .activity-center-panel,.command-palette-panel){border-radius:var(--radius-modal);}

:where(.btn,input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea,
       .icon-btn,.activity-card-arrow,.btn-icono-cabecera){border-radius:var(--radius-control);}

:where(.badge,.pill,.chip,.notificacion-contador){border-radius:var(--radius-pill);}

/* The browser must always have a valid card geometry even if a historical selector is loaded later. */
.dashboard-activity-showcase,.activity-showcase-card{border-radius:var(--radius-card)!important;}


/* Brand affects emphasis, never semantic meaning or structural geometry. */
.btn-primario{
  background:var(--brand-primary)!important;
  border-color:var(--brand-primary)!important;
  color:var(--brand-primary-foreground)!important;
}
.btn-primario:hover{background:var(--brand-primary-hover)!important;border-color:var(--brand-primary-hover)!important;}
.btn-primario:active{background:var(--brand-primary-active)!important;border-color:var(--brand-primary-active)!important;}
:where(a,.section-tab.active,.nav-link.active){--ui-brand-emphasis:var(--brand-primary);}
:where(input,select,textarea,.btn,a,.section-tab,.nav-link):focus-visible{
  outline:2px solid var(--brand-primary);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--brand-focus-ring);
}


/* v2.7.106 · Surface & Geometry Authority */
/* Structural families: modules may style content, never invent geometry. */
:where(.card,.surface-panel,.dashboard-activity-showcase,.activity-showcase-card,.role-template-card,.role-card,.company-master-guide,.company-master-table,.company-approval-section,.linked-master-card,.linked-master-intro,.settings-block,.supervisor-decision-queue,.payroll-protected-period,.payroll-draft-delete){
  border-radius:var(--radius-card);
}
:where(.panel,.section-panel,.dashboard-section,.settings-panel,.drawer-panel){
  border-radius:var(--radius-panel);
}
:where(.modal-card,.dialog-card,.linked-catalog-modal){
  border-radius:var(--radius-modal);
}
:where(.dropdown,.popover,.tooltip,.floating-panel,.command-center,.notifications-panel,.context-menu){
  border-radius:var(--radius-floating);
}
:where(.btn,.button,button:not(.icon-btn):not(.activity-rail-next),input,select,textarea,.field-control,.section-tab,.tab-btn){
  border-radius:var(--radius-control);
}
:where(.badge,.pill,.chip,.tag,.status-pill,.attention-count){
  border-radius:var(--radius-pill);
}
:where(.table-wrap,.tabla-wrap,.table-shell,.table-container){
  border-radius:var(--radius-card);
  overflow:hidden;
}
:where(.empty-state-modern,.empty-state-inline,.dashboard-context-empty){
  border-radius:var(--radius-card);
}
:where(.icon-btn,.activity-rail-next,.avatar,.avatar-circle){
  border-radius:var(--radius-pill);
}

/* Surface contract */
:where(.card,.surface-panel,.activity-showcase-card,.role-template-card,.role-card,.linked-master-card,.company-approval-section){
  background:var(--surface-card);
  border-color:var(--border-subtle);
}
:where(.empty-state-modern,.empty-state-inline,.surface-soft,.linked-master-principle){
  background:var(--surface-soft);
}
:where(.modal-card,.dropdown,.popover,.floating-panel,.notifications-panel){
  background:var(--surface-elevated);
}

/* Geometry must survive White Label and dark mode unchanged. */
html[data-theme="dark"] :where(.card,.surface-panel,.activity-showcase-card,.role-template-card,.role-card,.linked-master-card,.modal-card,.dropdown,.popover,.floating-panel){
  border-radius:inherit;
}


/* v2.7.107 · Visual Hierarchy Authority */
:root{
  --page-title-size:clamp(1.45rem,1.2rem + .5vw,1.8rem);
  --page-title-line:1.12;
  --page-title-tracking:-.03em;
  --page-copy-size:.86rem;
  --page-copy-line:1.55;
  --page-copy-max:68ch;
  --page-header-gap:var(--space-4);
  --page-header-bottom:var(--space-5);
  --section-title-size:1rem;
  --section-title-line:1.3;
  --section-copy-size:.8rem;
  --section-copy-line:1.5;
  --eyebrow-size:.68rem;
  --eyebrow-tracking:.075em;
  --content-stack-gap:var(--space-5);
}

/* Every operational page starts with the same reading order:
   context → title → explanation → actions. */
.visual-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--page-header-gap);
  margin-bottom:var(--page-header-bottom);
  min-width:0;
}
.visual-page-header > :first-child{min-width:0;}
.visual-page-header h1{
  margin:0;
  font-size:var(--page-title-size);
  line-height:var(--page-title-line);
  letter-spacing:var(--page-title-tracking);
  font-weight:700;
  text-wrap:balance;
}
.visual-page-header h1 + p,
.visual-page-header :where(.module-eyebrow,.eyebrow) + h1 + p{
  margin:.35rem 0 0;
  max-width:var(--page-copy-max);
  font-size:var(--page-copy-size);
  line-height:var(--page-copy-line);
  color:var(--text-secondary);
}
.visual-page-header :where(.module-eyebrow,.eyebrow){
  display:block;
  margin:0 0 .35rem;
  font-size:var(--eyebrow-size);
  line-height:1.2;
  letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase;
  font-weight:700;
  color:var(--text-secondary);
}

/* Header actions preserve hierarchy: the primary CTA remains visually dominant. */
.visual-page-header > :where(.page-actions,.header-actions,.procurement-header-actions){
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.visual-page-header > :is(.btn,button,a){
  flex:0 0 auto;
}

/* Section hierarchy is shared across modules. */
:where(.card-header,.section-card-head,.dashboard-section-header,.section-title-row){
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  min-width:0;
}
:where(.card-header,.section-card-head,.dashboard-section-header,.section-title-row) > :first-child{min-width:0;}
:where(.card-header,.section-card-head,.dashboard-section-header,.section-title-row) h2{
  margin:0;
  font-size:var(--section-title-size);
  line-height:var(--section-title-line);
  letter-spacing:-.012em;
  font-weight:700;
}
:where(.card-header,.section-card-head,.dashboard-section-header,.section-title-row) h2 + p,
:where(.card-header,.section-card-head,.dashboard-section-header,.section-title-row) :where(.module-eyebrow,.eyebrow) + h2 + p{
  margin:.28rem 0 0;
  max-width:72ch;
  font-size:var(--section-copy-size);
  line-height:var(--section-copy-line);
  color:var(--text-secondary);
}

/* Toolbars are support layers, never compete with the page heading. */
:where(.data-toolbar,.table-toolbar,.organization-toolbar,.filters-toolbar,.status-strip){
  min-height:44px;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
}
:where(.data-toolbar,.table-toolbar,.organization-toolbar,.filters-toolbar) :is(input[type="search"],input[type="text"],select){
  min-height:40px;
}

/* Content rhythm: explicitly structured module roots use one vertical cadence. */
:where(.module-page,.settings-page,.profile-page,.dashboard-primary,.dashboard-secondary){
  --module-stack-gap:var(--content-stack-gap);
}

/* Empty states should read as tertiary content, not as another hero. */
:where(.empty-state-modern,.empty-state-inline,.dashboard-context-empty) h3{
  margin:.55rem 0 .25rem;
  font-size:.95rem;
  line-height:1.3;
}
:where(.empty-state-modern,.empty-state-inline,.dashboard-context-empty) p{
  max-width:56ch;
  margin-left:auto;
  margin-right:auto;
  font-size:.8rem;
  line-height:1.5;
  color:var(--text-secondary);
}

/* Tables are information-dense by design; actions remain compact. */
:where(.data-table,.table-enterprise) th{
  font-size:.69rem;
  letter-spacing:.025em;
  text-transform:none;
  font-weight:700;
}
:where(.data-table,.table-enterprise) td{
  font-size:.79rem;
  line-height:1.4;
}
:where(.data-table,.table-enterprise) .col-actions{
  white-space:nowrap;
}

/* Responsive hierarchy is intentional, not compressed desktop. */
@media (max-width:760px){
  .visual-page-header{
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-3);
    margin-bottom:var(--space-4);
  }
  .visual-page-header > :where(.page-actions,.header-actions,.procurement-header-actions){
    justify-content:flex-start;
    width:100%;
  }
  .visual-page-header > :is(.btn,button,a){
    align-self:flex-start;
  }
  :where(.card-header,.section-card-head,.dashboard-section-header,.section-title-row){
    flex-wrap:wrap;
  }
}


/* v2.7.108 · Interactive Component Authority */
:root{
  --interaction-transition:140ms ease;
  --interaction-focus-width:3px;
  --interaction-touch-min:44px;
  --interaction-disabled-opacity:.46;
  --interaction-hover:color-mix(in srgb,var(--text-main) 5%,transparent);
  --interaction-pressed:color-mix(in srgb,var(--text-main) 9%,transparent);
  --interaction-selected:var(--brand-primary-soft);
  --interaction-selected-border:var(--brand-primary-border);
  --interaction-danger-soft:color-mix(in srgb,var(--semantic-danger) 12%,var(--surface-card));
}

/* Focus is a product contract, not a browser accident. */
:where(
  a[href],button,input,select,textarea,summary,
  [role="button"],[role="tab"],[tabindex]:not([tabindex="-1"])
):focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 var(--interaction-focus-width) var(--brand-focus-ring);
}
:where(input,select,textarea):focus-visible{
  border-color:var(--brand-primary);
}

/* Buttons */
:where(.btn,button){
  transition:
    background-color var(--interaction-transition),
    border-color var(--interaction-transition),
    color var(--interaction-transition),
    box-shadow var(--interaction-transition),
    transform var(--interaction-transition),
    opacity var(--interaction-transition);
}
@media(hover:hover){
  .btn-primario:not(:disabled):not([aria-disabled="true"]):hover{
    background:var(--brand-primary-hover)!important;
    border-color:var(--brand-primary-hover)!important;
    color:var(--brand-primary-foreground)!important;
  }
  .btn-secundario:not(:disabled):not([aria-disabled="true"]):hover{
    background:var(--surface-soft);
    border-color:var(--brand-primary-border);
  }
  .btn-peligro:not(:disabled):not([aria-disabled="true"]):hover{
    background:var(--interaction-danger-soft);
    border-color:color-mix(in srgb,var(--semantic-danger) 32%,var(--border-subtle));
  }
}
:where(.btn,button):not(:disabled):not([aria-disabled="true"]):active{
  transform:translateY(1px) scale(.99);
}
:where(.btn,button):disabled,
:where(.btn,button)[aria-disabled="true"]{
  opacity:var(--interaction-disabled-opacity);
  cursor:not-allowed;
  box-shadow:none!important;
  transform:none!important;
}
a.btn[aria-disabled="true"]{
  pointer-events:none;
}

/* Forms */
:where(input,select,textarea){
  transition:
    border-color var(--interaction-transition),
    background-color var(--interaction-transition),
    box-shadow var(--interaction-transition),
    color var(--interaction-transition);
}
:where(input,select,textarea):disabled{
  opacity:.72;
  cursor:not-allowed;
  background:var(--surface-soft);
}
:where(input,textarea)[readonly]{
  background:var(--surface-soft);
  color:var(--text-secondary);
}
:where(input,select,textarea)[aria-invalid="true"],
:where(input,select,textarea).is-invalid{
  border-color:var(--semantic-danger)!important;
}
:where(input,select,textarea)[aria-invalid="true"]:focus-visible,
:where(input,select,textarea).is-invalid:focus-visible{
  box-shadow:0 0 0 var(--interaction-focus-width) color-mix(in srgb,var(--semantic-danger) 20%,transparent)!important;
}

/* Tabs and selectable controls */
:where(.tab,.section-tab,.tab-btn,.segment-option,.module-tabs a,[role="tab"]){
  transition:
    background-color var(--interaction-transition),
    border-color var(--interaction-transition),
    color var(--interaction-transition),
    box-shadow var(--interaction-transition);
}
@media(hover:hover){
  :where(.tab,.section-tab,.tab-btn,.segment-option,.module-tabs a,[role="tab"]):not(.active):not(.is-active):not([aria-selected="true"]):hover{
    background:var(--interaction-hover);
  }
}
:where(
  .tab.active,.section-tab.active,.tab-btn.active,
  .segment-option.active,.segment-option.is-active,
  .module-tabs a.active,[role="tab"][aria-selected="true"]
){
  background:var(--interaction-selected);
  border-color:var(--interaction-selected-border);
  color:var(--brand-primary);
}

/* Actionable table rows */
:where(
  .data-table tbody tr[data-href],
  .table-enterprise tbody tr[data-href],
  .data-table tbody tr[role="button"],
  .table-enterprise tbody tr[role="button"],
  .data-table tbody tr.is-clickable,
  .table-enterprise tbody tr.is-clickable
){
  cursor:pointer;
  transition:background-color var(--interaction-transition),box-shadow var(--interaction-transition);
}
@media(hover:hover){
  :where(
    .data-table tbody tr[data-href],
    .table-enterprise tbody tr[data-href],
    .data-table tbody tr[role="button"],
    .table-enterprise tbody tr[role="button"],
    .data-table tbody tr.is-clickable,
    .table-enterprise tbody tr.is-clickable
  ):hover{
    background:var(--interaction-hover);
  }
}
:where(
  .data-table tbody tr.is-selected,
  .table-enterprise tbody tr.is-selected,
  .data-table tbody tr[aria-selected="true"],
  .table-enterprise tbody tr[aria-selected="true"]
){
  background:var(--interaction-selected);
  box-shadow:inset 3px 0 0 var(--brand-primary);
}

/* Modal interaction ownership */
body.modal-open{overflow:hidden;}
.modal-overlay[aria-hidden="false"]{pointer-events:auto;}
.modal-overlay[aria-hidden="true"]{pointer-events:none;}
:where(.modal-close-clean,.drawer-close,.icon-btn,.activity-rail-next){
  min-width:var(--interaction-touch-min);
  min-height:var(--interaction-touch-min);
  touch-action:manipulation;
}

/* Transaction feedback: prevents double-submit while retaining submitter name/value. */
form.is-submitting :where(button[type="submit"],input[type="submit"]),
:where(button,input[type="submit"]).is-submitting{
  cursor:progress;
  pointer-events:none;
}
form[aria-busy="true"] :where(button[type="submit"],input[type="submit"]){
  opacity:.7;
}
:where(.btn,button)[aria-busy="true"]{
  position:relative;
}

/* White Label changes identity, never state semantics. */
:where(.alerta-error,.is-error,.badge-danger){--state-accent:var(--semantic-danger);}
:where(.alerta-exito,.is-success,.badge-success){--state-accent:var(--semantic-success);}
:where(.alerta-warning,.is-warning,.badge-warning){--state-accent:var(--semantic-warning);}

/* Touch does not depend on hover. */
@media(hover:none){
  :where(.btn,button,.tab,.section-tab,.tab-btn,.segment-option,.module-tabs a,[role="tab"]):active{
    transition-duration:80ms;
  }
}

/* Motion preference wins globally. */
@media(prefers-reduced-motion:reduce){
  :where(.btn,button,input,select,textarea,.tab,.section-tab,.tab-btn,.segment-option,.module-tabs a,[role="tab"]){
    transition:none!important;
  }
  :where(.btn,button):active{transform:none!important;}
}


/* v2.7.109 · Responsive Device Matrix Authority */
:root{
  --viewport-mobile-max:860px;
  --viewport-tablet-max:1180px;
  --viewport-wide-min:1440px;
  --content-gutter-desktop:28px;
  --content-gutter-tablet:20px;
  --content-gutter-mobile:12px;
  --responsive-table-min:720px;
  --responsive-dialog-inline-gap:24px;
}

/* Intrinsic sizing: children may shrink, the page never uses horizontal overflow
   as an escape hatch. */
:where(
  .content,.main-content,.module-page,.dashboard-primary,.dashboard-secondary,
  .card,.surface-panel,.section-card,.grid,.form-grid,.form-grid-2,.form-grid-3,
  .visual-page-header,.card-header,.section-card-head,.dashboard-section-header
){
  min-width:0;
  max-width:100%;
}
:where(img,video,canvas){
  max-width:100%;
  height:auto;
}
:where(.content,.main-content){
  overflow-wrap:anywhere;
}

/* Tables own their overflow; body/page never does. */
:where(
  .responsive-table-wrap,.table-responsive,.table-scroll,.data-table-scroll,
  .tabla-wrap,.table-shell,.table-container
){
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
:where(
  .responsive-table-wrap,.table-responsive,.table-scroll,.data-table-scroll,
  .tabla-wrap,.table-shell,.table-container
) > :where(table,.data-table,.table-enterprise){
  width:100%;
  min-width:var(--responsive-table-min);
}

/* Tabs and horizontal selectors own horizontal scroll. */
:where(.section-tabs,.tabs-global,.module-tabs,.tabs,.segmented-control){
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
:where(.section-tabs,.tabs-global,.module-tabs,.tabs,.segmented-control)::-webkit-scrollbar{
  display:none;
}

/* Dialogs fit the visual viewport and safe areas on every device. */
.modal-overlay{
  padding:
    max(var(--responsive-dialog-inline-gap),env(safe-area-inset-top))
    max(var(--responsive-dialog-inline-gap),env(safe-area-inset-right))
    max(var(--responsive-dialog-inline-gap),env(safe-area-inset-bottom))
    max(var(--responsive-dialog-inline-gap),env(safe-area-inset-left));
}
.modal-overlay > :where(.modal-card,[role="dialog"]){
  max-width:min(100%,calc(100vw - (var(--responsive-dialog-inline-gap) * 2)));
  max-height:min(88dvh,calc(100dvh - (var(--responsive-dialog-inline-gap) * 2)));
  overflow:auto;
  overscroll-behavior:contain;
}

/* Standard laptop/tablet: information cards and structural grids stop trying
   to mimic a wide desktop. */
@media (min-width:861px) and (max-width:1180px){
  :root{
    --space-card-gap:14px;
    --section-stack-gap:18px;
  }
  :where(.content,.main-content){
    padding-inline:var(--content-gutter-tablet);
  }
  :where(.grid-4,.grid-3):not(.card-collection){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  :where(.form-grid-3){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  :where(.visual-page-header){
    gap:var(--space-3);
  }
}

/* Mobile: one structural column. Card collections keep their own rail/grid
   contract and Dashboard keeps its 2x2 paged exception. */
@media (max-width:860px){
  :root{
    --responsive-dialog-inline-gap:12px;
    --content-stack-gap:16px;
  }

  html,body{
    max-width:100%;
    overflow-x:clip;
  }

  :where(.content,.main-content){
    width:100%;
    max-width:100%;
    padding-inline:
      max(var(--content-gutter-mobile),env(safe-area-inset-left))
      max(var(--content-gutter-mobile),env(safe-area-inset-right));
  }

  :where(.grid-4,.grid-3,.grid-2):not(.card-collection):not(.dashboard-quick-grid){
    grid-template-columns:1fr;
  }
  :where(.form-grid-2,.form-grid-3,.timeoff-form,.expense-capture-grid){
    grid-template-columns:1fr;
  }
  :where(.field-span-2,.span-2){
    grid-column:auto;
  }

  /* Headers and section actions stack without making all buttons full-width. */
  :where(.visual-page-header,.section-card-head,.card-header){
    min-width:0;
  }
  :where(.visual-page-header > .page-actions,.visual-page-header > .header-actions,.visual-page-header > .procurement-header-actions){
    width:100%;
  }

  /* Modals become safe-area-aware sheets but retain the shared modal contract. */
  .modal-overlay{
    align-items:flex-end;
    padding:
      max(10px,env(safe-area-inset-top))
      max(var(--content-gutter-mobile),env(safe-area-inset-right))
      max(var(--content-gutter-mobile),env(safe-area-inset-bottom))
      max(var(--content-gutter-mobile),env(safe-area-inset-left));
  }
  .modal-overlay > :where(.modal-card,[role="dialog"]){
    width:100%!important;
    max-width:100%!important;
    max-height:min(var(--mobile-sheet-max-h,calc(100dvh - 96px)),calc(100dvh - env(safe-area-inset-top) - 20px));
    margin:0;
  }

  /* Dense tables stay tables; only their shell scrolls. */
  :where(.responsive-table-wrap,.table-responsive,.table-scroll,.data-table-scroll,.tabla-wrap,.table-shell,.table-container){
    margin-inline:0;
    scroll-padding-inline:var(--content-gutter-mobile);
  }

  /* Horizontal rails reveal that more content exists. */
  :where(.card-collection.is-mobile-card-rail,.horizontal-card-rail,.activity-showcase-track){
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Touch targets near viewport edges respect safe areas. */
  :where(.bottom-nav-movil,.mobile-bottom-nav,.floating-actions,.mobile-floating-actions){
    padding-bottom:max(env(safe-area-inset-bottom),0px);
  }
}

/* Narrow phones: copy may wrap, controls never create a second page axis. */
@media (max-width:390px){
  :root{
    --content-gutter-mobile:10px;
    --responsive-dialog-inline-gap:10px;
  }
  :where(.visual-page-header h1){
    font-size:clamp(1.35rem,7vw,1.6rem);
  }
  :where(.form-actions:not(.form-actions-inline),.form-footer-actions:not(.form-actions-inline)){
    width:100%;
  }
  :where(.form-actions:not(.form-actions-inline),.form-footer-actions:not(.form-actions-inline)) > :is(.btn,button,a){
    width:100%;
    justify-content:center;
  }
}

/* Wide desktop gains breathing room, never oversized typography. */
@media (min-width:1440px){
  :where(.content,.main-content){
    padding-inline:var(--content-gutter-desktop);
  }
  :where(.visual-page-header){
    margin-bottom:var(--space-6);
  }
}


/* v2.7.110 · Dark Mode + White Label Certification */
:root{
  color-scheme:light;
  --theme-certification-aa:4.5;
  --theme-certification-aaa:7;
}
html[data-theme="dark"]{
  color-scheme:dark;
}

/* Brand foreground is runtime-certified. Semantic state colors remain outside
   tenant control even when primary is red, amber, green, black or white. */
:where(.btn-primario,.global-create-trigger){
  color:var(--brand-primary-foreground)!important;
}
::selection{
  background:var(--brand-primary-soft-strong);
  color:var(--text-main);
}

/* Light/dark logo roles. The layout renders both when available and theme
   selects presentation without changing identity storage. */
.kiosk-brand-logo-pair{
  display:inline-flex;
  align-items:center;
  min-width:0;
}
.kiosk-brand-logo-pair img{
  display:block;
  max-width:min(220px,52vw);
  max-height:46px;
  object-fit:contain;
}
.kiosk-brand-logo-dark{display:none!important;}
html[data-theme="dark"] .kiosk-brand-logo-light{display:none!important;}
html[data-theme="dark"] .kiosk-brand-logo-dark{display:block!important;}

/* White Label editor certification */
.brand-certification-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:28px;
  margin-top:8px;
  padding:5px 9px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  color:var(--text-secondary);
  font-size:var(--type-caption);
  font-weight:700;
  line-height:1.2;
}
.brand-certification-badge.is-certified{
  border-color:color-mix(in srgb,var(--semantic-success) 28%,var(--border-subtle));
  background:var(--semantic-success-soft);
  color:color-mix(in srgb,var(--semantic-success) 82%,var(--text-main));
}
.brand-certification-badge.is-warning{
  border-color:color-mix(in srgb,var(--semantic-warning) 30%,var(--border-subtle));
  background:var(--semantic-warning-soft);
  color:var(--warning-text);
}

/* Dark surfaces preserve hierarchy. Brand is allowed to change emphasis,
   never surface ownership or semantic status. */
html[data-theme="dark"] :where(
  .card,.surface-panel,.section-card,.modal-card,.table-shell,.data-table-shell,
  .dropdown,.popover,.floating-panel,.notifications-panel
){
  color:var(--text-main);
}
html[data-theme="dark"] :where(input,select,textarea){
  color:var(--text-main);
  background-color:var(--surface-card);
  border-color:var(--border-default);
}
html[data-theme="dark"] :where(input,select,textarea)::placeholder{
  color:var(--text-muted);
  opacity:1;
}


/* Certified focus: neutral outline guarantees visibility even for white/black
   tenant primaries; brand ring remains as identity accent. */
:where(
  a[href],button,input,select,textarea,summary,
  [role="button"],[role="tab"],[tabindex]:not([tabindex="-1"])
):focus-visible{
  outline:2px solid var(--text-main)!important;
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--brand-focus-ring)!important;
}

/* Selected navigation cannot rely on brand-colored text because a tenant may
   legitimately choose white, yellow or another low-contrast primary. */
:where(
  .tab.active,.section-tab.active,.tab-btn.active,
  .segment-option.active,.segment-option.is-active,
  .module-tabs a.active,[role="tab"][aria-selected="true"]
){
  color:var(--text-main)!important;
}

/* v2.7.111 · Accessibility Certification Authority */
.skip-link{
  position:fixed;
  z-index:100000;
  top:max(8px,env(safe-area-inset-top));
  left:max(8px,env(safe-area-inset-left));
  transform:translateY(-160%);
  padding:10px 14px;
  border-radius:var(--radius-control);
  background:var(--surface-elevated);
  color:var(--text-main);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-overlay);
  font-weight:700;
  text-decoration:none;
  transition:transform var(--interaction-transition,140ms ease);
}
.skip-link:focus-visible{
  transform:translateY(0);
}
#contenido-principal:focus{outline:none;}

/* Keyboard users can reach and scroll dense table regions. */
:where(
  .responsive-table-wrap,.table-responsive,.table-scroll,.data-table-scroll,
  .tabla-wrap,.table-shell,.table-container
)[tabindex="0"]:focus-visible{
  outline:2px solid var(--text-main);
  outline-offset:3px;
  box-shadow:0 0 0 5px var(--brand-focus-ring);
}

/* Screen-reader-only utility is canonical and reusable. */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}


/* v2.7.112 · Computed Style Invariant Reinforcement
   These direct selectors intentionally carry class specificity. The earlier
   :where() authority is zero-specificity and can be defeated by historical
   module selectors even when this file loads last. */
.section-tab,
.tab-btn,
.tabs-global > a,
.module-tabs > a{
  border-radius:var(--radius-control);
}
.empty-state-modern,
.empty-state-inline,
.dashboard-context-empty{
  border-radius:var(--radius-card);
}
.table-wrap,
.tabla-wrap,
.table-shell,
.table-container,
.responsive-table-wrap{
  border-radius:var(--radius-card);
}
.modal-card{
  border-radius:var(--radius-modal);
}


/* v2.7.112 · Dark Geometry Computed Closure
   Computed-style verification found historical dark selectors with enough
   specificity to nullify geometry even while canonical tokens stayed valid.
   Theme may change contrast/surface, never geometry. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .surface-panel,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .activity-showcase-card,
html[data-theme="dark"] .empty-state-modern,
html[data-theme="dark"] .empty-state-inline{
  border-radius:var(--radius-card)!important;
}
html[data-theme="dark"] .modal-card{
  border-radius:var(--radius-modal)!important;
}
html[data-theme="dark"] .section-tab.active,
html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] [role="tab"][aria-selected="true"]{
  color:var(--text-main)!important;
}
@media (max-width:860px){
  html[data-theme="dark"] .modal-card{
    border-radius:var(--mobile-sheet-radius,var(--radius-modal))!important;
  }
}


/* v2.7.113 · Global Page Hero Authority
   One operational page header, independent of module history. */
:root{
  --page-hero-radius:var(--radius-xl);
  --page-hero-padding-block:var(--space-5);
  --page-hero-padding-inline:var(--space-6);
  --page-hero-min-height:118px;
  --page-hero-border:var(--border-subtle);
  --page-hero-glow:color-mix(in srgb,var(--brand-primary) 11%,transparent);
  --page-hero-glow-soft:color-mix(in srgb,var(--brand-primary) 4%,transparent);
}
.visual-page-header.page-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
  width:100%;
  min-width:0;
  min-height:var(--page-hero-min-height);
  margin:0 0 var(--page-header-bottom);
  padding:var(--page-hero-padding-block) var(--page-hero-padding-inline);
  overflow:hidden;
  border:1px solid var(--page-hero-border);
  border-radius:var(--page-hero-radius)!important;
  background:
    radial-gradient(120% 170% at 0% 0%,var(--page-hero-glow) 0%,transparent 56%),
    linear-gradient(112deg,var(--page-hero-glow-soft) 0%,var(--surface-card) 38%,var(--surface-card) 100%);
  box-shadow:var(--shadow-xs);
}
.visual-page-header.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand-primary) 7%,transparent),transparent 42%);
  opacity:.72;
}
.visual-page-header.page-hero > :first-child{
  min-width:0;
  max-width:min(78ch,75%);
}
.visual-page-header.page-hero h1{
  margin:0;
  color:var(--text-main);
}
.visual-page-header.page-hero p{
  margin:.38rem 0 0;
  max-width:var(--page-copy-max);
  color:var(--text-secondary);
}
.visual-page-header.page-hero :where(
  .page-hero-eyebrow,.module-eyebrow,.section-kicker,.eyebrow
){
  display:block;
  margin:0 0 .42rem;
  color:color-mix(in srgb,var(--brand-primary) 76%,var(--text-main));
  font-size:var(--eyebrow-size);
  font-weight:700;
  line-height:1.2;
  letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase;
}
.visual-page-header.page-hero :where(
  .page-actions,.header-actions,.procurement-header-actions,.module-hero-actions,
  .payroll-header-actions
){
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
}
.visual-page-header.page-hero > :where(.btn,a.btn,button.btn){
  flex:0 0 auto;
}

/* Historical header families lose decorative ownership once promoted to the
   canonical page hero. Modules may keep layout hooks but cannot redefine the
   surface, radius or page-level gradient. */
.visual-page-header.page-hero:is(
  .topbar,.page-heading,.page-header,.module-hero,.settings-hero,
  .procurement-topbar,.legacy-topbar-bleed,.page-head
){
  border:1px solid var(--page-hero-border)!important;
  border-radius:var(--page-hero-radius)!important;
  background:
    radial-gradient(120% 170% at 0% 0%,var(--page-hero-glow) 0%,transparent 56%),
    linear-gradient(112deg,var(--page-hero-glow-soft) 0%,var(--surface-card) 38%,var(--surface-card) 100%)!important;
}

/* Dark mode changes surface/contrast only. Geometry remains identical. */
html[data-theme="dark"] .visual-page-header.page-hero{
  --page-hero-glow:color-mix(in srgb,var(--brand-primary) 17%,transparent);
  --page-hero-glow-soft:color-mix(in srgb,var(--brand-primary) 7%,transparent);
  border-color:var(--border-subtle)!important;
  border-radius:var(--page-hero-radius)!important;
  background:
    radial-gradient(120% 170% at 0% 0%,var(--page-hero-glow) 0%,transparent 58%),
    linear-gradient(112deg,var(--page-hero-glow-soft) 0%,var(--surface-card) 42%,var(--surface-card) 100%)!important;
}

/* White Label owns hue only through brand-primary. No tenant token can alter
   page-hero geometry, spacing, breakpoint or typography hierarchy. */
@media (max-width:860px){
  .visual-page-header.page-hero{
    align-items:stretch;
    min-height:0;
    padding:var(--space-5);
    gap:var(--space-4);
  }
  .visual-page-header.page-hero > :first-child{
    max-width:none;
  }
  .visual-page-header.page-hero :where(
    .page-actions,.header-actions,.procurement-header-actions,.module-hero-actions,
    .payroll-header-actions
  ){
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .visual-page-header.page-hero > :where(.btn,a.btn,button.btn){
    width:100%;
    justify-content:center;
  }
}
@media (max-width:390px){
  .visual-page-header.page-hero{
    padding:var(--space-4);
  }
}


/* v2.7.114 · Visual Component Unification Authority
   Screenshot-led precommercial closure: component families, not module patches. */
:root{
  --component-card-padding:var(--space-5);
  --component-card-gap:var(--space-4);
  --component-empty-max:34rem;
  --component-icon-box:2.5rem;
  --component-icon-radius:var(--radius-md);
  --component-section-gap:var(--space-5);
  --component-action-gap:var(--space-2);
}

/* KPI family ------------------------------------------------------------- */
:where(.kpi-card,.stat-card,.metric-card){
  min-width:0;
  padding:var(--component-card-padding);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card)!important;
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}
:where(.kpi-card-icon,.icon-badge,.metric-icon){
  width:var(--component-icon-box);
  height:var(--component-icon-box);
  display:grid;
  place-items:center;
  border:1px solid var(--border-subtle);
  border-radius:var(--component-icon-radius)!important;
  background:var(--surface-soft);
}
:where(.kpi-card-value,.stat-card .valor,.metric-value){font-weight:700;line-height:1.05;color:var(--text-main)}
:where(.kpi-card-label,.stat-card .etiqueta,.metric-label){color:var(--text-secondary);line-height:1.35}
:where(.kpi-card-subtitle,.stat-card .subtitulo,.metric-subtitle){color:var(--text-muted);line-height:1.45}

/* Content / settings family --------------------------------------------- */
:where(.section-card,.settings-card,.card,.company-master-guide,.company-approval-section){
  border-color:var(--border-subtle);
}
:where(.settings-card,.settings-panel,.config-card,.provider-card){
  border-radius:var(--radius-card)!important;
  background:var(--surface-card);
}
:where(.card-header,.section-card-head,.settings-section-head){
  gap:var(--space-3);
}

/* Empty state family: icon and copy are one compact semantic object. ------ */
:where(.empty-state,.empty-state-modern,.procurement-empty-state){
  min-height:9rem;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:var(--space-3)!important;
  padding:var(--space-6)!important;
  text-align:center!important;
  border-radius:var(--radius-card)!important;
}
:where(.empty-state,.empty-state-modern,.procurement-empty-state) .empty-state-icon{
  width:var(--component-icon-box)!important;
  height:var(--component-icon-box)!important;
  flex:0 0 var(--component-icon-box)!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--component-icon-radius)!important;
  background:color-mix(in srgb,var(--brand-primary) 7%,var(--surface-soft))!important;
  color:color-mix(in srgb,var(--brand-primary) 72%,var(--text-main))!important;
}
:where(.empty-state,.empty-state-modern,.procurement-empty-state) .empty-state-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:var(--space-1)!important;
  width:min(100%,var(--component-empty-max));
  max-width:var(--component-empty-max)!important;
  text-align:center!important;
}
:where(.empty-state,.empty-state-modern,.procurement-empty-state) :where(strong,h3){margin:0;color:var(--text-main)}
:where(.empty-state,.empty-state-modern,.procurement-empty-state) :where(p,span){margin:0;color:var(--text-muted)}
.procurement-page .procurement-empty-state{justify-content:center!important;text-align:center!important;padding:var(--space-6)!important}

/* Tabs family ------------------------------------------------------------ */
:where(.tabs-global,.module-tabs,.settings-tabs){
  min-width:0;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card)!important;
  background:var(--surface-card);
}
:where(.tabs-global,.module-tabs,.settings-tabs) :where(a,button,[role="tab"]){
  min-height:2.5rem;
  border-radius:var(--radius-control)!important;
}

/* Dense table actions: safe actions read first; destructive actions never
   become the visual primary merely because a tenant brand is red. */
:where(.table-actions,.row-action-group,.company-actions){
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:var(--component-action-gap);
}
:where(.table-actions,.row-action-group,.company-actions) :where(form){margin:0}
:where(.table-actions,.row-action-group,.company-actions) .btn-link-danger{
  color:var(--danger);
  font-weight:500;
}

/* Data/detail lists ------------------------------------------------------ */
:where(.data-list,.detail-list,.info-list,.record-data-list) > :where(div,li,.data-row){
  min-height:2.75rem;
  padding-block:var(--space-3);
  border-bottom:1px solid var(--border-subtle);
}

/* Screenshot-discovered root contract: Page Hero content must be grouped.
   A direct H1 is still rendered safely, but the release gate prevents it. */
.visual-page-header.page-hero > h1{margin-right:auto}

html[data-theme="dark"] :where(.kpi-card,.stat-card,.metric-card,.settings-card,.settings-panel,.config-card,.provider-card){
  background:var(--surface-card);
  border-color:var(--border-subtle);
}
@media(max-width:760px){
  :where(.empty-state,.empty-state-modern,.procurement-empty-state){padding:var(--space-5)!important}
  :where(.table-actions,.row-action-group,.company-actions){justify-content:flex-start}
}


/* v2.7.115 · Global Status Pill Authority
   States are semantic operational language. White Label never owns them. */
:root{
  --status-pill-height:24px;
  --status-pill-dot:6px;

  --status-success-bg:color-mix(in srgb,var(--semantic-success) 11%,var(--surface-card));
  --status-success-border:color-mix(in srgb,var(--semantic-success) 24%,var(--border-subtle));
  --status-success-text:color-mix(in srgb,var(--semantic-success) 70%,var(--text-main));

  --status-progress-bg:color-mix(in srgb,var(--semantic-info) 10%,var(--surface-card));
  --status-progress-border:color-mix(in srgb,var(--semantic-info) 22%,var(--border-subtle));
  --status-progress-text:color-mix(in srgb,var(--semantic-info) 76%,var(--text-main));

  --status-warning-bg:color-mix(in srgb,var(--semantic-warning) 11%,var(--surface-card));
  --status-warning-border:color-mix(in srgb,var(--semantic-warning) 24%,var(--border-subtle));
  --status-warning-text:var(--warning-text);

  --status-info-bg:color-mix(in srgb,var(--semantic-info) 9%,var(--surface-card));
  --status-info-border:color-mix(in srgb,var(--semantic-info) 21%,var(--border-subtle));
  --status-info-text:color-mix(in srgb,var(--semantic-info) 76%,var(--text-main));

  --status-danger-bg:color-mix(in srgb,var(--semantic-danger) 10%,var(--surface-card));
  --status-danger-border:color-mix(in srgb,var(--semantic-danger) 22%,var(--border-subtle));
  --status-danger-text:color-mix(in srgb,var(--semantic-danger) 78%,var(--text-main));

  --status-neutral-bg:color-mix(in srgb,var(--text-main) 5%,var(--surface-card));
  --status-neutral-border:color-mix(in srgb,var(--text-muted) 28%,var(--border-subtle));
  --status-neutral-text:var(--text-secondary);
}

.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  min-height:var(--status-pill-height);
  padding:3px 9px;
  border:1px solid var(--status-neutral-border);
  border-radius:var(--radius-pill)!important;
  background:var(--status-neutral-bg);
  color:var(--status-neutral-text);
  font-size:.7rem;
  font-weight:700;
  line-height:1.15;
  letter-spacing:0;
  white-space:nowrap;
  vertical-align:middle;
}
.status-pill-dot{
  width:var(--status-pill-dot);
  height:var(--status-pill-dot);
  flex:0 0 var(--status-pill-dot);
  border-radius:var(--radius-pill);
  background:currentColor;
  opacity:.88;
}
.status-pill.status-success{
  background:var(--status-success-bg);
  border-color:var(--status-success-border);
  color:var(--status-success-text);
}
.status-pill.status-progress{
  background:var(--status-progress-bg);
  border-color:var(--status-progress-border);
  color:var(--status-progress-text);
}
.status-pill.status-warning{
  background:var(--status-warning-bg);
  border-color:var(--status-warning-border);
  color:var(--status-warning-text);
}
.status-pill.status-info{
  background:var(--status-info-bg);
  border-color:var(--status-info-border);
  color:var(--status-info-text);
}
.status-pill.status-danger{
  background:var(--status-danger-bg);
  border-color:var(--status-danger-border);
  color:var(--status-danger-text);
}
.status-pill.status-neutral{
  background:var(--status-neutral-bg);
  border-color:var(--status-neutral-border);
  color:var(--status-neutral-text);
}

/* Legacy badge families keep working but resolve to the same visual language.
   They do not gain a dot automatically because some historical badges are tags
   or counters rather than operational states. */
:where(
  .badge,.status-badge,
  .badge-success,.badge-green,.badge-warning,.badge-amber,
  .badge-danger,.badge-red,.badge-info,.badge-blue,
  .badge-neutral,.badge-gray,.badge-muted
){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:var(--status-pill-height);
  padding:3px 9px;
  border:1px solid var(--status-neutral-border);
  border-radius:var(--radius-pill)!important;
  font-size:.7rem;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
}
:where(.badge-success,.badge-green,.status-aprobada){
  background:var(--status-success-bg)!important;
  border-color:var(--status-success-border)!important;
  color:var(--status-success-text)!important;
}
:where(.badge-warning,.badge-amber,.status-pendiente){
  background:var(--status-warning-bg)!important;
  border-color:var(--status-warning-border)!important;
  color:var(--status-warning-text)!important;
}
:where(.badge-danger,.badge-red,.status-rechazada,.status-cancelada){
  background:var(--status-danger-bg)!important;
  border-color:var(--status-danger-border)!important;
  color:var(--status-danger-text)!important;
}
:where(.badge-info,.badge-blue){
  background:var(--status-info-bg)!important;
  border-color:var(--status-info-border)!important;
  color:var(--status-info-text)!important;
}
:where(.badge-neutral,.badge-gray,.badge-muted,.badge:not([class*="badge-"])){
  background:var(--status-neutral-bg)!important;
  border-color:var(--status-neutral-border)!important;
  color:var(--status-neutral-text)!important;
}

/* Dark mode preserves semantic meaning and raises separation subtly. */
html[data-theme="dark"]{
  --status-success-bg:color-mix(in srgb,var(--semantic-success) 15%,var(--surface-card));
  --status-success-text:color-mix(in srgb,var(--semantic-success) 58%,var(--text-main));
  --status-progress-bg:color-mix(in srgb,var(--semantic-info) 14%,var(--surface-card));
  --status-progress-text:color-mix(in srgb,var(--semantic-info) 58%,var(--text-main));
  --status-warning-bg:color-mix(in srgb,var(--semantic-warning) 14%,var(--surface-card));
  --status-warning-text:color-mix(in srgb,var(--semantic-warning) 58%,var(--text-main));
  --status-info-bg:color-mix(in srgb,var(--semantic-info) 13%,var(--surface-card));
  --status-info-text:color-mix(in srgb,var(--semantic-info) 58%,var(--text-main));
  --status-danger-bg:color-mix(in srgb,var(--semantic-danger) 14%,var(--surface-card));
  --status-danger-text:color-mix(in srgb,var(--semantic-danger) 58%,var(--text-main));
  --status-neutral-bg:color-mix(in srgb,var(--text-main) 7%,var(--surface-card));
  --status-neutral-border:color-mix(in srgb,var(--text-muted) 32%,var(--border-subtle));
  --status-neutral-text:var(--text-secondary);
}

/* Status pills inside dense tables never distort row height. */
:where(.table-enterprise,.data-table,table) td > .status-pill{
  margin-block:1px;
}
@media(max-width:860px){
  .status-pill{
    min-height:26px;
    padding-inline:10px;
  }
}


/* v2.7.116 · Upload Surface & Dark Mode Authority
   Upload affordances must remain legible regardless of theme or tenant brand.
   A historical dark rule used to recolor every span inside a dropzone and
   accidentally removed the accent from upload icons/kickers. */
:root{
  --upload-icon-bg:color-mix(in srgb,var(--brand-primary) 10%,var(--surface-card));
  --upload-icon-border:color-mix(in srgb,var(--brand-primary) 18%,var(--border-subtle));
  --upload-icon-fg:color-mix(in srgb,var(--brand-primary) 82%,var(--text-main));
}

:where(
  .dropzone-carga-icono,
  .document-dropzone-icon,
  .expense-scan-icon,
  .release-drop-icon
){
  border:1px solid var(--upload-icon-border)!important;
  background:var(--upload-icon-bg)!important;
  color:var(--upload-icon-fg)!important;
}

:where(
  .dropzone-carga-icono,
  .document-dropzone-icon,
  .expense-scan-icon,
  .release-drop-icon
) svg{
  color:inherit!important;
  stroke:currentColor;
}

.dropzone-carga-premium > span:not(.dropzone-carga-icono):not(.dropzone-kicker):not(.dropzone-cta):not(.dropzone-formatos){
  color:var(--text-secondary)!important;
}
.dropzone-carga-premium .dropzone-formatos{
  color:var(--text-muted)!important;
}
.dropzone-carga-premium .dropzone-kicker{
  color:color-mix(in srgb,var(--brand-primary) 74%,var(--text-main))!important;
}

html[data-theme="dark"]{
  --upload-icon-bg:color-mix(in srgb,var(--brand-primary) 16%,var(--surface-elevated));
  --upload-icon-border:color-mix(in srgb,var(--brand-primary) 28%,var(--border-default));
  --upload-icon-fg:color-mix(in srgb,var(--brand-primary) 58%,var(--text-main));
}

html[data-theme="dark"] .dropzone-carga-premium{
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--brand-primary) 9%,transparent),transparent 44%),
    var(--surface-soft)!important;
}
html[data-theme="dark"] .dropzone-carga-premium:hover,
html[data-theme="dark"] .dropzone-carga-premium.arrastrando{
  border-color:color-mix(in srgb,var(--brand-primary) 48%,var(--border-default))!important;
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--brand-primary) 13%,transparent),transparent 46%),
    var(--surface-elevated)!important;
}

/* File-selected success icon remains semantic, not tenant-colored. */
.archivo-seleccionado-icono{
  background:var(--semantic-success-soft)!important;
  color:var(--semantic-success)!important;
}


/* v2.7.117 · Design Governance Lockdown
   Canonical component contracts. Module CSS may consume these classes but
   must never define their structural styling. */
:root{
  --governance-section-min-height:94px;
  --governance-process-step-height:90px;
  --governance-empty-min-height:176px;
  --governance-context-min-height:92px;

  /* Controlled frost surface: explicitly approved for quantification cards
     and floating utility layers. White Label owns hue accents, not glass geometry. */
  --frost-light-bg:rgba(255,255,255,.78);
  --frost-light-border:rgba(255,255,255,.72);
  --frost-light-shadow:0 10px 30px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.72);
  --frost-blur:18px;
  --frost-saturate:155%;
}

/* -----------------------------------------------------------------------
   QuantificationCard
   ----------------------------------------------------------------------- */
.kpi-card.quantification-card,
.stat-card.quantification-card,
.metric-card.quantification-card{
  min-width:0;
  border:1px solid var(--frost-light-border)!important;
  border-radius:var(--radius-card)!important;
  background:var(--frost-light-bg)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-saturate));
  backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-saturate));
  box-shadow:var(--frost-light-shadow)!important;
}
html[data-theme="dark"] .kpi-card.quantification-card,
html[data-theme="dark"] .stat-card.quantification-card,
html[data-theme="dark"] .metric-card.quantification-card{
  --frost-light-bg:rgba(21,27,36,.78);
  --frost-light-border:rgba(255,255,255,.075);
  --frost-light-shadow:0 12px 34px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035);
}

/* -----------------------------------------------------------------------
   ProcessStepCard
   Equal geometry for Asistencia · Incidencias · Prenómina · Nómina ·
   Cumplimiento. Content length never changes card height.
   ----------------------------------------------------------------------- */
.process-step-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:var(--space-3)!important;
}
.process-step-card{
  min-width:0!important;
  min-height:var(--governance-process-step-height)!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:22px 38px minmax(0,1fr) 16px!important;
  align-items:center!important;
  gap:var(--space-2)!important;
  padding:var(--space-3)!important;
  border-radius:var(--radius-card)!important;
}
.process-step-card > span:nth-of-type(3){
  min-width:0;
  min-height:48px;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
}
.process-step-card strong{
  min-height:1.25em;
  line-height:1.25!important;
}
.process-step-card small{
  display:-webkit-box!important;
  min-height:2.7em;
  max-height:2.7em;
  overflow:hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.35!important;
}
.process-step-card:last-child{grid-column:auto!important;}
@media (min-width:861px) and (max-width:1180px){
  .process-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width:860px){
  .process-step-grid{
    display:flex!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
  }
  .process-step-card{
    flex:0 0 min(82vw,320px)!important;
    width:min(82vw,320px)!important;
    min-height:var(--governance-process-step-height)!important;
    scroll-snap-align:start;
  }
}

/* -----------------------------------------------------------------------
   SectionHeader
   One internal reading order: eyebrow → title → copy → contextual action.
   ----------------------------------------------------------------------- */
.ui-section-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:var(--space-5)!important;
  min-width:0;
}
.ui-section-header > :first-child{min-width:0;}
.ui-section-header :where(.module-eyebrow,.eyebrow,.section-kicker){
  display:block;
  margin:0 0 var(--space-1)!important;
  color:color-mix(in srgb,var(--brand-primary) 76%,var(--text-main))!important;
  font-size:var(--eyebrow-size)!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:var(--eyebrow-tracking)!important;
  text-transform:uppercase;
}
.ui-section-header h2{
  margin:0!important;
  color:var(--text-main)!important;
  font-size:var(--section-title-size)!important;
  line-height:var(--section-title-line)!important;
  font-weight:700!important;
}
.ui-section-header h2 + p{
  margin:var(--space-1) 0 0!important;
  max-width:72ch;
  color:var(--text-secondary)!important;
  font-size:var(--section-copy-size)!important;
  line-height:var(--section-copy-line)!important;
}
.section-card > .ui-section-header,
.company-approval-section > .ui-section-header{
  min-height:var(--governance-section-min-height)!important;
  padding:var(--space-4) var(--space-5)!important;
  border-bottom:1px solid var(--border-subtle)!important;
}
.settings-section > .ui-section-header{
  min-height:72px!important;
  padding:0 2px var(--space-3)!important;
  margin:0!important;
}
.ui-section-header :where(.compact-filter,form){
  flex:0 0 auto;
  margin:0!important;
}
.ui-section-header :where(select,.field-control){
  min-height:42px!important;
}
@media(max-width:760px){
  .ui-section-header{
    align-items:stretch!important;
    flex-direction:column!important;
    gap:var(--space-3)!important;
  }
  .ui-section-header :where(.compact-filter,form),
  .ui-section-header :where(select,.field-control){
    width:100%!important;
  }
}

/* DS-2026-119 · SectionHeader Compact Variant
   Certified for internal H3 section/card headers that keep the same reading
   order and contextual action geometry without inheriting page-level title
   scale. Modules may adopt this only alongside .ui-section-header. */
.ui-section-header--compact{
  gap:var(--space-3)!important;
  align-items:flex-start!important;
}
.ui-section-header--compact > :first-child{min-width:0;}
.ui-section-header--compact h3{
  margin:0!important;
  color:var(--text-main)!important;
  font-size:var(--type-component-title,.95rem)!important;
  font-weight:var(--weight-component,700)!important;
  line-height:var(--line-compact,1.25)!important;
  letter-spacing:-.01em!important;
}
.ui-section-header--compact h3 + p{
  margin:var(--space-1) 0 0!important;
  max-width:72ch;
  color:var(--text-secondary)!important;
  font-size:var(--section-copy-size)!important;
  line-height:var(--section-copy-line)!important;
}
.ui-section-header--compact > :last-child:not(:first-child){
  flex:0 0 auto;
}
@media(max-width:760px){
  .ui-section-header--compact{align-items:stretch!important;}
  .ui-section-header--compact > :last-child:not(:first-child){align-self:flex-start;}
}

/* -----------------------------------------------------------------------
   SectionNav
   Sub-navigation is never visually fused with the PageHero.
   ----------------------------------------------------------------------- */
.settings-page{
  gap:var(--space-4)!important;
}
.settings-page > .page-hero{
  margin-bottom:0!important;
}
.ui-section-nav{
  position:relative;
  margin:0!important;
  min-height:52px;
  padding:5px!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--radius-card)!important;
  background:color-mix(in srgb,var(--surface-card) 88%,transparent)!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--shadow-xs)!important;
}
.settings-page > .page-hero + .ui-section-nav{
  margin-top:var(--space-1)!important;
}
.ui-section-nav .section-tab{
  min-height:40px!important;
}
html[data-theme="dark"] .ui-section-nav{
  background:color-mix(in srgb,var(--surface-elevated) 84%,transparent)!important;
}

/* -----------------------------------------------------------------------
   EmptyState
   Layout ownership belongs to the canonical component, never its module.
   ----------------------------------------------------------------------- */
.ui-empty-state{
  width:100%!important;
  min-height:var(--governance-empty-min-height)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:var(--space-2)!important;
  padding:var(--space-6)!important;
  text-align:center!important;
}
.ui-empty-state .empty-state-icon{
  margin:0 0 var(--space-1)!important;
}
.ui-empty-state .empty-state-copy{
  width:min(100%,34rem)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:var(--space-1)!important;
  text-align:center!important;
}
.ui-empty-state .empty-state-copy strong{
  margin:0!important;
  color:var(--text-main)!important;
  font-size:.92rem!important;
  line-height:1.3!important;
}
.ui-empty-state .empty-state-copy > span{
  margin:0!important;
  color:var(--text-muted)!important;
  font-size:.78rem!important;
  line-height:1.45!important;
}
.procurement-page .ui-empty-state{
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
}
@media(max-width:760px){
  .ui-empty-state{
    min-height:150px!important;
    padding:var(--space-5)!important;
  }
}

/* -----------------------------------------------------------------------
   ContextInfoCard
   Guidance/context cards use one grid and equal geometry.
   ----------------------------------------------------------------------- */
.context-info-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:var(--space-4)!important;
}
.context-info-card{
  min-width:0;
  min-height:var(--governance-context-min-height)!important;
  height:100%;
  display:grid!important;
  grid-template-columns:var(--component-icon-box) minmax(0,1fr)!important;
  align-items:start!important;
  gap:var(--space-3)!important;
}
.context-info-card > :last-child{min-width:0;}
.context-info-card strong{
  display:block;
  margin:0!important;
  color:var(--text-main)!important;
  font-size:.84rem!important;
  line-height:1.3!important;
}
.context-info-card p{
  margin:var(--space-1) 0 0!important;
  color:var(--text-secondary)!important;
  font-size:.78rem!important;
  line-height:1.48!important;
}
.context-info-card .company-guide-icon{
  width:var(--component-icon-box)!important;
  height:var(--component-icon-box)!important;
  border-radius:var(--component-icon-radius)!important;
}
@media(max-width:980px){
  .context-info-grid{grid-template-columns:1fr!important;}
  .context-info-card{min-height:auto!important;}
}

/* -----------------------------------------------------------------------
   GlassFloatingSurface
   Profile and Activity Center: white frost in light mode; theme-safe frost
   in dark mode. Child rows are transparent so the layer remains coherent.
   ----------------------------------------------------------------------- */
.glass-floating-surface{
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:var(--radius-floating)!important;
  background:rgba(255,255,255,.82)!important;
  -webkit-backdrop-filter:blur(22px) saturate(165%)!important;
  backdrop-filter:blur(22px) saturate(165%)!important;
  box-shadow:0 20px 58px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.usuario-menu-panel.glass-floating-surface :where(a,button){
  background:transparent!important;
  color:var(--text-main)!important;
}
.usuario-menu-panel.glass-floating-surface :where(a,button):hover{
  background:color-mix(in srgb,var(--brand-primary) 6%,rgba(255,255,255,.68))!important;
}
.usuario-menu-panel.glass-floating-surface strong,
.notificaciones-panel.glass-floating-surface strong{
  color:var(--text-main)!important;
}
.usuario-menu-panel.glass-floating-surface small,
.notificaciones-panel.glass-floating-surface small{
  color:var(--text-secondary)!important;
}
.notificaciones-panel.glass-floating-surface .notificacion-item{
  background:transparent!important;
  color:var(--text-main)!important;
}
.notificaciones-panel.glass-floating-surface .notificacion-item:hover{
  background:color-mix(in srgb,var(--brand-primary) 5%,rgba(255,255,255,.64))!important;
}
html[data-theme="dark"] .glass-floating-surface{
  border-color:rgba(255,255,255,.09)!important;
  background:rgba(21,27,36,.82)!important;
  box-shadow:0 22px 62px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
html[data-theme="dark"] .usuario-menu-panel.glass-floating-surface :where(a,button):hover,
html[data-theme="dark"] .notificaciones-panel.glass-floating-surface .notificacion-item:hover{
  background:rgba(255,255,255,.055)!important;
}

/* Governance rule: controlled glass is allowed only on floating layers and
   QuantificationCard. Other content surfaces stay solid unless a future
   design-system release explicitly adds another certified exception. */


/* v2.7.117 · Governance component variants */
.ui-section-nav:not(.settings-section-nav){
  margin:var(--space-4) 0!important;
}
.ui-empty-state--compact{
  min-height:96px!important;
  padding:var(--space-4)!important;
}
.ui-empty-state--compact .empty-state-icon{
  width:34px!important;
  height:34px!important;
  flex-basis:34px!important;
}
.roles-template-explainer.context-info-grid{
  padding:var(--space-3) 0;
}
.roles-template-explainer.context-info-grid .context-info-card{
  padding:var(--space-3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  background:var(--surface-soft);
}


/* v2.7.118 · Surface & Navigation Consolidation
   Final runtime observations before Design Freeze.
   This release closes containment, tab iconography, process alignment,
   compact empty-state breathing room and sibling surface alignment. */
:root{
  --content-surface-padding:var(--space-5);
  --content-surface-gap:var(--space-4);
  --compact-empty-min-height:72px;
  --section-nav-icon-size:16px;
}

/* -----------------------------------------------------------------------
   Surface Containment
   Operational content never floats directly on the page canvas. Titles and
   structural navigation may live outside; data/list/content regions may not.
   ----------------------------------------------------------------------- */
.content-surface{
  min-width:0;
  background:var(--surface-card)!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--radius-card)!important;
  box-shadow:var(--shadow-xs)!important;
}
.section-card.content-surface{
  padding:0!important;
  overflow:hidden;
}
.data-table-surface{
  padding:0!important;
  overflow-x:auto;
  overflow-y:hidden;
}
.data-table-surface :where(table,.data-table,.table-enterprise){
  margin:0!important;
  width:100%;
}
html[data-theme="dark"] .content-surface{
  background:var(--surface-card)!important;
  border-color:var(--border-subtle)!important;
}

/* The SectionHeader is the first layer INSIDE the content surface. */
.content-surface > .ui-section-header{
  margin:0!important;
}
.content-surface > .ui-section-header + :where(.ui-empty-state,.responsive-table-wrap,.table-wrap,.tabla-wrap,.data-table-shell){
  margin-top:0!important;
}

/* -----------------------------------------------------------------------
   ProcessStepCard row alignment
   Every step shares one top/bottom baseline. No card may visually drift.
   ----------------------------------------------------------------------- */
.process-step-grid{
  align-content:start!important;
  align-items:stretch!important;
  grid-auto-rows:1fr;
  margin-bottom:var(--surface-stack-gap,var(--space-5))!important;
}
.process-step-grid > .process-step-card{
  margin:0!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  transform:none!important;
}
.process-step-card{
  height:var(--governance-process-step-height)!important;
  min-height:var(--governance-process-step-height)!important;
  max-height:var(--governance-process-step-height)!important;
}
.payroll-suite-panels{
  margin-top:0!important;
}

/* -----------------------------------------------------------------------
   SectionNav icon contract
   Every tab = meaningful icon + label + optional counter.
   ----------------------------------------------------------------------- */
.ui-section-nav :is(a,button,[role="tab"]){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2)!important;
  white-space:nowrap;
}
.ui-section-nav :is(a,button,[role="tab"]) > svg{
  width:var(--section-nav-icon-size)!important;
  height:var(--section-nav-icon-size)!important;
  flex:0 0 var(--section-nav-icon-size)!important;
  stroke:currentColor;
}
.ui-section-nav :is(a,button,[role="tab"]) > span:not(.badge-count):not(.status-pill){
  min-width:0;
}
.ui-section-nav :where(.badge-count,em,b){
  flex:0 0 auto;
}

/* -----------------------------------------------------------------------
   Compact EmptyState
   Dense contexts use a horizontal, breathable variant rather than a naked
   icon touching copy or the container edge.
   ----------------------------------------------------------------------- */
.ui-empty-state.ui-empty-state--compact{
  width:100%!important;
  min-height:var(--compact-empty-min-height)!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:var(--space-3)!important;
  padding:var(--space-4) var(--space-5)!important;
  text-align:left!important;
  border-radius:0!important;
}
.ui-empty-state.ui-empty-state--compact > svg,
.ui-empty-state.ui-empty-state--compact > .empty-state-icon{
  width:36px!important;
  height:36px!important;
  flex:0 0 36px!important;
  display:grid!important;
  place-items:center!important;
  padding:8px;
  margin:0!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--component-icon-radius)!important;
  background:color-mix(in srgb,var(--brand-primary) 7%,var(--surface-soft))!important;
  color:color-mix(in srgb,var(--brand-primary) 72%,var(--text-main))!important;
}
.ui-empty-state.ui-empty-state--compact > span,
.ui-empty-state.ui-empty-state--compact > strong{
  margin:0!important;
  color:var(--text-secondary)!important;
  font-size:.8rem!important;
  line-height:1.45!important;
}
@media(max-width:760px){
  .ui-empty-state.ui-empty-state--compact{
    min-height:64px!important;
    padding:var(--space-3) var(--space-4)!important;
  }
}

/* -----------------------------------------------------------------------
   Grid Surface Alignment
   Sibling windows on the same grid always share the same top baseline.
   Sticky behavior may not create a false vertical offset.
   ----------------------------------------------------------------------- */
.grid-surface-row{
  align-items:start!important;
}
.grid-surface-row > :where(.card,.surface-panel,.content-surface){
  align-self:start!important;
  margin-top:0!important;
}
.grid-surface-row > .brand-live-preview{
  position:relative!important;
  top:auto!important;
  align-self:start!important;
  margin-top:0!important;
}

/* Brand editor reference: Marca and Vista previa always begin on the same row. */
.brand-studio-v2.grid-surface-row{
  align-items:start!important;
}

/* =======================================================================
   v2.7.119 · Form Control Focus & Filter Rhythm Authority
   Final pre-freeze refinement: minimal form focus, aligned filter actions,
   and breathable icon/copy spacing in contextual action surfaces.
   ======================================================================= */
:root{
  --form-control-border:var(--border-default);
  --form-control-border-focus:color-mix(in srgb,var(--text-main) 34%,var(--border-default));
  --form-control-focus-halo:color-mix(in srgb,var(--brand-primary) 9%,transparent);
  --context-action-gap:var(--space-4);
}

/* Text-entry controls remain quiet at rest; focus is visible without a loud
   brand-colored double outline. This preserves keyboard accessibility while
   keeping the product's minimal visual grammar. */
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,
  textarea
){
  border-color:var(--form-control-border);
}
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,
  textarea
):focus-visible{
  outline:none!important;
  outline-offset:0!important;
  border-color:var(--form-control-border-focus)!important;
  box-shadow:0 0 0 2px var(--form-control-focus-halo)!important;
}

/* Filters are one horizontal control group: inputs/selects and their action
   share the same baseline and control height. */
.compliance-filters{
  align-items:end!important;
  column-gap:var(--space-3)!important;
  row-gap:var(--space-3)!important;
}
.compliance-filters :is(input,select),
.compliance-filters > .btn{
  min-height:var(--control-height-md)!important;
  height:var(--control-height-md)!important;
  align-self:end!important;
}

/* Context action surfaces use the same IconContainer → copy breathing rule. */
.compliance-bulk-copy{
  gap:var(--context-action-gap)!important;
}
.compliance-bulk-copy > div{
  gap:var(--space-1)!important;
}
.compliance-bulk-icon{
  margin:0!important;
}

html[data-theme="dark"]{
  --form-control-border-focus:color-mix(in srgb,var(--text-main) 42%,var(--border-default));
  --form-control-focus-halo:color-mix(in srgb,var(--brand-primary) 12%,transparent);
}

@media(max-width:860px){
  .compliance-filters :is(input,select),
  .compliance-filters > .btn{
    width:100%!important;
  }
  .compliance-bulk-copy{
    gap:var(--space-3)!important;
  }
}

/* v2.7.120 · Flat Semantic Surface Authority
   Final visual simplification before Design Freeze:
   semantic icon containers and pills communicate through fill + foreground,
   never through decorative outlines. Rounded activity accents follow card geometry. */
:root{
  --semantic-icon-fill-strength:10%;
  --semantic-icon-fill-strength-strong:14%;
}

/* -----------------------------------------------------------------------
   Semantic Icon Surface
   Decorative/status icon containers are flat. Interactive icon buttons keep
   their own control border contract and are intentionally excluded here.
   ----------------------------------------------------------------------- */
:where(
  .kpi-card-icon,.icon-badge,.metric-icon,
  .empty-state-icon,.company-guide-icon,.activity-card-icon,
  .attendance-method-icon,.payroll-flow-icon,.attendance-entity-icon,
  .supervision-selection-icon,.upload-surface-icon
){
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
:where(.kpi-card-icon,.icon-badge,.metric-icon){
  background:color-mix(in srgb,currentColor var(--semantic-icon-fill-strength),var(--surface-card))!important;
}
html[data-theme="dark"] :where(.kpi-card-icon,.icon-badge,.metric-icon){
  background:color-mix(in srgb,currentColor var(--semantic-icon-fill-strength-strong),var(--surface-card))!important;
}

/* -----------------------------------------------------------------------
   Status Pill / semantic badges
   Fill and foreground carry meaning. Outlines are intentionally removed.
   ----------------------------------------------------------------------- */
.status-pill,
:where(
  .badge,.status-badge,
  .badge-success,.badge-green,.badge-warning,.badge-amber,
  .badge-danger,.badge-red,.badge-info,.badge-blue,
  .badge-neutral,.badge-gray,.badge-muted
){
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.status-pill.status-success{background:var(--status-success-bg)!important;color:var(--status-success-text)!important}
.status-pill.status-progress{background:var(--status-progress-bg)!important;color:var(--status-progress-text)!important}
.status-pill.status-warning{background:var(--status-warning-bg)!important;color:var(--status-warning-text)!important}
.status-pill.status-info{background:var(--status-info-bg)!important;color:var(--status-info-text)!important}
.status-pill.status-danger{background:var(--status-danger-bg)!important;color:var(--status-danger-text)!important}
.status-pill.status-neutral{background:var(--status-neutral-bg)!important;color:var(--status-neutral-text)!important}

/* White Label certification is a compact semantic pill, never a circle. */
.brand-token-contract{
  display:grid!important;
  grid-template-columns:auto minmax(0,1.55fr) minmax(11rem,.65fr) auto;
  align-items:center!important;
  column-gap:var(--space-3)!important;
  row-gap:var(--space-2)!important;
}
.brand-token-contract > svg{align-self:start;margin-top:2px!important}
.brand-certification-badge{
  flex:0 0 auto!important;
  width:max-content!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:28px!important;
  margin:0!important;
  padding:5px 10px!important;
  border:0!important;
  outline:0!important;
  border-radius:var(--radius-pill)!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.brand-certification-badge.is-certified{
  background:var(--status-success-bg)!important;
  color:var(--status-success-text)!important;
}
.brand-certification-badge.is-warning{
  background:var(--status-warning-bg)!important;
  color:var(--status-warning-text)!important;
}
@media(max-width:920px){
  .brand-token-contract{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  .brand-token-contract .brand-contrast-status,
  .brand-token-contract .brand-certification-badge{
    grid-column:2;
  }
}

/* -----------------------------------------------------------------------
   Activity card semantic accent
   A true bottom border follows the card radius; the old straight overlay is
   retired. The accent remains module-semantic and independent of White Label.
   ----------------------------------------------------------------------- */
.activity-showcase-card{
  border-bottom-width:4px!important;
  border-bottom-style:solid!important;
  border-bottom-color:var(--activity-accent)!important;
}
.activity-showcase-card::after{
  content:none!important;
  display:none!important;
}

/* Context/empty semantic icon surfaces also lose decorative outlines while
   retaining a soft fill and accessible foreground. */
:where(.empty-state-icon,.company-guide-icon,.context-info-card .company-guide-icon){
  border:0!important;
  box-shadow:none!important;
}


/* v2.7.121 · Final Visual Polish Authority
   Final pre-freeze corrections: inset dividers, SectionNav active state,
   EntityChip and CriticalAttentionSurface. */
:root{
  --surface-divider-inset:var(--space-5);
  --entity-chip-bg:color-mix(in srgb,var(--brand-primary) 7%,var(--surface-card));
  --entity-chip-hover-bg:color-mix(in srgb,var(--brand-primary) 11%,var(--surface-card));
}

/* -----------------------------------------------------------------------
   Inset Divider
   Internal dividers never collide with the radius of a rounded surface.
   Empty states need spacing, not an edge-to-edge line.
   ----------------------------------------------------------------------- */
.content-surface > .ui-section-header{
  position:relative;
  border-bottom:0!important;
}
.content-surface > .ui-section-header::after{
  content:"";
  position:absolute;
  left:var(--surface-divider-inset);
  right:var(--surface-divider-inset);
  bottom:0;
  height:1px;
  background:var(--border-subtle);
  pointer-events:none;
}
.content-surface:has(> .ui-empty-state) > .ui-section-header::after{
  display:none;
}
.content-surface > .ui-empty-state{
  border-top:0!important;
}
@media(max-width:760px){
  .content-surface > .ui-section-header::after{
    left:var(--space-4);
    right:var(--space-4);
  }
}

/* -----------------------------------------------------------------------
   SectionNav active state
   Every canonical tab has the same brand-soft active grammar.
   ----------------------------------------------------------------------- */
.ui-section-nav :is(
  a.active,
  button.active,
  .section-tab.active,
  [role="tab"][aria-selected="true"]
){
  background:var(--interaction-selected)!important;
  color:var(--brand-primary)!important;
  border-color:transparent!important;
  box-shadow:none!important;
  font-weight:700!important;
}
.ui-section-nav :is(
  a.active,
  button.active,
  .section-tab.active,
  [role="tab"][aria-selected="true"]
) > svg{
  color:currentColor!important;
}
html[data-theme="dark"] .ui-section-nav :is(
  a.active,
  button.active,
  .section-tab.active,
  [role="tab"][aria-selected="true"]
){
  background:color-mix(in srgb,var(--brand-primary) 18%,var(--surface-elevated))!important;
}

/* -----------------------------------------------------------------------
   EntityChip
   Referenced people/entities become explicit, compact interactive surfaces.
   No decorative outline; focus-visible remains accessible.
   ----------------------------------------------------------------------- */
.entity-chip{
  width:max-content;
  max-width:100%;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  margin-top:var(--space-3);
  padding:8px 12px;
  border:0!important;
  border-radius:var(--radius-pill)!important;
  background:var(--entity-chip-bg);
  color:var(--text-main);
  text-decoration:none;
  font-size:.78rem;
  font-weight:700;
  line-height:1.2;
  transition:background-color var(--interaction-transition),transform var(--interaction-transition);
}
.entity-chip > svg{
  flex:0 0 auto;
  color:var(--brand-primary);
}
.entity-chip > span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(hover:hover){
  .entity-chip:hover{
    background:var(--entity-chip-hover-bg);
    color:var(--text-main);
    text-decoration:none;
    transform:translateY(-1px);
  }
}
.entity-chip:focus-visible{
  outline:2px solid var(--brand-primary)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px var(--brand-focus-ring)!important;
}

/* -----------------------------------------------------------------------
   CriticalAttentionSurface
   Criticality is expressed by surface, eyebrow and copy — no redundant
   warning icon. Entity and decision context are scannable.
   ----------------------------------------------------------------------- */
.critical-attention-surface{
  align-items:center!important;
  padding:var(--space-5) var(--space-6)!important;
}
.critical-attention-surface::before{
  display:none!important;
}
.critical-attention-surface.spotlight-critico{
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--semantic-danger) 8%,var(--surface-card)),
    var(--surface-card) 74%
  )!important;
  border-color:color-mix(in srgb,var(--semantic-danger) 28%,var(--border-subtle))!important;
}
.critical-attention-surface .dashboard-spotlight-copy{
  min-width:0;
  flex:1;
}
.spotlight-meta-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-bottom:var(--space-1);
}
.spotlight-meta-row .spotlight-eyebrow{
  margin:0!important;
}
.critical-attention-surface .spotlight-extra{
  min-height:24px;
  margin:0!important;
  padding:4px 9px;
  border:0!important;
  background:color-mix(in srgb,var(--semantic-danger) 7%,var(--surface-card))!important;
  color:var(--text-secondary);
}
.attention-context-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-3);
  color:var(--text-secondary);
}
.attention-context-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.76rem;
  line-height:1.35;
}
.attention-context-item::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--semantic-danger) 38%,transparent);
}
.critical-attention-surface .spotlight-cta{
  flex:0 0 auto;
  align-self:center;
}
@media(max-width:860px){
  .critical-attention-surface{
    align-items:stretch!important;
    padding:var(--space-5)!important;
  }
  .critical-attention-surface .spotlight-cta{
    width:100%;
    justify-content:center;
  }
  .entity-chip{
    max-width:100%;
  }
}


/* v2.7.122 · Pre-Freeze Enforcement Authority
   Final systemic enforcement before Design Freeze:
   form focus cascade, semantic icon completeness, modal close consistency,
   interactive card brand hover and configuration surface rhythm. */
:root{
  --interactive-card-hover-bg:color-mix(in srgb,var(--brand-primary) 5%,var(--surface-card));
  --interactive-card-hover-border:color-mix(in srgb,var(--brand-primary) 18%,var(--border-subtle));
  --settings-section-gap:var(--space-5);
}

/* -----------------------------------------------------------------------
   FormControl Focus Cascade Cleanup
   One calm focus treatment only. This explicitly neutralizes legacy :focus
   and wrapper focus-within effects that could stack into a double outline.
   ----------------------------------------------------------------------- */
html body :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,
  textarea
):focus,
html body :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,
  textarea
):focus-visible{
  outline:0!important;
  outline-offset:0!important;
  border-color:var(--form-control-border-focus)!important;
  box-shadow:0 0 0 2px var(--form-control-focus-halo)!important;
}
:where(
  .personas-search-field,
  .organization-search,
  .search-field,
  .search-control,
  .filter-search,
  .autocomplete-field
):focus-within{
  outline:0!important;
  box-shadow:none!important;
}
:where(
  .personas-search-field,
  .organization-search,
  .search-field,
  .search-control,
  .filter-search,
  .autocomplete-field
) > input:focus,
:where(
  .personas-search-field,
  .organization-search,
  .search-field,
  .search-control,
  .filter-search,
  .autocomplete-field
) > input:focus-visible{
  outline:0!important;
  box-shadow:0 0 0 2px var(--form-control-focus-halo)!important;
}

/* -----------------------------------------------------------------------
   Modal close control
   Top-right modal control always communicates close and uses canonical X.
   ----------------------------------------------------------------------- */
.modal-header > :where(.icon-btn,[data-cerrar-modal],[data-close-company-modal]){
  flex:0 0 auto;
  align-self:flex-start;
  width:var(--interaction-touch-min)!important;
  height:var(--interaction-touch-min)!important;
  min-width:var(--interaction-touch-min)!important;
  min-height:var(--interaction-touch-min)!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:0!important;
  background:color-mix(in srgb,var(--text-main) 4%,transparent)!important;
  color:var(--text-main)!important;
  box-shadow:none!important;
}
@media(hover:hover){
  .modal-header > :where(.icon-btn,[data-cerrar-modal],[data-close-company-modal]):hover{
    background:color-mix(in srgb,var(--text-main) 8%,transparent)!important;
  }
}

/* -----------------------------------------------------------------------
   InteractiveCard brand hover
   Informational cards stay static. Explicit interactive cards receive only a
   subtle White Label-derived surface response.
   ----------------------------------------------------------------------- */
.interactive-card,
.role-template-card{
  transition:
    background-color var(--interaction-transition),
    border-color var(--interaction-transition),
    box-shadow var(--interaction-transition),
    transform var(--interaction-transition);
}
@media(hover:hover) and (pointer:fine){
  .interactive-card:hover,
  .role-template-card:hover{
    background:var(--interactive-card-hover-bg)!important;
    border-color:var(--interactive-card-hover-border)!important;
    box-shadow:var(--shadow-sm)!important;
    transform:translateY(-1px);
  }
}
.interactive-card:focus-within,
.role-template-card:focus-within{
  background:var(--interactive-card-hover-bg)!important;
  border-color:var(--interactive-card-hover-border)!important;
}

/* -----------------------------------------------------------------------
   Configuration Surface Containment + SectionHeader Rhythm
   No configuration heading/copy floats directly on the page canvas.
   ----------------------------------------------------------------------- */
.settings-contained-surface{
  display:grid!important;
  gap:var(--settings-section-gap)!important;
  padding:var(--space-5)!important;
  margin-top:var(--space-4)!important;
  overflow:visible!important;
}
.settings-contained-surface > .ui-section-header{
  margin:0!important;
  padding:0!important;
}
.settings-contained-surface > .ui-section-header::after{
  display:none!important;
}
.settings-contained-surface > .ui-section-header + *{
  margin-top:0!important;
}
.settings-contained-surface .settings-section-heading > div{
  display:grid;
  gap:var(--space-1);
}
.settings-contained-surface .settings-section-heading :is(h2,p,.section-kicker){
  margin:0!important;
}
html[data-theme="dark"] .settings-contained-surface{
  background:var(--surface-card)!important;
}
@media(max-width:860px){
  .settings-contained-surface{
    gap:var(--space-4)!important;
    padding:var(--space-4)!important;
  }
}


/* v2.7.123 · Form Interaction & Card Outline Authority
   Final interaction/surface unification before Design Freeze:
   all editable/selectable controls share one White Label-derived active signal,
   and all canonical cards retain a perceptible outline in light/dark. */
:root{
  --form-control-active-border:color-mix(in srgb,var(--brand-primary) 58%,var(--border-default));
  --form-control-active-halo:color-mix(in srgb,var(--brand-primary) 11%,transparent);
  --canonical-card-outline:color-mix(in srgb,var(--text-muted) 24%,transparent);
  --canonical-card-outline-dark:color-mix(in srgb,var(--text-secondary) 20%,transparent);
}

/* -----------------------------------------------------------------------
   FormControl active/selected language
   The selected date is the reference interaction grammar: one clean brand
   signal, never a double ring. Rest state remains quiet.
   ----------------------------------------------------------------------- */
html body :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,
  textarea
):focus,
html body :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,
  textarea
):focus-visible{
  outline:0!important;
  outline-offset:0!important;
  border-color:var(--form-control-active-border)!important;
  box-shadow:0 0 0 2px var(--form-control-active-halo)!important;
}

/* Search/autocomplete wrappers may own geometry, but never a second ring. */
:where(
  .personas-search-field,
  .organization-search,
  .search-field,
  .search-control,
  .filter-search,
  .autocomplete-field,
  [role="combobox"]
):focus-within{
  outline:0!important;
  border-color:var(--form-control-active-border)!important;
  box-shadow:0 0 0 2px var(--form-control-active-halo)!important;
}
:where(
  .personas-search-field,
  .organization-search,
  .search-field,
  .search-control,
  .filter-search,
  .autocomplete-field
) > input:focus,
:where(
  .personas-search-field,
  .organization-search,
  .search-field,
  .search-control,
  .filter-search,
  .autocomplete-field
) > input:focus-visible{
  outline:0!important;
  box-shadow:none!important;
  border-color:transparent!important;
}

/* Custom/selectable controls use the same selected grammar. */
:where(
  [role="option"][aria-selected="true"],
  [role="tab"][aria-selected="true"],
  .segment-option.is-active,
  .segment-option.active
){
  background:color-mix(in srgb,var(--brand-primary) 10%,var(--surface-card))!important;
  color:var(--text-main)!important;
}
.date-picker-day.is-selected{
  background:var(--brand-primary)!important;
  color:var(--brand-primary-foreground)!important;
  border-color:var(--brand-primary)!important;
  box-shadow:0 6px 16px color-mix(in srgb,var(--brand-primary) 20%,transparent)!important;
}
.date-picker-day.is-today:not(.is-selected){
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-primary) 40%,transparent)!important;
  color:var(--brand-primary)!important;
}

html[data-theme="dark"]{
  --form-control-active-border:color-mix(in srgb,var(--brand-primary) 64%,var(--border-default));
  --form-control-active-halo:color-mix(in srgb,var(--brand-primary) 15%,transparent);
}

/* Semantic states remain above brand focus. */
html body :where(input,select,textarea)[aria-invalid="true"]:focus,
html body :where(input,select,textarea)[aria-invalid="true"]:focus-visible,
html body :where(input,select,textarea).is-invalid:focus,
html body :where(input,select,textarea).is-invalid:focus-visible{
  border-color:var(--semantic-danger)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--semantic-danger) 16%,transparent)!important;
}

/* -----------------------------------------------------------------------
   Canonical Card Outline
   Cards/surfaces never visually disappear into the page canvas.
   White Label never owns this outline.
   ----------------------------------------------------------------------- */
:where(
  .card,
  .content-surface,
  .surface-panel,
  .section-card,
  .settings-card,
  .role-template-card,
  .company-master-guide,
  .company-master-table,
  .company-approval-section,
  .kpi-card,
  .stat-card,
  .metric-card,
  .quantification-card
){
  border-width:1px!important;
  border-style:solid!important;
  border-color:var(--canonical-card-outline)!important;
}
.kpi-card.quantification-card,
.stat-card.quantification-card,
.metric-card.quantification-card{
  border-color:var(--canonical-card-outline)!important;
}
html[data-theme="dark"] :where(
  .card,
  .content-surface,
  .surface-panel,
  .section-card,
  .settings-card,
  .role-template-card,
  .company-master-guide,
  .company-master-table,
  .company-approval-section,
  .kpi-card,
  .stat-card,
  .metric-card,
  .quantification-card
){
  border-color:var(--canonical-card-outline-dark)!important;
}

/* Flat semantic icon containers stay borderless; card outline does not leak. */
:where(
  .kpi-card-icon,.icon-badge,.metric-icon,
  .empty-state-icon,.company-guide-icon,.activity-card-icon,
  .attendance-method-icon,.payroll-flow-icon,.attendance-entity-icon,
  .supervision-selection-icon,.upload-surface-icon
){
  border:0!important;
}


/* v2.7.124 · Surface Separation Authority
   Floow separates hierarchy primarily through spacing, surface contrast and
   elevation. Decorative outlines are not the default card grammar.
   Borders remain where they communicate interaction, accessibility,
   functional boundaries or semantic risk. */
:root{
  --surface-elevation-card:0 8px 24px rgba(15,23,42,.045);
  --surface-elevation-section:0 10px 30px rgba(15,23,42,.04);
  --surface-elevation-hover:0 12px 28px rgba(15,23,42,.075);
  --surface-nested-bg:color-mix(in srgb,var(--surface-soft) 72%,var(--surface-card));
  --surface-empty-bg:color-mix(in srgb,var(--surface-soft) 66%,transparent);
  --surface-composition-gap:var(--space-4);
}
html[data-theme="dark"]{
  --surface-elevation-card:0 10px 26px rgba(0,0,0,.16);
  --surface-elevation-section:0 12px 32px rgba(0,0,0,.18);
  --surface-elevation-hover:0 14px 32px rgba(0,0,0,.23);
  --surface-nested-bg:color-mix(in srgb,var(--surface-soft) 62%,var(--surface-card));
  --surface-empty-bg:color-mix(in srgb,var(--surface-soft) 54%,transparent);
}

/* -----------------------------------------------------------------------
   Surface hierarchy
   A card is not outlined merely because it is a card.
   ----------------------------------------------------------------------- */
.page-hero{
  border:0!important;
  box-shadow:var(--surface-elevation-section)!important;
}
:where(
  .card,
  .content-surface,
  .surface-panel,
  .section-card,
  .settings-card,
  .role-template-card,
  .company-master-guide,
  .company-approval-section,
  .kpi-card,
  .stat-card,
  .metric-card,
  .quantification-card,
  .context-info-card
){
  border:0!important;
}
:where(
  .content-surface,
  .surface-panel,
  .section-card,
  .settings-card,
  .company-approval-section
){
  box-shadow:var(--surface-elevation-section)!important;
}
:where(
  .card,
  .role-template-card,
  .kpi-card,
  .stat-card,
  .metric-card,
  .quantification-card,
  .context-info-card
){
  box-shadow:var(--surface-elevation-card)!important;
}

/* Nested cards should not create "box inside box" depth. */
:where(.content-surface,.section-card,.settings-contained-surface) :where(
  .card,
  .settings-card,
  .context-info-card,
  .role-template-card
){
  border:0!important;
}
:where(.content-surface,.section-card,.settings-contained-surface) :where(
  .card:not(.interactive-card):not(.role-template-card),
  .settings-card,
  .context-info-card
){
  box-shadow:none!important;
}

/* QuantificationCard keeps its frost surface but not a decorative edge. */
.kpi-card.quantification-card,
.stat-card.quantification-card,
.metric-card.quantification-card{
  border:0!important;
  box-shadow:var(--frost-light-shadow)!important;
}

/* Context information is grouped by tone, not outline. */
.context-info-card,
.roles-template-explainer.context-info-grid .context-info-card{
  border:0!important;
  background:var(--surface-nested-bg)!important;
}

/* -----------------------------------------------------------------------
   Interactive surfaces
   Rest is calm; hover/focus communicates interactivity with brand tint and
   elevation, not a permanent border.
   ----------------------------------------------------------------------- */
@media(hover:hover) and (pointer:fine){
  :where(.interactive-card,.role-template-card):hover{
    border:0!important;
    background:var(--interactive-card-hover-bg)!important;
    box-shadow:var(--surface-elevation-hover)!important;
    transform:translateY(-1px);
  }
}
:where(.interactive-card,.role-template-card):focus-within{
  border:0!important;
  background:var(--interactive-card-hover-bg)!important;
  box-shadow:var(--surface-elevation-hover)!important;
}

/* -----------------------------------------------------------------------
   EmptyState geometry
   Empty states are calm rounded surfaces. Dashed boundaries are reserved for
   actual dropzones/upload targets.
   ----------------------------------------------------------------------- */
.ui-empty-state{
  border:0!important;
  border-radius:var(--radius-card)!important;
  background:var(--surface-empty-bg)!important;
  box-shadow:none!important;
}
.ui-empty-state--compact{
  border:0!important;
  border-radius:var(--radius-card)!important;
  background:var(--surface-empty-bg)!important;
}
:where(
  .dropzone,
  .dropzone-carga,
  .dropzone-carga-premium,
  .release-dropzone,
  .document-dropzone-modern,
  .expense-dropzone,
  .upload-dropzone,
  [data-dropzone]
){
  border-width:1px!important;
  border-style:dashed!important;
  border-color:var(--border-default)!important;
}

/* -----------------------------------------------------------------------
   Functional boundaries remain.
   Inputs/selects/textarea, data-entry shells and semantic alerts keep their
   boundaries because the edge communicates behavior or risk.
   ----------------------------------------------------------------------- */
html body :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea
){
  border-width:1px!important;
  border-style:solid!important;
}
:where(
  .alerta,
  .alert,
  .danger-surface,
  .warning-surface,
  .critical-attention-surface
){
  border-width:1px!important;
  border-style:solid!important;
}
:where(.data-table-surface,.table-enterprise){
  border-color:transparent!important;
}
:where(.table-enterprise,.data-table) :where(th,td){
  border-left:0!important;
  border-right:0!important;
}

/* Modals separate from backdrop through surface + elevation, not outline. */
:where(.modal-card,.rh-motion-modal,.motion-modal){
  border:0!important;
  box-shadow:0 28px 70px rgba(15,23,42,.20)!important;
}
html[data-theme="dark"] :where(.modal-card,.rh-motion-modal,.motion-modal){
  box-shadow:0 30px 78px rgba(0,0,0,.48)!important;
}

/* -----------------------------------------------------------------------
   Canonical Surface Composition
   Modules provide content; Design System owns column proportions, gap and
   alignment. The composition must consume the available surface width.
   ----------------------------------------------------------------------- */
.surface-composition-grid{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,2fr) minmax(320px,1fr)!important;
  gap:var(--surface-composition-gap)!important;
  align-items:stretch!important;
}
.surface-composition-grid > *{
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  align-self:stretch!important;
}
.ai-settings-grid.surface-composition-grid{
  grid-template-columns:minmax(0,2fr) minmax(320px,1fr)!important;
}
.ai-settings-grid.surface-composition-grid .ai-provider-status{
  height:100%;
}
@media(max-width:1180px){
  .surface-composition-grid,
  .ai-settings-grid.surface-composition-grid{
    grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr)!important;
  }
}
@media(max-width:860px){
  .surface-composition-grid,
  .ai-settings-grid.surface-composition-grid{
    grid-template-columns:1fr!important;
  }
}

/* SectionNav remains a distinct navigational layer, but its perimeter is not
   visually emphasized as another boxed card. */
.ui-section-nav{
  border:0!important;
  box-shadow:var(--shadow-xs)!important;
}


/* v2.7.125 · Surface Exception Closure
   Closes legacy selectors that escaped Surface Separation Authority:
   organization search inner input, dashboard command hint and recent activity. */

/* -----------------------------------------------------------------------
   SearchControl ownership
   Search wrapper owns geometry and focus. Inner input is visually transparent
   in rest/hover/focus so a second rectangle can never appear.
   ----------------------------------------------------------------------- */
.organization-search{
  position:relative;
  border:1px solid var(--border-default)!important;
  border-radius:var(--radius-control)!important;
  background:var(--surface-card)!important;
  box-shadow:none!important;
}
.organization-search > input{
  min-width:0!important;
  width:100%!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.organization-search > input:hover,
.organization-search > input:focus,
.organization-search > input:focus-visible{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.organization-search:focus-within{
  border-color:var(--form-control-active-border)!important;
  box-shadow:0 0 0 2px var(--form-control-active-halo)!important;
}
.organization-toolbar{
  align-items:center!important;
}
.organization-count{
  display:inline-flex;
  align-items:center;
  min-height:var(--interaction-touch-min);
}

/* -----------------------------------------------------------------------
   Dashboard surface exceptions
   These legacy components are surfaces/actions, not bounded form controls.
   ----------------------------------------------------------------------- */
.command-hint-card{
  border:0!important;
  background:var(--surface-card)!important;
  box-shadow:var(--surface-elevation-card)!important;
}
@media(hover:hover) and (pointer:fine){
  .command-hint-card:hover{
    border:0!important;
    background:color-mix(in srgb,var(--brand-primary) 4%,var(--surface-card))!important;
    box-shadow:var(--surface-elevation-hover)!important;
  }
}
.command-hint-card:focus-visible{
  border:0!important;
  outline:2px solid var(--brand-primary)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px var(--brand-focus-ring),var(--surface-elevation-hover)!important;
}

.dashboard-activity-showcase{
  border:0!important;
  box-shadow:var(--surface-elevation-section)!important;
}
.activity-showcase-card{
  border:0!important;
  box-shadow:var(--surface-elevation-card)!important;
}
.activity-showcase-note{
  border:0!important;
  box-shadow:none!important;
}
@media(hover:hover) and (pointer:fine){
  .activity-showcase-card:hover{
    border:0!important;
    box-shadow:var(--surface-elevation-hover)!important;
    transform:translateY(-1px);
  }
}


/* v2.7.125 · Dashboard Interaction Refinement
   Activity cards follow the same White Label hover grammar as role cards.
   Critical attention CTA stays clear but no longer dominates the alert. */
.activity-showcase-card{
  transition:
    background-color var(--interaction-transition),
    box-shadow var(--interaction-transition),
    transform var(--interaction-transition);
}
@media(hover:hover) and (pointer:fine){
  .activity-showcase-card:hover{
    background:var(--interactive-card-hover-bg)!important;
    box-shadow:var(--surface-elevation-hover)!important;
    transform:translateY(-1px);
  }
}
.activity-showcase-card:focus-within{
  background:var(--interactive-card-hover-bg)!important;
  box-shadow:var(--surface-elevation-hover)!important;
}
.activity-showcase-card:hover .activity-card-arrow,
.activity-showcase-card:focus-within .activity-card-arrow{
  background:color-mix(in srgb,var(--brand-primary) 7%,var(--surface-card))!important;
  color:var(--brand-primary)!important;
}

/* Critical attention: the semantic red surface carries urgency.
   CTA is intentionally secondary/brand-soft instead of a large solid block. */
.critical-attention-surface .spotlight-cta{
  min-height:40px!important;
  padding:9px 14px!important;
  background:color-mix(in srgb,var(--brand-primary) 9%,var(--surface-card))!important;
  color:var(--brand-primary)!important;
  border:0!important;
  box-shadow:none!important;
  font-weight:700!important;
}
@media(hover:hover){
  .critical-attention-surface .spotlight-cta:hover{
    background:color-mix(in srgb,var(--brand-primary) 14%,var(--surface-card))!important;
    color:var(--brand-primary)!important;
    box-shadow:none!important;
    transform:none!important;
  }
}
.critical-attention-surface .spotlight-cta:focus-visible{
  outline:2px solid var(--brand-primary)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px var(--brand-focus-ring)!important;
}


/* v2.7.126 · Design Freeze Candidate — final hierarchy closure
   Canonical containment and spacing only; no decorative outlines restored. */
.surface-contained-kpi-group{
  padding:var(--space-5)!important;
  background:var(--surface-card)!important;
  border:0!important;
  box-shadow:var(--surface-elevation-section)!important;
  border-radius:var(--radius-card)!important;
}
.surface-contained-kpi-group .dashboard-section-header{margin-bottom:var(--space-4)!important;}
.organization-chart-card .organization-structure-editor{
  margin:var(--space-4) var(--space-4) 0!important;
}
.roles-template-explainer .context-info-card{
  background:color-mix(in srgb,var(--brand-primary) 3.5%,var(--surface-card))!important;
  border:0!important;
  box-shadow:none!important;
}
.roles-template-explainer .context-info-card>svg{
  color:var(--brand-primary)!important;
}
.roles-template-explainer .context-info-card small{
  color:var(--text-secondary)!important;
}
html[data-theme="dark"] .roles-template-explainer .context-info-card{
  background:color-mix(in srgb,var(--brand-primary) 7%,var(--surface-card))!important;
}
@media(max-width:860px){
  .surface-contained-kpi-group{padding:var(--space-4)!important;}
  .organization-chart-card .organization-structure-editor{margin:var(--space-3) var(--space-3) 0!important;}
}


/* v2.7.129 · Mobile Responsive Certification
   DS-2026-001 — certified evolution of the frozen Design System.
   Mobile layout must resolve correctly from first paint, reserve app chrome,
   keep one SectionNav grammar, and use RHMotionModal as a true sheet. */
@media (max-width:860px){
  :root{
    --mobile-bottom-clearance:calc(var(--mobile-bottom-nav-h,72px) + 70px + env(safe-area-inset-bottom));
    --mobile-section-nav-gap:var(--space-4,16px);
    --mobile-sheet-inline:10px;
  }

  /* App chrome owns physical space: content never hides below FAB/bottom nav. */
  .content,
  .main-content{
    padding-bottom:var(--mobile-bottom-clearance)!important;
  }
  :where(.mobile-bottom-clearance,.page-bottom-clearance){
    min-height:var(--mobile-bottom-clearance)!important;
  }

  /* SectionNav: one active grammar, horizontal rail, no legacy underline. */
  .ui-section-nav{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin-block:0 var(--mobile-section-nav-gap)!important;
    padding:5px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity;
    scroll-padding-inline:5px;
  }
  .ui-section-nav :is(a,button,[role="tab"]){
    flex:0 0 auto!important;
    scroll-snap-align:start;
    border-bottom:0!important;
    text-decoration:none!important;
  }
  .ui-section-nav :is(a,button,[role="tab"])::before,
  .ui-section-nav :is(a,button,[role="tab"])::after{
    display:none!important;
    content:none!important;
  }
  .ui-section-nav :is(.active,.is-active,[aria-selected="true"]){
    border-bottom:0!important;
    box-shadow:none!important;
  }

  /* Settings rhythm: distribute space around nav instead of a large dead zone. */
  .settings-page{
    gap:var(--space-4)!important;
  }
  .settings-page > .page-hero{
    margin-bottom:0!important;
  }
  .settings-page > .ui-section-nav{
    margin-top:0!important;
    margin-bottom:var(--space-4)!important;
  }
  .settings-page > .ui-section-nav + .settings-section{
    margin-top:0!important;
  }
  .settings-section-heading{
    margin-bottom:var(--space-4)!important;
  }

  /* Expediente tabs remain in document flow on mobile; no content overlap. */
  .expediente-section-tabs{
    position:relative!important;
    top:auto!important;
    margin-top:var(--space-4)!important;
    margin-bottom:var(--space-4)!important;
  }
  .expediente-hero{
    min-height:0!important;
    height:auto!important;
    margin-bottom:0!important;
  }

  /* Three operational KPI cards remain visible as a balanced 3-card set. */
  .timeoff-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .timeoff-stats > .stat-card{
    grid-column:auto!important;
    min-height:148px!important;
    height:auto!important;
    padding:12px!important;
  }
  .timeoff-stats .kpi-card-value{font-size:1.55rem!important;}
  .timeoff-stats .kpi-card-label{font-size:.72rem!important;line-height:1.2!important;}
  .timeoff-stats .kpi-card-subtitle{font-size:.66rem!important;line-height:1.3!important;}

  /* RHMotionModal mobile sheet: header stays visible, form owns scroll,
     actions remain inside the modal rather than floating over fields. */
  .modal-overlay{
    padding:
      max(8px,env(safe-area-inset-top))
      var(--mobile-sheet-inline)
      max(8px,env(safe-area-inset-bottom))!important;
    align-items:flex-end!important;
    overflow:hidden!important;
  }
  .modal-overlay > :where(.modal-card,[role="dialog"]){
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    overscroll-behavior:contain!important;
  }
  .modal-card > form{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    padding-bottom:0!important;
    scroll-padding-bottom:0!important;
  }
  .modal-card .modal-actions,
  .app-modal .app-modal-footer{
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    margin-top:var(--space-5,20px)!important;
    margin-bottom:0!important;
    padding:0!important;
    background:transparent!important;
    border-top:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .expense-modal .modal-actions{
    margin-inline:0!important;
    margin-bottom:0!important;
  }
  .modal-close-clean,
  .modal-card .icon-btn[data-cerrar-modal]{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    border-radius:var(--radius-control)!important;
    background:var(--surface-soft)!important;
    color:var(--text-main)!important;
  }
  @media (hover:none) and (pointer:coarse){
    .modal-close-clean:focus-visible,
    .modal-card .icon-btn[data-cerrar-modal]:focus-visible{
      outline:0!important;
      box-shadow:none!important;
    }
  }

  /* Nested form panels are subgroups, not heavy cards inside cards. */
  .ai-provider-cards{
    gap:var(--space-3)!important;
  }
  .ai-provider-card{
    background:color-mix(in srgb,var(--surface-card) 96%,var(--brand-primary) 4%)!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* Release Manager KPI rail is correct on first paint — no 2x2 -> rail CLS. */
  .release-kpi-grid{
    display:flex!important;
    grid-template-columns:none!important;
    width:calc(100% + var(--content-gutter-mobile,12px))!important;
    max-width:none!important;
    margin-right:calc(var(--content-gutter-mobile,12px) * -1)!important;
    padding:1px var(--content-gutter-mobile,12px) 6px 0!important;
    gap:var(--card-collection-gap,12px)!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  .release-kpi-grid::-webkit-scrollbar{display:none!important;}
  .release-kpi-grid > .stat-card{
    flex:0 0 var(--kpi-card-mobile-width,min(78vw,300px))!important;
    width:var(--kpi-card-mobile-width,min(78vw,300px))!important;
    min-width:var(--kpi-card-mobile-width,min(78vw,300px))!important;
    max-width:var(--kpi-card-mobile-width,min(78vw,300px))!important;
    min-height:136px!important;
    height:auto!important;
    max-height:none!important;
    scroll-snap-align:start;
  }

  /* Release candidate status copy is contextual content, never a native black box. */
  .release-item :where(.alert,.alert-error){
    border:0!important;
    border-radius:var(--radius-card)!important;
    background:var(--semantic-danger-soft)!important;
    color:var(--status-danger-text)!important;
    box-shadow:none!important;
  }
}

@media (max-width:390px){
  .timeoff-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .timeoff-stats > .stat-card{padding:10px!important;min-height:140px!important;}
  .timeoff-stats .kpi-card-icon{width:38px!important;height:38px!important;}
  .timeoff-stats .kpi-card-subtitle{display:none!important;}
}


/* v2.7.129 rev2 · Mobile PageHero Action Proportion
   DS-2026-002 — narrow mobile must never wrap one sibling action into a
   taller control while another remains single-line. Authority owns the
   responsive composition; modules only provide actions. */
@media (max-width:860px){
  .visual-page-header.page-hero > .procurement-header-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--space-3)!important;
    width:100%!important;
    align-items:stretch!important;
  }
  .visual-page-header.page-hero > .procurement-header-actions > :where(.btn,a.btn,button.btn){
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    height:auto!important;
    justify-content:center!important;
    align-items:center!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
}
@media (max-width:390px){
  .visual-page-header.page-hero > .procurement-header-actions{
    grid-template-columns:1fr!important;
  }
}

/* ============================================================
   v2.7.130 · QuantificationCard Mobile Balance Authority
   DS-2026-003
   1–3 KPI cards remain visible in-grid and share the same block size.
   Content never decides card height; >3 collections keep the canonical rail
   rule, while Dashboard retains its certified 2x2-by-4 exception.
   ============================================================ */
:root{
  --quantification-mobile-block-size:164px;
}
.quantification-collection{
  align-items:stretch;
}
.quantification-collection > .quantification-card{
  align-self:stretch;
}
@media(max-width:860px){
  .quantification-collection:not(.is-mobile-card-rail){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:var(--quantification-mobile-block-size)!important;
    gap:var(--card-collection-gap,12px)!important;
  }
  .quantification-collection:not(.is-mobile-card-rail) > .quantification-card{
    height:var(--quantification-mobile-block-size)!important;
    min-height:var(--quantification-mobile-block-size)!important;
    max-height:var(--quantification-mobile-block-size)!important;
    grid-column:auto!important;
    margin:0!important;
    overflow:hidden;
  }
  .timeoff-stats.quantification-collection{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .timeoff-stats.quantification-collection > .quantification-card{
    padding:16px!important;
  }
}
@media(max-width:390px){
  :root{
    --quantification-mobile-block-size:160px;
  }
  .timeoff-stats.quantification-collection > .quantification-card{
    padding:14px!important;
  }
}


/* ========================================================================
   v2.7.132 · Canonical Popup Centering + Close Control Authority
   Popup/dialog geometry belongs to Design System Authority. Mobile does not
   bottom-anchor standard dialogs: the surface remains centered in the visual
   viewport and owns its internal scroll when content exceeds the safe area.
   ======================================================================== */
:where(.modal-card,.app-modal-dialog,.global-create-panel){
  position:relative;
}

/* Canonical close control: one geometry and one surface for popup dialogs. */
:where(
  .canonical-close-control,
  .modal-card > .modal-close-clean,
  .modal-header > .icon-btn[data-cerrar-modal],
  .modal-header > [data-close-company-modal],
  .modal-header > [data-close-company-create],
  .app-modal-header > [data-cerrar-modal],
  .global-create-header > [data-close-global-create]
){
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:var(--radius-control)!important;
  background:var(--surface-soft)!important;
  color:var(--text-main)!important;
  box-shadow:var(--shadow-xs)!important;
  line-height:1!important;
}
:where(
  .canonical-close-control,
  .modal-card > .modal-close-clean,
  .modal-header > .icon-btn[data-cerrar-modal],
  .modal-header > [data-close-company-modal],
  .modal-header > [data-close-company-create],
  .app-modal-header > [data-cerrar-modal],
  .global-create-header > [data-close-global-create]
) > svg{
  width:18px!important;
  height:18px!important;
  stroke-width:2!important;
}
@media(hover:hover){
  :where(
    .modal-card > .modal-close-clean,
    .modal-header > .icon-btn[data-cerrar-modal],
    .modal-header > [data-close-company-modal],
    .modal-header > [data-close-company-create],
    .app-modal-header > [data-cerrar-modal],
    .global-create-header > [data-close-global-create]
  ):hover{
    background:color-mix(in srgb,var(--text-main) 8%,var(--surface-soft))!important;
    color:var(--text-main)!important;
  }
}

/* v2.7.135 · Canonical Close Control Subtle Elevation
   Close controls are interactive floating controls. They keep the same 44px
   geometry and neutral surface, with only the minimum tokenized elevation
   required to remain discoverable on light modal surfaces. */
/* Legacy direct-child close controls are placed in the canonical corner. */
.modal-card > .modal-close-clean{
  position:absolute!important;
  inset-block-start:24px!important;
  inset-inline-end:24px!important;
  z-index:6!important;
  float:none!important;
}

@media(max-width:860px){
  /* Standard RHMotionModal/AppModal surfaces are centered, never bottom sheets. */
  .modal-overlay,
  .app-modal{
    align-items:center!important;
    justify-content:center!important;
    padding:
      max(12px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
  }
  .modal-overlay > :where(.modal-card,[role="dialog"]),
  .app-modal > .app-modal-dialog{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))!important;
    margin:auto!important;
  }

  /* Global Create is also a popup dialog; center it in the visual viewport. */
  .global-create-panel{
    left:50%!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    width:min(520px,calc(100vw - 36px))!important;
    max-height:calc(100dvh - max(36px,env(safe-area-inset-top)) - max(36px,env(safe-area-inset-bottom)))!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
  }
  .global-create-panel.is-dragging{
    transform:translate(-50%,calc(-50% + var(--sheet-drag-y,0px)))!important;
  }
  .modal-card > .modal-close-clean{
    inset-block-start:22px!important;
    inset-inline-end:22px!important;
  }
}


/* ========================================================================
   v2.7.133 · Mobile Popup Reachability + Sticky Action Clearance Authority
   DS-2026-006 — Runtime evidence showed Global Create inheriting relative
   positioning from the generic popup rule, which offsets an absolutely
   addressed floating panel outside the viewport. Standard modal action rows
   remain sticky, but the scroll owner reserves clearance so fields/help text
   can always scroll fully above the actions.
   ======================================================================== */
@media (max-width:860px){
  /* Global Create is a viewport-addressed floating dialog, not a relative box. */
  .global-create-panel{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
    width:min(520px,calc(100vw - 36px))!important;
    max-width:calc(100vw - 36px)!important;
    max-height:calc(100dvh - max(36px,env(safe-area-inset-top)) - max(36px,env(safe-area-inset-bottom)))!important;
    margin:0!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
  }
  .global-create-panel.is-dragging{
    transform:translate(-50%,calc(-50% + var(--sheet-drag-y,0px)))!important;
  }

  /* Action rows remain in normal document flow at the end of the form.
     They never float above fields and paint no independent footer surface. */
  .modal-card .modal-actions,
  .app-modal .app-modal-footer{
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    width:100%!important;
    min-height:0!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:var(--space-3,12px)!important;
    margin-top:var(--space-5,20px)!important;
    margin-bottom:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .modal-card .modal-actions > :is(.btn,button,a),
  .app-modal .app-modal-footer > :is(.btn,button,a){
    flex:1 1 0!important;
    min-width:0!important;
    min-height:48px!important;
  }
}


/* ========================================================================
   v2.7.134 · Global Create State-Specific Centering Authority
   DS-2026-007 — Root-cause correction. Legacy motion rules in app.css use
   the higher-specificity selector `.global-create-sheet.is-open
   .global-create-panel` with !important. The previous canonical centering
   selector targeted only `.global-create-panel`, so the open-state transform
   won the cascade and removed translateX(-50%), leaving the dialog anchored
   from the viewport midpoint and therefore half off-screen. The authority now
   owns the same state selector (and drag state) so canonical geometry wins
   without disabling the approved motion timing.
   ======================================================================== */
@media (max-width:860px){
  .global-create-sheet .global-create-panel{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    width:min(520px,calc(100vw - 36px))!important;
    max-width:calc(100vw - 36px)!important;
    max-height:calc(100dvh - max(36px,env(safe-area-inset-top)) - max(36px,env(safe-area-inset-bottom)))!important;
    margin:0!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    transform:translate(-50%,-50%)!important;
  }
  .global-create-sheet.is-open .global-create-panel{
    transform:translate(-50%,-50%) scale(1)!important;
  }
  .global-create-sheet .global-create-panel.is-dragging,
  .global-create-sheet.is-open .global-create-panel.is-dragging{
    transform:translate(-50%,calc(-50% + var(--sheet-drag-y,0px))) scale(1)!important;
  }
}


/* ========================================================================
   v2.7.136 · Floating Surface Canonical Close Control Authority
   DS-2026-009 — Profile/account and Activity Center are GlassFloatingSurface
   families, not parallel popup systems. Their explicit dismiss controls use
   the exact canonical Close Control contract on desktop and mobile.
   ======================================================================== */
:where(.activity-center-close,.mobile-account-close,.desktop-account-close){
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:var(--radius-control)!important;
  background:var(--surface-soft)!important;
  color:var(--text-main)!important;
  box-shadow:var(--shadow-xs)!important;
  line-height:1!important;
  flex:0 0 44px!important;
  cursor:pointer;
}
:where(.activity-center-close,.mobile-account-close,.desktop-account-close) > svg{
  width:18px!important;
  height:18px!important;
  stroke-width:2!important;
}
:where(.activity-center-close,.mobile-account-close,.desktop-account-close):focus-visible{
  outline:2px solid var(--brand-primary)!important;
  outline-offset:2px!important;
  box-shadow:var(--shadow-xs),0 0 0 4px var(--brand-focus-ring)!important;
}
@media(hover:hover){
  :where(.activity-center-close,.mobile-account-close,.desktop-account-close):hover{
    background:color-mix(in srgb,var(--text-main) 8%,var(--surface-soft))!important;
  }
}

/* Activity Center header uses the same action cluster in both shells. */
.activity-center .activity-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}

/* Desktop account panel gains an explicit, keyboard-reachable dismiss action. */
@media(min-width:861px){
  .desktop-account-panel{
    position:absolute;
    padding-top:58px!important;
  }
  .desktop-account-close{
    position:absolute!important;
    inset-block-start:10px!important;
    inset-inline-end:10px!important;
    z-index:4!important;
  }
}

/* Mobile account/activity surfaces reuse the control without legacy 38px geometry. */
@media(max-width:860px){
  .mobile-account-close,
  .activity-center-close{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
  }
}


/* ========================================================================
   v2.7.137 · Mobile Modal Integrated Action Row Authority
   DS-2026-010 — Mobile modal actions are part of the form flow, not a
   floating/sticky layer. The action row sits at the end of the scrollable
   content, spans the modal width with balanced controls, and never obscures
   fields, helper text or native date controls. No pill, fade or footer pleca.
   ======================================================================== */
@media(max-width:860px){
  .modal-card .modal-actions,
  .app-modal .app-modal-footer{
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    width:100%!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:var(--space-3,12px)!important;
    margin-top:var(--space-5,20px)!important;
    margin-bottom:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .modal-card .modal-actions > :is(.btn,button,a),
  .app-modal .app-modal-footer > :is(.btn,button,a){
    flex:1 1 0!important;
    min-width:0!important;
    min-height:48px!important;
  }
  .modal-card > form{
    padding-bottom:0!important;
    scroll-padding-bottom:0!important;
  }
}



/* ========================================================================
   v2.7.138 · Canonical Modal Action Flow Root Consolidation Authority
   DS-2026-011 — Canonical modal action placement is enforced globally and
   legacy module styles are forbidden from restoring sticky/floating action
   rows. Actions remain the final in-flow row of their form; AppModal footer
   subgroups keep the same geometry. Carga masiva also adopts the canonical
   close control/icon contract.
   ======================================================================== */
@media(max-width:860px){
  :where(.modal-card,.app-modal-dialog) :where(.modal-actions,.app-modal-footer){
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    width:100%!important;
    margin-top:var(--space-5,20px)!important;
    margin-bottom:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  :where(.modal-card,.app-modal-dialog) :where(.modal-actions,.app-modal-footer-actions){
    display:flex!important;
    align-items:stretch!important;
    gap:var(--space-3,12px)!important;
  }
  :where(.modal-card,.app-modal-dialog) :where(.modal-actions,.app-modal-footer-actions) > :is(.btn,button,a){
    flex:1 1 0!important;
    min-width:0!important;
    min-height:48px!important;
  }
  .app-modal .app-modal-footer{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .app-modal .app-modal-footer > .btn{
    width:100%!important;
  }
  .app-modal .app-modal-footer-actions{
    width:100%!important;
    margin-left:0!important;
  }
}


/* ========================================================================
   v2.7.139 · Canonical Modal Action Label Centering
   DS-2026-012 — Action labels are centered on both axes regardless of legacy
   button content alignment. Geometry and normal-flow placement are unchanged.
   ======================================================================== */
@media(max-width:860px){
  :where(.modal-card,.app-modal-dialog) :where(.modal-actions,.app-modal-footer-actions) > :is(.btn,button,a){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
}


/* DS-2026-014 · BiometricCaptureSurface Authority
   Canonical capture geometry + state motion. Modules provide data/content only. */
.biometric-enrollment-grid{align-items:start}
.biometric-camera-shell{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/3;max-height:520px;background:var(--surface-subtle);border-radius:var(--radius-lg);margin-top:var(--space-4)}
.biometric-camera-shell video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.biometric-face-guide{position:absolute;inset:12% 24%;border:0;border-radius:48% 48% 44% 44%;opacity:1;pointer-events:none;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 48%,transparent);transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,opacity .3s ease}
.biometric-face-guide::before,.biometric-face-guide::after{content:"";position:absolute;inset:-10px;border-radius:inherit;pointer-events:none}
.biometric-face-guide::before{border:3px solid color-mix(in srgb,var(--color-primario) 72%,transparent);clip-path:inset(0 50% 50% 0);animation:bioHaloBreath 2.2s ease-in-out infinite}
.biometric-face-guide::after{inset:-18px;border:1px solid color-mix(in srgb,var(--color-primario) 20%,transparent);opacity:.65}
.biometric-camera-shell[data-biometric-state="challenge_left"] .biometric-face-guide{transform:perspective(500px) rotateY(-10deg) translateX(-4%)}
.biometric-camera-shell[data-biometric-state="challenge_right"] .biometric-face-guide{transform:perspective(500px) rotateY(10deg) translateX(4%)}
.biometric-camera-shell[data-biometric-state="processing"] .biometric-face-guide::before{clip-path:none;animation:bioHaloScan 1.1s linear infinite}
.biometric-camera-shell[data-biometric-state="success"] .biometric-face-guide{transform:scale(.96);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 72%,transparent),0 0 42px color-mix(in srgb,var(--success) 20%,transparent)}
.biometric-camera-shell[data-biometric-state="retry"] .biometric-face-guide{opacity:.62}
.biometric-camera-status{position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);padding:10px 14px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-main) 76%,transparent);color:var(--surface-card);text-align:center;backdrop-filter:blur(10px);transition:transform .25s ease,opacity .25s ease}
.biometric-consent{display:flex;gap:var(--space-3);align-items:flex-start;margin-top:var(--space-4);line-height:1.5}
.biometric-consent input{margin-top:4px}
.biometric-guidance-list{display:grid;gap:var(--space-3)}
.biometric-motion-progress{position:absolute;top:var(--space-4);left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.biometric-motion-progress i{display:block;width:7px;height:7px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface-card) 34%,transparent);transition:transform .25s ease,background .25s ease}
.biometric-motion-progress i.is-done{background:color-mix(in srgb,var(--surface-card) 95%,transparent);transform:scale(1.18)}
.biometric-diagnostic-video{width:100%;max-height:360px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);background:var(--text-main)}
.biometric-diagnostic-video--compact{width:min(100%,420px);display:none}
@keyframes bioHaloBreath{0%,100%{transform:scale(.985);opacity:.58}50%{transform:scale(1.025);opacity:1}}
@keyframes bioHaloScan{to{transform:rotate(360deg)}}
@media (max-width:860px){.biometric-enrollment-grid{grid-template-columns:1fr}.biometric-camera-shell{aspect-ratio:3/4}.biometric-face-guide{inset:16% 15%}}
@media (prefers-reduced-motion:reduce){.biometric-face-guide,.biometric-face-guide::before,.biometric-camera-status,.biometric-motion-progress i{animation:none!important;transition:none!important}}

/* ========================================================================== 
   FileViewerSurface Authority · DS-2026-015
   Secure, global preview surface for private uploaded documents.
   Modules own file data and authorization; Design System owns geometry,
   hierarchy, controls, responsive behavior and accessible interaction.
   ========================================================================== */
.file-viewer-modal{z-index:1400}
.file-viewer-surface{width:min(1440px,calc(100vw - 40px));height:min(92vh,980px);max-width:none;display:flex;flex-direction:column;padding:0;overflow:hidden}
.file-viewer-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--line-soft);background:var(--surface-card);flex:0 0 auto}
.file-viewer-identity{display:flex;align-items:center;gap:var(--space-3);min-width:0;flex:1}
.file-viewer-type{display:inline-flex;align-items:center;gap:var(--space-2);min-height:32px;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--surface-subtle);color:var(--text-muted);font-size:.78rem;font-weight:700;white-space:nowrap}
.file-viewer-heading{min-width:0}.file-viewer-heading h2{margin:0;max-width:min(720px,50vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem}.file-viewer-heading p{margin:3px 0 0;color:var(--text-muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-viewer-actions{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto}
.file-viewer-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0;flex:1;background:var(--surface-subtle)}
.file-viewer-stage-wrap{display:flex;flex-direction:column;min-width:0;min-height:0}
.file-viewer-toolbar{display:flex;align-items:center;gap:var(--space-1);min-height:52px;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line-soft);background:var(--surface-card)}
.file-viewer-tool{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:38px;height:38px;padding:0 var(--space-2);border:0;border-radius:var(--radius-md);background:transparent;color:var(--text-muted);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.file-viewer-tool:hover:not(:disabled){background:var(--surface-subtle);color:var(--text-main)}.file-viewer-tool:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}.file-viewer-tool:disabled{opacity:.35;cursor:not-allowed}
.file-viewer-zoom{min-width:64px;text-align:center;color:var(--text-muted);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}.file-viewer-toolbar-separator{width:1px;height:22px;background:var(--line-soft);margin:0 var(--space-1)}.file-viewer-toolbar-spacer{flex:1}
.file-viewer-stage{position:relative;display:grid;place-items:center;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;background:var(--surface-subtle)}
.file-viewer-loading{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-6);text-align:center;color:var(--text-muted)}.file-viewer-loading strong{color:var(--text-main)}.file-viewer-loading span{font-size:.84rem}
.file-viewer-image-canvas{display:grid;place-items:center;min-width:100%;min-height:100%;padding:var(--space-5);overflow:auto}.file-viewer-image-canvas img{display:block;max-width:none;max-height:none;transform:rotate(var(--file-viewer-rotation,0deg)) scale(var(--file-viewer-scale,1));transform-origin:center;transition:transform .18s ease}.file-viewer-image-canvas.is-fit img{max-width:100%;max-height:calc(92vh - 180px);object-fit:contain}
.file-viewer-stage>iframe{width:100%;height:100%;min-height:520px;border:0;background:var(--surface-card)}
.file-viewer-unsupported{max-width:480px;margin:auto}
.file-viewer-details{min-width:0;padding:var(--space-5);overflow:auto;border-left:1px solid var(--line-soft);background:var(--surface-card);transition:margin .2s ease,opacity .16s ease}
.file-viewer-details-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-5)}.file-viewer-details-head h3{margin:2px 0 0}.file-viewer-details-close{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:var(--radius-md);background:var(--surface-subtle);color:var(--text-muted);cursor:pointer}.file-viewer-details-close:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
.file-viewer-details-list{display:grid;gap:0;margin:0}.file-viewer-details-list>div{display:grid;gap:4px;padding:var(--space-3) 0;border-bottom:1px solid var(--line-soft)}.file-viewer-details-list dt{color:var(--text-muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.file-viewer-details-list dd{margin:0;color:var(--text-main);font-size:.86rem;overflow-wrap:anywhere}.file-viewer-security-note{margin-top:var(--space-5)}
.file-viewer-details-hidden .file-viewer-workspace{grid-template-columns:minmax(0,1fr) 0}.file-viewer-details-hidden .file-viewer-details{opacity:0;pointer-events:none;padding-left:0;padding-right:0;overflow:hidden}.file-viewer-details-hidden .file-viewer-info-toggle{background:var(--surface-subtle);color:var(--text-main)}
.file-viewer-loading[hidden],.file-viewer-image-canvas[hidden],.file-viewer-stage>iframe[hidden],.file-viewer-unsupported[hidden]{display:none!important}

@media(max-width:860px){
  .file-viewer-modal{padding:0;align-items:stretch}.file-viewer-surface{width:100%;height:100dvh;max-height:none;border-radius:0}
  .file-viewer-header{padding:var(--space-3);align-items:flex-start}.file-viewer-type{display:none}.file-viewer-heading h2{max-width:52vw;font-size:.96rem}.file-viewer-actions .btn span{display:none}.file-viewer-actions .btn{width:40px;min-width:40px;padding:0;justify-content:center}
  .file-viewer-workspace{grid-template-columns:minmax(0,1fr)}.file-viewer-details{position:absolute;z-index:2;inset:0 0 0 auto;width:min(320px,88vw);border-left:1px solid var(--line-soft);box-shadow:var(--shadow-lg)}.file-viewer-details-hidden .file-viewer-workspace{grid-template-columns:minmax(0,1fr)}.file-viewer-details-hidden .file-viewer-details{transform:translateX(100%);opacity:0;padding:var(--space-5)}
  .file-viewer-fit span,.file-viewer-info-toggle span{display:none}.file-viewer-toolbar{min-height:50px}.file-viewer-stage>iframe{min-height:0;height:100%}.file-viewer-image-canvas{padding:var(--space-3)}
}
@media(max-width:390px){.file-viewer-heading p{display:none}.file-viewer-heading h2{max-width:44vw}.file-viewer-zoom{min-width:54px}.file-viewer-toolbar{padding-inline:var(--space-2)}}
@media(prefers-reduced-motion:reduce){.file-viewer-image-canvas img,.file-viewer-details{transition:none}}

/* ============================================================
   DS-2026-016 · Role Capability Browser Authority
   Progressive disclosure for large RBAC catalogs. Modules provide
   permission data only; geometry and interaction surface live here.
   ============================================================ */
.role-capability-browser{
  display:grid;
  gap:var(--ui-gap-sm,10px);
  margin-top:var(--ui-gap-sm,10px);
}
.role-capability-search{
  min-height:44px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--ui-gap-xs,8px);
  padding-inline:var(--ui-space-md,12px);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  color:var(--text-muted);
}
.role-capability-search:focus-within{
  border-color:color-mix(in srgb,var(--color-primario) 38%,var(--line-soft));
  box-shadow:0 0 0 3px var(--focus-ring);
}
.role-capability-search input{
  min-width:0;
  min-height:42px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.role-capability-search input:focus{box-shadow:none;}
.role-capability-groups{display:grid;gap:var(--ui-gap-xs,8px);}
.role-capability-group{
  overflow:hidden;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
}
.role-capability-group[hidden]{display:none;}
.role-capability-group-head{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ui-gap-sm,10px);
  padding:var(--ui-space-sm,10px) var(--ui-space-md,12px);
}
.role-capability-group-head>div{display:grid;gap:2px;min-width:0;}
.role-capability-group-head strong{font-size:var(--type-body,.84rem);color:var(--text-main);}
.role-capability-group-head small{font-size:var(--type-caption,.68rem);color:var(--text-muted);}
.role-capability-more{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 10px;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--color-primario);
  font:inherit;
  font-size:var(--type-caption,.72rem);
  font-weight:700;
  cursor:pointer;
}
.role-capability-more:hover{background:var(--interactive-hover);}
.role-capability-more:focus-visible{outline:0;box-shadow:0 0 0 3px var(--focus-ring);}
.role-capability-more svg{transition:transform .18s ease;}
.role-capability-group.is-expanded .role-capability-more svg{transform:rotate(180deg);}
.role-capability-list{border-top:1px solid var(--line-soft);}
.role-capability-row[hidden]{display:none!important;}
.role-capability-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.role-capability-risk{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:1px 7px;
  border-radius:var(--radius-pill);
  font-style:normal;
  font-size:.62rem;
  font-weight:700;
  line-height:1;
}
.role-capability-risk.is-administrative{background:var(--semantic-info-soft);color:var(--semantic-info);}
.role-capability-risk.is-sensitive{background:var(--semantic-warning-soft);color:var(--semantic-warning);}
.role-capability-risk.is-critical{background:var(--semantic-danger-soft);color:var(--semantic-danger);}
.role-capability-empty{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--ui-gap-sm,10px);
  padding:var(--ui-space-lg,16px);
  text-align:left;
  color:var(--text-muted);
}
.role-capability-empty[hidden]{display:none;}
.role-capability-empty span{display:grid;gap:2px;}
.role-capability-empty strong{color:var(--text-main);font-size:var(--type-body,.82rem);}
.role-capability-empty small{font-size:var(--type-caption,.7rem);}
.role-capability-browser.is-compact .role-capability-group-head{min-height:52px;}
@media(max-width:767px){
  .role-capability-group-head{align-items:flex-start;flex-direction:column;}
  .role-capability-more{margin-left:-10px;}
}
@media(prefers-reduced-motion:reduce){.role-capability-more svg{transition:none;}}

/* ========================================================================== 
   DS-2026-017 · ExpedienteProfileHero Authority
   Perfil operativo de colaborador: identidad → estado → acciones. El módulo
   aporta datos/permisos; Design System gobierna geometría y responsive.
   ========================================================================== */
.ui-expediente-profile-hero{
  display:grid;
  grid-template-columns:minmax(360px,1.45fr) minmax(240px,.72fr) minmax(360px,1fr);
  align-items:center;
  gap:var(--space-6);
  min-height:188px;
  padding:var(--space-6)!important;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-xl);
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}
.ui-expediente-profile-hero .expediente-hero-identity{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  min-width:0;
}
.ui-expediente-profile-hero .expediente-hero-avatar{
  width:88px;
  height:88px;
  border-radius:var(--radius-xl);
  background:color-mix(in srgb,var(--color-primario) 6%,var(--surface-card));
  border:1px solid var(--border-subtle,var(--line-soft));
  color:var(--color-primario);
  font-size:1.45rem;
}
.ui-expediente-profile-hero .expediente-hero-copy{
  display:grid;
  gap:4px;
  min-width:0;
}
.ui-expediente-profile-hero .expediente-hero-eyebrow{
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.ui-expediente-profile-hero .expediente-hero-copy h1{
  margin:0;
  color:var(--text-main);
  font-size:clamp(1.35rem,1.8vw,1.9rem);
  line-height:1.12;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.ui-expediente-profile-hero .expediente-hero-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.4;
}
.ui-expediente-profile-hero .expediente-hero-meta span{
  display:inline-flex;
  align-items:center;
}
.ui-expediente-profile-hero .expediente-hero-meta span+span::before{
  content:"";
  width:1px;
  height:14px;
  margin-inline:12px;
  background:var(--border-subtle,var(--line-soft));
}
.ui-expediente-profile-hero .expediente-hero-status{
  display:grid;
  align-content:center;
  gap:var(--space-3);
  min-width:0;
  padding-inline:var(--space-5);
  border-inline:1px solid var(--border-subtle,var(--line-soft));
}
.ui-expediente-profile-hero .expediente-hero-status-pills{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.ui-expediente-profile-hero .expediente-hero-status-pills .badge{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding-inline:12px;
  border-radius:var(--radius-pill);
}
.ui-expediente-profile-hero .expediente-hero-validation{
  min-height:62px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:0;
  border-radius:var(--radius-lg);
  background:var(--surface-subtle,var(--surface-card));
  color:var(--text-main);
  text-decoration:none;
  transition:background-color .18s ease,transform .18s ease;
}
.ui-expediente-profile-hero .expediente-hero-validation:hover{
  background:var(--interactive-hover);
  transform:translateY(-1px);
}
.ui-expediente-profile-hero .expediente-hero-validation:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--focus-ring);
}
.ui-expediente-profile-hero .expediente-hero-validation-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  color:var(--text-main);
}
.ui-expediente-profile-hero .expediente-hero-validation span:nth-child(2){
  display:grid;
  gap:2px;
}
.ui-expediente-profile-hero .expediente-hero-validation strong{
  font-size:var(--type-body,.84rem);
  line-height:1.25;
}
.ui-expediente-profile-hero .expediente-hero-validation small{
  color:var(--text-muted);
  font-size:var(--type-caption,.68rem);
}
.ui-expediente-profile-hero .expediente-hero-operations{
  display:grid;
  gap:var(--space-3);
  min-width:0;
}
.ui-expediente-profile-hero .expediente-hero-photo-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.ui-expediente-profile-hero .expediente-hero-photo-actions form,
.ui-expediente-profile-hero .expediente-hero-secondary-actions form,
.ui-expediente-profile-hero .expediente-hero-decision-actions form{
  margin:0;
}
.ui-expediente-profile-hero .expediente-hero-action-grid{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(150px,.72fr);
  gap:10px;
  align-items:stretch;
}
.ui-expediente-profile-hero :is(.expediente-hero-secondary-actions,.expediente-hero-decision-actions){
  display:grid;
  gap:8px;
}
.ui-expediente-profile-hero :is(.expediente-hero-secondary-actions,.expediente-hero-decision-actions) :is(.btn,form>.btn){
  width:100%;
  min-height:42px;
  justify-content:center;
}
.ui-expediente-profile-hero .expediente-photo-remove span{display:inline;}

@media(max-width:1120px){
  .ui-expediente-profile-hero{
    grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);
  }
  .ui-expediente-profile-hero .expediente-hero-status{
    border-right:0;
    padding-right:0;
  }
  .ui-expediente-profile-hero .expediente-hero-operations{
    grid-column:1 / -1;
    grid-template-columns:auto minmax(0,1fr);
    align-items:end;
    padding-top:var(--space-4);
    border-top:1px solid var(--border-subtle,var(--line-soft));
  }
  .ui-expediente-profile-hero .expediente-hero-photo-actions{justify-content:flex-start;}
  .ui-expediente-profile-hero .expediente-hero-action-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:767px){
  .ui-expediente-profile-hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    min-height:0!important;
    gap:var(--space-4)!important;
    padding:14px!important;
    border-radius:var(--radius-xl);
  }
  .ui-expediente-profile-hero .expediente-hero-identity{
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    align-items:center;
    gap:10px!important;
  }
  .ui-expediente-profile-hero .expediente-hero-avatar{
    width:52px!important;
    height:52px!important;
    border-radius:var(--radius-lg)!important;
    font-size:1.05rem;
  }
  .ui-expediente-profile-hero .expediente-hero-copy h1{
    font-size:1.18rem!important;
    line-height:1.16;
  }
  .ui-expediente-profile-hero .expediente-hero-meta{
    margin-top:2px;
    font-size:.68rem;
  }
  .ui-expediente-profile-hero .expediente-hero-meta span+span::before{
    margin-inline:8px;
  }
  .ui-expediente-profile-hero .expediente-hero-status{
    padding:0!important;
    border:0!important;
    gap:10px;
  }
  .ui-expediente-profile-hero .expediente-hero-status-pills{
    order:-1;
  }
  .ui-expediente-profile-hero .expediente-hero-validation{
    width:100%;
    min-height:62px;
  }
  .ui-expediente-profile-hero .expediente-hero-operations{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding-top:0!important;
    border-top:0!important;
  }
  .ui-expediente-profile-hero .expediente-hero-photo-actions{
    grid-row:1;
    justify-content:flex-start;
  }
  .ui-expediente-profile-hero .expediente-hero-photo-form{
    grid-column:auto!important;
  }
  .ui-expediente-profile-hero .expediente-hero-photo-form .btn{
    width:auto!important;
  }
  .ui-expediente-profile-hero .expediente-photo-remove span{display:none;}
  .ui-expediente-profile-hero .expediente-hero-action-grid{
    display:flex!important;
    flex-direction:column;
    gap:10px;
  }
  .ui-expediente-profile-hero .expediente-hero-decision-actions{
    order:1;
    grid-template-columns:1fr;
  }
  .ui-expediente-profile-hero .expediente-hero-secondary-actions{
    order:2;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ui-expediente-profile-hero .expediente-hero-secondary-actions>*:only-child{
    grid-column:1 / -1;
  }
  .ui-expediente-profile-hero .expediente-hero-decision-actions :is(.btn,form>.btn){
    min-height:48px;
  }
  .ui-expediente-profile-hero .expediente-hero-secondary-actions :is(.btn,form>.btn){
    min-height:44px;
    padding-inline:10px;
  }
}

@media(max-width:420px){
  .ui-expediente-profile-hero .expediente-hero-meta{
    display:grid;
    gap:2px;
  }
  .ui-expediente-profile-hero .expediente-hero-meta span+span::before{display:none;}
  .ui-expediente-profile-hero .expediente-hero-secondary-actions{grid-template-columns:1fr;}
}

@media(prefers-reduced-motion:reduce){
  .ui-expediente-profile-hero .expediente-hero-validation{transition:none;}
  .ui-expediente-profile-hero .expediente-hero-validation:hover{transform:none;}
}


/* ==========================================================================
   DS-2026-018 · Expediente Detail Rhythm & Supplemental Form Authority
   Ajuste certificado para el primer producto comercial Altas e identidad:
   fotografía integrada al bloque de identidad, formularios complementarios
   legibles y cadencia vertical consistente entre superficies del expediente.
   ========================================================================== */
.ui-expediente-profile-hero .expediente-hero-avatar-stack{
  width:88px;
  flex:0 0 88px;
  display:grid;
  justify-items:center;
  gap:7px;
}
.ui-expediente-profile-hero .expediente-avatar-controls{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:22px;
}
.ui-expediente-profile-hero .expediente-avatar-controls form{margin:0;}
.ui-expediente-profile-hero .expediente-avatar-change,
.ui-expediente-profile-hero .expediente-avatar-remove{
  min-height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:0;
  background:transparent;
  color:var(--text-muted);
  font:inherit;
  font-size:var(--type-caption,.68rem);
  font-weight:500;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
}
.ui-expediente-profile-hero .expediente-avatar-change:hover,
.ui-expediente-profile-hero .expediente-avatar-remove:hover{color:var(--color-primario);}
.ui-expediente-profile-hero .expediente-avatar-change:focus-visible,
.ui-expediente-profile-hero .expediente-avatar-remove:focus-visible{
  outline:0;
  border-radius:var(--radius-sm);
  box-shadow:0 0 0 3px var(--focus-ring);
}
.ui-expediente-profile-hero .expediente-avatar-remove{
  width:22px;
  padding:0;
}
.ui-expediente-profile-hero .expediente-hero-operations{
  align-content:center;
}
.ui-expediente-profile-hero .expediente-hero-action-grid{align-items:center;}

.employee-rehire-policy-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  align-items:end;
  width:100%;
  padding-bottom:2px;
}
.employee-rehire-policy-form .form-grupo{margin:0;}
.employee-rehire-policy-form .employee-rehire-policy-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-start;
  padding-top:2px;
}
.employee-rehire-policy-form :is(input,select){min-height:48px;}

.expediente-supplement-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-4);
  align-items:stretch;
  width:100%;
}
.employee-record-supplement-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding:var(--space-5);
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-xl);
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}
.employee-record-supplement-header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:12px;
  min-height:54px;
}
.employee-record-supplement-header>.badge{
  grid-column:2;
  justify-self:start;
}
.employee-record-supplement-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));
  color:var(--color-primario);
}
.employee-record-supplement-header h3{
  margin:1px 0 3px;
  color:var(--text-main);
  font-size:var(--type-body,.9rem);
  line-height:1.25;
}
.employee-record-supplement-header p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
  line-height:1.45;
}
.employee-record-supplement-form{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.employee-record-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
}
.employee-record-fields .form-grupo{
  min-width:0;
  margin:0;
}
.employee-record-fields .form-grupo.is-wide{grid-column:1 / -1;}
.employee-record-fields :is(input,select){
  width:100%;
  min-height:50px;
}
.employee-record-supplement-actions{
  display:flex;
  align-items:flex-end;
  margin-top:auto;
  padding-top:2px;
}
.employee-record-supplement-actions .btn{
  min-height:44px;
  justify-content:center;
}

.expediente-grid > .card{
  margin-block-end:var(--space-5)!important;
}
.expediente-grid > .card:last-of-type{margin-block-end:0!important;}

@media(max-width:1120px){
  .expediente-supplement-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .employee-record-supplement-card.is-sensitive{grid-column:1 / -1;}
}
@media(max-width:767px){
  .ui-expediente-profile-hero .expediente-hero-identity{
    grid-template-columns:58px minmax(0,1fr)!important;
    align-items:start;
  }
  .ui-expediente-profile-hero .expediente-hero-avatar-stack{
    width:58px;
    flex-basis:58px;
    gap:5px;
  }
  .ui-expediente-profile-hero .expediente-hero-avatar{
    width:52px!important;
    height:52px!important;
  }
  .ui-expediente-profile-hero .expediente-avatar-controls{
    width:58px;
    flex-wrap:nowrap;
  }
  .ui-expediente-profile-hero .expediente-avatar-change{
    font-size:.62rem;
    white-space:nowrap;
  }
  .ui-expediente-profile-hero .expediente-avatar-change svg{display:none;}
  .employee-rehire-policy-form{grid-template-columns:1fr;}
  .employee-rehire-policy-form .employee-rehire-policy-actions{grid-column:1;}
  .employee-rehire-policy-form .employee-rehire-policy-actions .btn{width:100%;justify-content:center;}
  .expediente-supplement-grid{grid-template-columns:1fr;}
  .employee-record-supplement-card.is-sensitive{grid-column:auto;}
  .employee-record-supplement-card{padding:var(--space-4);}
  .employee-record-fields{grid-template-columns:1fr;}
  .employee-record-fields .form-grupo.is-wide{grid-column:auto;}
  .employee-record-supplement-actions .btn{width:100%;}
  .expediente-grid > .card{margin-block-end:var(--space-4)!important;}
}
@media(max-width:420px){
  .employee-record-supplement-card{padding:14px;}
}


/* DS-2026-019 · EmploymentRelationshipSurface Authority */
.employment-relationship-surface{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
}
.employment-relationship-surface .hrcore-heading{
  margin:0;
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--border-subtle);
}
.employment-relationship-surface .hrcore-heading h2{
  margin-top:var(--space-1);
  margin-bottom:var(--space-1);
  font-size:var(--type-title,1.1rem);
  line-height:1.2;
  color:var(--text-main);
}
.employment-relationship-surface .hrcore-heading p{
  max-width:760px;
  color:var(--text-muted);
}
.employment-state-panel{
  align-items:flex-start;
  padding:var(--space-5);
  gap:var(--space-4);
}
.employment-state-panel .context-info-icon{
  flex:0 0 auto;
}
.employment-state-panel .employee-lifecycle-state-copy{
  width:100%;
  min-width:0;
}
.employment-state-panel .employee-lifecycle-state-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-2);
}
.employment-state-panel .employee-lifecycle-state-title h3{
  margin:0;
}
.employment-state-panel .employee-lifecycle-state-copy>p{
  margin:0;
  color:var(--text-muted);
}
.employment-policy-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-4);
  align-items:end;
}
.employment-policy-form .form-grupo{
  margin:0;
}
.employment-policy-form :is(select,input){
  width:100%;
  min-height:var(--control-height-lg);
}
.employment-policy-form .employee-rehire-policy-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  padding-top:var(--space-1);
}
.employment-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding-top:var(--space-1);
}
.employment-section-heading-main,
.employment-history-heading{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  min-width:0;
}
.employment-section-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));
  color:var(--color-primario);
}
.employment-section-heading h3,
.employment-history-heading h3{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-body);
}
.employment-section-heading p,
.employment-history-heading p{
  margin:var(--space-1) 0 0;
  color:var(--text-muted);
  font-size:var(--type-caption);
}
.employment-section-note{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  flex:0 0 auto;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--color-primario) 6%,var(--surface-card));
  color:var(--text-muted);
  font-size:var(--type-caption);
}
.employment-data-grid{
  gap:var(--space-3)!important;
  margin:0!important;
}
.employment-data-grid>div{
  padding:var(--space-4)!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--radius-lg)!important;
  background:var(--surface-card)!important;
}
.employment-data-grid:not(.employment-data-grid-secondary)>div{
  background:color-mix(in srgb,var(--surface-soft) 80%,var(--surface-card))!important;
}
.employment-data-grid span{
  color:var(--text-muted)!important;
}
.employment-data-grid strong{
  color:var(--text-main)!important;
  font-size:var(--type-body)!important;
}
.employment-history-card{
  min-height:180px;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding:var(--space-4)!important;
}
.employment-history-card>.texto-muted{
  margin:auto 0;
  text-align:center;
  padding:var(--space-5);
}
.employment-history-heading{
  padding-bottom:var(--space-2);
}
.employment-history-heading p{
  line-height:1.45;
}
.employment-organization-panel{
  margin-top:var(--space-1);
  padding:var(--space-4) var(--space-5);
  align-items:center;
  background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-card));
}
.employment-organization-panel>div:last-child{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-1) var(--space-4);
  width:100%;
}
.employment-organization-panel h3,
.employment-organization-panel p{
  grid-column:1;
}
.employment-organization-panel .btn{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
}
[data-theme="dark"] .employment-data-grid>div,
body.dark-mode .employment-data-grid>div{
  background:var(--surface-card)!important;
}
[data-theme="dark"] .employment-section-note,
body.dark-mode .employment-section-note,
[data-theme="dark"] .employment-organization-panel,
body.dark-mode .employment-organization-panel{
  background:color-mix(in srgb,var(--color-primario) 10%,var(--surface-card));
}
@media(max-width:900px){
  .employment-policy-form{grid-template-columns:1fr;}
  .employment-policy-form .employee-rehire-policy-actions{grid-column:1;}
  .employment-section-heading{align-items:flex-start;flex-direction:column;}
  .employment-section-note{align-self:flex-start;}
  .employment-organization-panel>div:last-child{grid-template-columns:1fr;}
  .employment-organization-panel h3,
  .employment-organization-panel p,
  .employment-organization-panel .btn{grid-column:1;grid-row:auto;}
  .employment-organization-panel .btn{justify-self:start;}
}
@media(max-width:560px){
  .employment-relationship-surface{gap:var(--space-4);}
  .employment-state-panel{padding:var(--space-4);}
  .employment-state-panel .employee-lifecycle-state-title{
    align-items:flex-start;
    flex-direction:column;
  }
  .employment-policy-form .employee-rehire-policy-actions .btn{width:100%;}
  .employment-section-note{width:100%;border-radius:var(--radius-lg);}
  .employment-data-grid>div{padding:var(--space-3)!important;}
  .employment-history-card{min-height:0;}
  .employment-organization-panel{padding:var(--space-4);}
  .employment-organization-panel .btn{width:100%;justify-content:center;}
}


/* DS-2026-020 · PersonalProfileHub Authority */
.profile-hub-page{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
}
.profile-hub-heading{margin-bottom:0;}
.profile-hub-nav{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  overflow-x:auto;
  scrollbar-width:none;
  padding:var(--space-1);
}
.profile-hub-nav::-webkit-scrollbar{display:none;}
.profile-hub-nav a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  flex:0 0 auto;
  padding:0 var(--space-3);
  border-radius:var(--radius-lg);
  color:var(--text-muted);
  text-decoration:none;
  font-weight:500;
}
.profile-hub-nav a:hover,
.profile-hub-nav a:focus-visible{
  color:var(--text-main);
  background:var(--surface-soft);
}
.profile-hub-nav a.activo{
  color:var(--color-primario);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));
}
.profile-hub-identity{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-5);
  padding:var(--space-5);
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 30%,color-mix(in srgb,var(--color-primario) 10%,transparent),transparent 28%),
    var(--surface-card);
}
.profile-hub-avatar{
  width:112px;
  height:112px;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:color-mix(in srgb,var(--color-primario) 10%,var(--surface-soft));
  color:var(--color-primario);
  font-size:2rem;
  font-weight:700;
}
.profile-hub-avatar img{width:100%;height:100%;object-fit:cover;}
.profile-hub-identity-copy{min-width:0;}
.profile-hub-identity-copy h2{
  margin:var(--space-1) 0;
  color:var(--text-main);
  font-size:clamp(1.45rem,2.2vw,2rem);
  line-height:1.12;
}
.profile-hub-identity-copy>p{margin:0;color:var(--text-muted);font-size:1rem;}
.profile-hub-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-3);
}
.profile-hub-meta span{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  color:var(--text-muted);
}
.profile-hub-meta strong{color:var(--text-main);font-weight:500;}
.profile-hub-edit{align-self:start;}
.profile-hub-section{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.profile-hub-section-header{margin:0;}
.profile-pending-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
}
.profile-pending-card,
.profile-access-card{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  color:var(--text-main);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.profile-pending-card:hover,
.profile-access-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--color-primario) 24%,var(--border-subtle));
  box-shadow:var(--shadow-sm);
}
.profile-pending-card:focus-visible,
.profile-access-card:focus-visible{
  outline:2px solid var(--color-primario);
  outline-offset:2px;
}
.profile-pending-icon,
.profile-access-icon,
.profile-help-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:var(--radius-lg);
  color:var(--color-primario);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-soft));
}
.profile-pending-copy,
.profile-access-card>span:nth-child(2){
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1;
}
.profile-pending-copy small,
.profile-access-card small{margin-top:2px;color:var(--text-muted);}
.profile-pending-copy em{margin-top:var(--space-2);color:var(--text-muted);font-size:.78rem;font-style:normal;}
.profile-access-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3);
}
.profile-access-card>svg,
.profile-pending-card>svg{margin-left:auto;flex:0 0 auto;color:var(--text-muted);}
.profile-account-only-note{margin:0;}
.profile-hub-account-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-4);
  scroll-margin-top:var(--space-5);
}
.profile-account-card,
.profile-hub-account-grid .profile-security-card{
  padding:var(--space-5);
  min-width:0;
}
.profile-help-surface{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4);
  border-radius:var(--radius-xl);
  background:color-mix(in srgb,var(--color-primario) 6%,var(--surface-card));
}
.profile-help-surface strong{color:var(--text-main);}
.profile-help-surface p{margin:2px 0 0;color:var(--text-muted);}
.account-profile-primary{
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card))!important;
}
.account-profile-primary>svg:last-child{margin-left:auto;}
@media(max-width:1100px){
  .profile-access-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .profile-hub-account-grid{grid-template-columns:1fr;}
}
@media(max-width:767px){
  .profile-hub-page{gap:var(--space-4);}
  .profile-hub-nav{
    margin-inline:calc(var(--space-3) * -1);
    padding-inline:var(--space-3);
    scroll-snap-type:x proximity;
  }
  .profile-hub-nav a{scroll-snap-align:start;}
  .profile-hub-identity{
    grid-template-columns:auto minmax(0,1fr);
    gap:var(--space-3);
    padding:var(--space-4);
  }
  .profile-hub-avatar{width:76px;height:76px;font-size:1.45rem;}
  .profile-hub-edit{grid-column:1 / -1;width:100%;justify-content:center;}
  .profile-hub-meta{gap:var(--space-2);}
  .profile-hub-meta span{width:100%;}
  .profile-pending-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:var(--space-3);
    padding-bottom:var(--space-2);
  }
  .profile-pending-card{min-width:min(82vw,330px);scroll-snap-align:start;}
  .profile-access-grid{grid-template-columns:1fr;}
  .profile-account-card,
  .profile-hub-account-grid .profile-security-card{padding:var(--space-4);}
  .profile-help-surface{grid-template-columns:auto minmax(0,1fr);}
  .profile-help-surface .btn{grid-column:1 / -1;width:100%;justify-content:center;}
}
@media(max-width:420px){
  .profile-hub-identity{grid-template-columns:1fr;text-align:left;}
  .profile-hub-avatar{width:68px;height:68px;}
  .profile-hub-edit{grid-column:1;}
}


/* DS-2026-021 · PersonalProfileDetailSurface Authority */
.profile-detail-surface{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.profile-detail-header{
  margin:0;
  align-items:flex-start;
}
.profile-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
}
.profile-detail-card{
  min-width:0;
  padding:var(--space-5);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}
.profile-detail-card.is-sensitive{
  background:color-mix(in srgb,var(--semantic-info) 4%,var(--surface-card));
}
.profile-detail-card-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.profile-detail-card-head h3{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-body,.9rem);
}
.profile-detail-card-head p{
  margin:3px 0 0;
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
  line-height:1.45;
}
.profile-detail-card-head>a{
  align-self:center;
  color:var(--color-primario);
  font-size:var(--type-caption,.72rem);
  font-weight:500;
  text-decoration:none;
}
.profile-detail-card-head>a:hover,
.profile-detail-card-head>a:focus-visible{
  text-decoration:underline;
  text-underline-offset:3px;
}
.profile-detail-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-soft));
  color:var(--color-primario);
}
.profile-detail-list{
  display:flex;
  flex-direction:column;
  margin:0;
}
.profile-detail-list>div{
  display:grid;
  grid-template-columns:minmax(120px,.85fr) minmax(0,1.15fr);
  gap:var(--space-3);
  align-items:start;
  padding:12px 0;
  border-top:1px solid var(--border-subtle);
}
.profile-detail-list>div:first-child{border-top:0;}
.profile-detail-list dt{
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
}
.profile-detail-list dd{
  margin:0;
  color:var(--text-main);
  font-weight:500;
  overflow-wrap:anywhere;
}
.profile-detail-card>.btn{
  margin-top:var(--space-3);
}
.profile-work-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3);
}
.profile-work-metric{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:2px var(--space-3);
  align-items:center;
  padding:var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
}
.profile-work-metric>span{
  grid-row:1 / span 2;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-lg);
  color:var(--color-primario);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-soft));
}
.profile-work-metric small{
  color:var(--text-muted);
}
.profile-work-metric strong{
  color:var(--text-main);
  font-size:var(--type-body,.9rem);
  overflow-wrap:anywhere;
}
.profile-work-governance-note{margin:0;}
.is-preferred-request{
  border-color:color-mix(in srgb,var(--color-primario) 30%,var(--border-subtle))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primario) 8%,transparent);
}
[data-theme="dark"] .profile-detail-card.is-sensitive,
body.dark-mode .profile-detail-card.is-sensitive{
  background:color-mix(in srgb,var(--semantic-info) 8%,var(--surface-card));
}
@media(max-width:980px){
  .profile-detail-grid{grid-template-columns:1fr;}
  .profile-work-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .profile-detail-surface{gap:var(--space-3);}
  .profile-detail-card{padding:var(--space-4);}
  .profile-detail-card-head{
    grid-template-columns:auto minmax(0,1fr);
  }
  .profile-detail-card-head>a,
  .profile-detail-card-head>.status-pill{
    grid-column:2;
    justify-self:start;
  }
  .profile-detail-list>div{
    grid-template-columns:1fr;
    gap:4px;
    padding:10px 0;
  }
  .profile-work-summary-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:420px){
  .profile-work-summary-grid{grid-template-columns:1fr;}
}


/* DS-2026-022 · IdentitySourcePill Authority */
.identity-captured-card{
  overflow:hidden;
}
.identity-captured-header{
  align-items:flex-start;
}
.identity-inline-verification-table td{
  vertical-align:middle;
}
.identity-official-value{
  color:var(--text-main);
  font-weight:500;
}
.identity-inline-sources{
  width:1%;
  white-space:nowrap;
}
.identity-source-pills{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.identity-source-pill{
  display:inline-flex;
}
.identity-source-pill .status-pill{
  min-height:26px;
  padding-inline:10px;
}
.identity-comparison-trigger{
  width:30px;
  height:30px;
  margin-left:var(--space-2);
  display:inline-grid;
  place-items:center;
  vertical-align:middle;
  border:1px solid var(--border-subtle);
  border-radius:50%;
  background:var(--surface-card);
  color:var(--color-primario);
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.identity-comparison-trigger:hover{
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card));
  border-color:color-mix(in srgb,var(--color-primario) 30%,var(--border-subtle));
  transform:translateY(-1px);
}
.identity-comparison-trigger:focus-visible{
  outline:2px solid var(--color-primario);
  outline-offset:2px;
}
.identity-inline-alert{
  margin:var(--space-4);
  margin-top:0;
}
.identity-comparison-modal{
  width:min(920px,calc(100vw - 32px));
}
.identity-comparison-modal .identity-source-table td,
.identity-comparison-modal .identity-source-table th{
  vertical-align:middle;
}
.identity-comparison-modal .app-modal-footer form{
  margin:0;
}
@media(max-width:760px){
  .identity-inline-verification-table tr{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    padding:12px 0;
  }
  .identity-inline-verification-table td{
    width:auto!important;
    padding-block:0;
    border:0;
  }
  .identity-inline-verification-table tr+tr{
    border-top:1px solid var(--border-subtle);
  }
  .identity-inline-sources{
    white-space:normal;
  }
  .identity-comparison-trigger{
    margin-left:4px;
  }
}
@media(max-width:480px){
  .identity-source-pills{
    gap:6px;
  }
  .identity-source-pill .status-pill{
    min-height:24px;
    padding-inline:8px;
  }
}


/* DS-2026-024 · AnalyticsExperience + ChartMotion Authority */
.analytics-section-nav{
  margin-bottom:var(--space-4);
}
.analytics-experience{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  margin-top:var(--space-5);
}
.analytics-experience-header{
  margin:0;
}
.analytics-command-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-3) var(--space-4);
  align-items:end;
}
.analytics-command-bar .report-filter-summary{
  grid-column:1/-1;
}
.analytics-kpi-grid{
  margin:0;
}
.analytics-kpi-card{
  overflow:hidden;
}
.analytics-kpi-card .kpi-card-value{
  transition:opacity .18s ease;
}
.analytics-change-surface{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.analytics-change-header{
  margin:0;
}
.analytics-insight-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3);
}
.analytics-insight-card{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-3);
  align-items:start;
  padding:var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
}
.analytics-insight-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
  color:var(--text-secondary);
}
.analytics-insight-card strong{
  display:block;
  color:var(--text-main);
}
.analytics-insight-card p{
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
  line-height:1.5;
}
.analytics-insight-card em{
  font-style:normal;
  font-weight:700;
  color:var(--text-main);
}
.analytics-insight-card.is-success .analytics-insight-icon{color:var(--semantic-success)}
.analytics-insight-card.is-warning .analytics-insight-icon{color:var(--semantic-warning)}
.analytics-insight-card.is-danger .analytics-insight-icon{color:var(--semantic-danger)}
.analytics-insight-card.is-info .analytics-insight-icon{color:var(--semantic-info)}
.analytics-primary-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(360px,.9fr);
  gap:var(--space-4);
}
.analytics-people-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
}
.analytics-people-grid .analytics-donut-panel{
  grid-column:1/-1;
}
.analytics-chart-panel{
  min-width:0;
  border-radius:var(--radius-xl);
}
.analytics-chart-panel--hero{
  min-height:330px;
}
.analytics-chart-heading{
  align-items:flex-start;
}
.analytics-chart-heading>div{
  min-width:0;
}
.analytics-chart-heading p{
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
  line-height:1.5;
}
.analytics-chart-scroll--wide{
  min-height:230px;
}
.analytics-line-chart,
.analytics-horizontal-bar-chart{
  display:block;
  width:100%;
  min-width:520px;
  height:auto;
  overflow:visible;
}
.analytics-chart-gridline{
  stroke:currentColor;
  stroke-opacity:.08;
  stroke-width:1;
}
.analytics-line-path{
  fill:none;
  stroke:var(--chart-brand-1);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:0;
}
.analytics-line-area{
  fill:var(--chart-brand-1);
  opacity:.18;
}
.analytics-line-point{
  transform-box:fill-box;
  transform-origin:center;
}
.analytics-line-point circle{
  fill:var(--surface-card);
  stroke:var(--chart-brand-1);
  stroke-width:3;
}
.analytics-line-point text{
  fill:currentColor;
  fill-opacity:.62;
  font-size:9px;
}
.analytics-bar-chart [data-chart-bar]{
  transform-box:fill-box;
  transform-origin:center bottom;
}
.analytics-horizontal-bar-chart [data-chart-bar-horizontal]{
  transform-box:fill-box;
  transform-origin:left center;
}
.analytics-horizontal-label{
  fill:currentColor;
  fill-opacity:.72;
  font-size:11px;
}
.analytics-horizontal-count{
  fill:currentColor;
  font-size:11px;
  font-weight:700;
}
.analytics-horizontal-track{
  fill:currentColor;
  fill-opacity:.06;
}
.analytics-horizontal-value{
  fill:var(--chart-brand-1);
}
.analytics-donut-chart [data-chart-donut]{
  transform-box:fill-box;
  transform-origin:center;
}
html[data-theme="dark"] .analytics-insight-card{
  background:var(--surface-card);
}
@media(max-width:980px){
  .analytics-insight-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .analytics-primary-grid{
    grid-template-columns:1fr;
  }
  .analytics-people-grid{
    grid-template-columns:1fr;
  }
  .analytics-people-grid .analytics-donut-panel{
    grid-column:auto;
  }
}
@media(max-width:767px){
  .analytics-section-nav{
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .analytics-section-nav::-webkit-scrollbar{display:none}
  .analytics-section-nav>a{
    flex:0 0 auto;
    scroll-snap-align:start;
  }
  .analytics-command-bar{
    grid-template-columns:1fr;
  }
  .analytics-command-bar .report-filter-summary{
    grid-column:auto;
  }
  .analytics-insight-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:var(--space-3);
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .analytics-insight-grid::-webkit-scrollbar{display:none}
  .analytics-insight-card{
    flex:0 0 min(84vw,320px);
    scroll-snap-align:start;
  }
  .analytics-chart-panel--hero{
    min-height:0;
  }
}
@media(max-width:560px){
  .analytics-line-chart,
  .analytics-horizontal-bar-chart{
    min-width:470px;
  }
}
@media(prefers-reduced-motion:reduce){
  .analytics-kpi-card .kpi-card-value,
  .analytics-line-path,
  .analytics-line-area,
  .analytics-line-point,
  .analytics-bar-chart [data-chart-bar],
  .analytics-horizontal-bar-chart [data-chart-bar-horizontal],
  .analytics-donut-chart [data-chart-donut]{
    transition:none!important;
    animation:none!important;
  }
}

/* DS-2026-025 · ReportBuilderComposer + FieldToggle Authority */
.report-builder-experience{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  margin-top:var(--space-5);
}
.report-builder-hero,
.report-builder-card-header,
.report-builder-fields-header{
  margin:0;
  align-items:flex-start;
}
.report-builder-permission-note{
  margin:0;
}
.report-builder-form{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.report-builder-config,
.report-builder-fields,
.report-builder-summary,
.report-builder-presets{
  min-width:0;
}
.report-builder-config{
  padding:var(--space-5);
}
.report-builder-config-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-4);
  margin-top:var(--space-4);
}
.report-builder-config-grid .form-grupo{
  margin:0;
}
.report-builder-workspace{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.68fr);
  gap:var(--space-4);
  align-items:start;
}
.report-builder-fields{
  padding:var(--space-5);
}
.report-builder-fields-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,.72fr);
  gap:var(--space-4);
}
.report-builder-tools{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.report-builder-search{
  min-height:46px;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:0 14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  color:var(--text-muted);
}
.report-builder-search:focus-within{
  border-color:color-mix(in srgb,var(--color-primario) 40%,var(--border-subtle));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primario) 8%,transparent);
}
.report-builder-search input{
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-main);
  box-shadow:none!important;
}
.report-field-groups{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-top:var(--space-4);
}
.report-field-group{
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  overflow:hidden;
}
.report-field-group>summary{
  min-height:64px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:var(--space-3);
  align-items:center;
  padding:10px 14px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.report-field-group>summary::-webkit-details-marker{display:none}
.report-field-group>summary:focus-visible{
  outline:2px solid var(--color-primario);
  outline-offset:-2px;
}
.report-field-group[open]>summary{
  background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-card));
  border-bottom:1px solid var(--border-subtle);
}
.report-field-group>summary>svg:last-child{
  transition:transform .18s ease;
}
.report-field-group[open]>summary>svg:last-child{
  transform:rotate(180deg);
}
.report-field-group-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-soft));
  color:var(--color-primario);
}
.report-field-group-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.report-field-group-copy strong{
  color:var(--text-main);
}
.report-field-group-copy small,
.report-field-group-count{
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
  font-weight:500;
}
.report-field-list{
  display:flex;
  flex-direction:column;
  padding:4px 14px;
}
.report-field-row{
  min-height:58px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-4);
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid var(--border-subtle);
  cursor:pointer;
}
.report-field-row:last-child{border-bottom:0}
.report-field-row:hover .report-field-copy strong{
  color:var(--color-primario);
}
.report-field-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.report-field-copy strong{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  color:var(--text-main);
  font-weight:500;
  transition:color .16s ease;
}
.report-field-copy small{
  color:var(--text-muted);
  line-height:1.4;
}
.report-field-sensitive{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 7px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--semantic-warning) 10%,transparent);
  color:var(--semantic-warning);
  font-size:var(--type-caption,.68rem);
  font-weight:500;
}
.field-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.field-toggle>input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.field-toggle-track{
  width:38px;
  height:22px;
  display:flex;
  align-items:center;
  padding:2px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.field-toggle-track>span{
  width:16px;
  height:16px;
  display:block;
  border-radius:50%;
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.field-toggle>input:checked+.field-toggle-track{
  border-color:var(--color-primario);
  background:var(--color-primario);
}
.field-toggle>input:checked+.field-toggle-track>span{
  transform:translateX(16px);
}
.field-toggle>input:focus-visible+.field-toggle-track{
  outline:2px solid var(--color-primario);
  outline-offset:3px;
}
.field-toggle>input:disabled+.field-toggle-track{
  opacity:.45;
  cursor:not-allowed;
}
.field-toggle>input:indeterminate+.field-toggle-track{
  border-color:color-mix(in srgb,var(--color-primario) 55%,var(--border-subtle));
  background:color-mix(in srgb,var(--color-primario) 35%,var(--surface-soft));
}
.field-toggle--master{
  min-height:46px;
  justify-content:space-between;
  gap:var(--space-3);
  padding:7px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
  cursor:pointer;
}
.field-toggle-copy{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.field-toggle-copy strong{
  color:var(--text-main);
  font-size:var(--type-caption,.76rem);
  font-weight:500;
}
.field-toggle-copy small{
  color:var(--text-muted);
  font-size:var(--type-caption,.68rem);
}
.report-builder-summary{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding:var(--space-5);
}
.report-builder-summary-head{
  display:flex;
  gap:var(--space-3);
  align-items:center;
}
.report-builder-summary-head h3{
  margin:2px 0 0;
}
.report-builder-summary-icon,
.report-preset-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-soft));
  color:var(--color-primario);
}
.report-builder-summary-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2);
}
.report-builder-summary-stats>div{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px var(--space-2);
  padding:10px;
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
}
.report-builder-summary-stats span{grid-row:1/span 2;color:var(--color-primario)}
.report-builder-summary-stats strong{color:var(--text-main)}
.report-builder-summary-stats small{color:var(--text-muted);font-size:var(--type-caption,.68rem)}
.report-builder-selected-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.report-builder-selected-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 9px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-soft));
  color:var(--text-main);
  font-size:var(--type-caption,.7rem);
  font-weight:500;
}
.report-builder-selected-chip.is-more{color:var(--color-primario)}
.report-builder-selected-empty{
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
  line-height:1.45;
}
.report-builder-summary-list{
  display:flex;
  flex-direction:column;
  margin:0;
}
.report-builder-summary-list>div{
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  padding:11px 0;
  border-top:1px solid var(--border-subtle);
}
.report-builder-summary-list dt,
.report-builder-summary-list dd{
  margin:0;
}
.report-builder-summary-list dt{
  display:flex;
  gap:var(--space-2);
  align-items:center;
  color:var(--text-secondary);
}
.report-builder-summary-list dd{
  color:var(--text-muted);
  text-align:right;
  overflow-wrap:anywhere;
}
.report-builder-summary-actions{
  display:grid;
  gap:var(--space-2);
}
.report-builder-summary-actions .btn{
  width:100%;
  justify-content:center;
}
.report-builder-tip{margin:0}
.report-builder-presets{
  padding:var(--space-5);
}
.report-preset-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  margin-top:var(--space-3);
}
.report-preset-card{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-3);
  align-items:center;
  padding:var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
}
.report-preset-card>div:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}
.report-preset-card strong{color:var(--text-main)}
.report-preset-card small{color:var(--text-muted)}
.report-preset-actions{display:flex;gap:var(--space-2);align-items:center}
.report-preset-actions form{margin:0}
.report-field-search-empty{padding-block:var(--space-5)}
@media(max-width:980px){
  .report-builder-workspace{grid-template-columns:1fr}
  .report-builder-summary{order:2}
  .report-builder-fields{order:1}
  .report-preset-grid{grid-template-columns:1fr}
}
@media(max-width:767px){
  .report-builder-config,
  .report-builder-fields,
  .report-builder-summary,
  .report-builder-presets{padding:var(--space-4)}
  .report-builder-config-grid{grid-template-columns:1fr}
  .report-builder-fields-header{grid-template-columns:1fr}
  .report-builder-tools{width:100%}
  .report-field-group>summary{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:var(--space-2);
  }
  .report-field-group-count{
    grid-column:2;
    grid-row:2;
  }
  .report-field-group>summary>svg:last-child{
    grid-column:3;
    grid-row:1/span 2;
  }
  .report-field-row{
    min-height:64px;
    gap:var(--space-3);
  }
  .report-field-copy strong{align-items:flex-start;flex-wrap:wrap}
  .report-preset-card{
    grid-template-columns:auto minmax(0,1fr);
  }
  .report-preset-actions{
    grid-column:1/-1;
    justify-content:flex-end;
  }
}
@media(max-width:560px){
  .report-builder-summary-stats{grid-template-columns:1fr 1fr}
  .report-field-group-copy small{display:none}
  .report-field-row{padding:10px 0}
  .report-field-copy small{font-size:var(--type-caption,.68rem)}
  .report-builder-summary-list>div{align-items:flex-start}
}

/* DS-2026-026 · MotionSystem 2.0 Authority
   Motion orients, confirms and adds continuity. It never changes geometry,
   hides latency, or becomes a module-owned visual effect. */
:root{
  --motion2-micro:var(--motion-micro,160ms);
  --motion2-state:var(--motion-fast,180ms);
  --motion2-enter:360ms;
  --motion2-surface:420ms;
  --motion2-feedback:260ms;
  --motion2-stagger:42ms;
  --motion2-distance:8px;
  --motion2-ease:var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1));
  --motion2-ease-emphasized:var(--motion-ease-emphasized,cubic-bezier(.22,1,.36,1));
}
/* StateTransition: canonical tabs and pills interpolate state without layout motion. */
:where(.section-nav,.tabs-global,.tabs) :where(a,button),
.status-pill,
.field-toggle-track,
.field-toggle-track>span{
  transition-property:background-color,border-color,color,box-shadow,transform,opacity;
  transition-duration:var(--motion2-state);
  transition-timing-function:var(--motion2-ease);
}
/* InteractiveCard: motion belongs to interaction, not decoration. */
@media(hover:hover) and (pointer:fine){
  :where(.profile-pending-card,.profile-access-card,.report-template-card,.analytics-insight-card):hover{
    transform:translateY(-2px);
  }
  :where(.profile-pending-card,.profile-access-card,.report-template-card)>svg:last-child{
    transition:transform var(--motion2-micro) var(--motion2-ease);
  }
  :where(.profile-pending-card,.profile-access-card,.report-template-card):hover>svg:last-child{
    transform:translateX(2px);
  }
}
/* SuccessFeedback: busy state is visible in-place and never changes button geometry. */
[data-motion-submit-feedback="1"]{isolation:isolate;}
/* Runtime uses WAAPI so content is never hidden if JS fails. */
html[data-motion-system="2.0"] [data-chart-motion],
html[data-motion-system="2.0"] :where(.visual-page-header.page-hero,.section-nav,.quantification-card,.context-info-card){
  backface-visibility:hidden;
}
@media(prefers-reduced-motion:reduce){
  :root{--motion2-micro:0ms;--motion2-state:0ms;--motion2-enter:0ms;--motion2-surface:0ms;--motion2-feedback:0ms;--motion2-stagger:0ms;--motion2-distance:0px;}
  :where(.section-nav,.tabs-global,.tabs) :where(a,button),.status-pill,.field-toggle-track,.field-toggle-track>span,
  :where(.profile-pending-card,.profile-access-card,.report-template-card,.analytics-insight-card){transition:none!important;animation:none!important;transform:none!important;}
}


/* DS-2026-027 · IdentityVerificationCard Authority */
.identity-captured-card{
  overflow:hidden;
  border:1px solid var(--border-subtle);
  transition:background var(--motion-standard,260ms) var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1)),border-color var(--motion-standard,260ms) var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1)),box-shadow var(--motion-standard,260ms) var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1));
}
.identity-captured-card--success{
  border-color:color-mix(in srgb,var(--semantic-success) 30%,var(--border-subtle));
  background:linear-gradient(180deg,color-mix(in srgb,var(--semantic-success) 5%,var(--surface-card)),color-mix(in srgb,var(--semantic-success) 2%,var(--surface-card)));
}
.identity-captured-card--danger{
  border-color:color-mix(in srgb,var(--semantic-danger) 22%,var(--border-subtle));
  background:linear-gradient(180deg,color-mix(in srgb,var(--semantic-danger) 4%,var(--surface-card)),var(--surface-card) 42%);
}
.identity-captured-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-4) var(--space-4) var(--space-3);
  border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 72%,transparent);
}
.identity-captured-heading{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
}
.identity-captured-heading h2{margin:0;color:var(--text-main);font-size:var(--type-title,1.05rem)}
.identity-captured-heading p{margin:3px 0 0;color:var(--text-muted);font-size:var(--type-caption,.78rem);line-height:1.45}
.identity-captured-icon{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
  color:var(--text-secondary);
}
.identity-captured-icon--success{background:color-mix(in srgb,var(--semantic-success) 11%,var(--surface-card));color:var(--semantic-success)}
.identity-captured-icon--danger{background:color-mix(in srgb,var(--semantic-danger) 10%,var(--surface-card));color:var(--semantic-danger)}
.identity-captured-body{padding:0 var(--space-4)}
.identity-inline-verification-table{width:100%;table-layout:fixed}
.identity-inline-verification-table td{vertical-align:middle;padding-block:11px}
.identity-inline-verification-table .identity-field-label{width:24%}
.identity-official-value{width:auto;color:var(--text-main);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis}
.identity-inline-sources{width:390px;text-align:right;white-space:nowrap}
.identity-source-pills{
  display:grid;
  grid-template-columns:repeat(3,minmax(82px,1fr));
  align-items:center;
  gap:8px;
  min-width:286px;
}
.identity-source-slot{min-width:0;height:28px}
.identity-source-status{
  min-width:0;
  height:28px;
  padding:0 8px;
  display:grid;
  grid-template-columns:6px minmax(0,1fr) 18px;
  align-items:center;
  gap:6px;
  border:0;
  border-radius:var(--radius-pill);
  font:inherit;
  font-size:11px;
  font-weight:700;
  line-height:1;
  text-align:left;
  white-space:nowrap;
  color:var(--text-secondary);
  background:var(--surface-soft);
}
button.identity-source-status{cursor:pointer}
.identity-source-status--success{color:var(--semantic-success);background:color-mix(in srgb,var(--semantic-success) 10%,var(--surface-card))}
.identity-source-status--danger{color:var(--semantic-danger);background:color-mix(in srgb,var(--semantic-danger) 10%,var(--surface-card))}
.identity-source-status--neutral{color:var(--text-muted);background:var(--surface-soft)}
.identity-source-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.identity-source-name{overflow:hidden;text-overflow:ellipsis}
.identity-source-result{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  justify-self:end;
  border:1px solid color-mix(in srgb,currentColor 54%,transparent);
  border-radius:50%;
}
.identity-source-status--success .identity-source-result{border-color:currentColor}
button.identity-source-status:hover{filter:brightness(.98);transform:translateY(-1px)}
button.identity-source-status:focus-visible{outline:2px solid var(--color-primario);outline-offset:2px}
.identity-data-row td:first-child{width:24%}
.identity-inline-alert{margin:var(--space-3) var(--space-4) var(--space-4)}
.identity-comparison-modal{width:min(920px,calc(100vw - 32px))}
.identity-comparison-modal .identity-source-table td,.identity-comparison-modal .identity-source-table th{vertical-align:middle}
.identity-comparison-modal .app-modal-footer form{margin:0}
@media(max-width:900px){
  .identity-inline-sources{width:330px}
  .identity-source-pills{grid-template-columns:repeat(3,minmax(72px,1fr));min-width:250px;gap:6px}
}
@media(max-width:760px){
  .identity-captured-header{align-items:flex-start;flex-wrap:wrap;padding:14px}
  .identity-captured-header>.status-pill{margin-left:50px}
  .identity-captured-body{padding-inline:14px}
  .identity-inline-verification-table{table-layout:auto}
  .identity-inline-verification-table tr{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(172px,auto);gap:8px;align-items:center;padding:10px 0}
  .identity-inline-verification-table td{width:auto!important;padding:0;border:0;min-width:0}
  .identity-inline-verification-table tr+tr{border-top:1px solid var(--border-subtle)}
  .identity-official-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .identity-inline-sources{white-space:normal;text-align:right}
  .identity-source-pills{grid-template-columns:repeat(3,54px);justify-content:end;min-width:0;gap:5px}
  .identity-source-status{height:26px;padding:0 5px;grid-template-columns:5px minmax(0,1fr) 15px;gap:3px;font-size:9px}
  .identity-source-result{width:15px;height:15px}
  .identity-source-slot{height:26px}
  .identity-data-row{grid-template-columns:96px minmax(0,1fr)!important}
  .identity-data-row td[colspan="2"]{grid-column:2}
}
@media(max-width:420px){
  .identity-captured-heading{gap:9px}
  .identity-captured-icon{width:34px;height:34px;border-radius:var(--radius-lg)}
  .identity-captured-header>.status-pill{margin-left:43px}
  .identity-inline-verification-table tr.identity-validated-row{grid-template-columns:66px minmax(0,1fr);gap:5px 8px}
  .identity-validated-row .identity-inline-sources{grid-column:1/-1}
  .identity-source-pills{grid-template-columns:repeat(3,minmax(58px,1fr));width:100%}
  .identity-source-status{font-size:9.5px}
  .identity-data-row{grid-template-columns:88px minmax(0,1fr)!important}
}
@media(max-width:340px){
  .identity-source-name{font-size:8.5px}
  .identity-source-pills{grid-template-columns:repeat(3,minmax(52px,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .identity-captured-card,button.identity-source-status{transition:none!important}
  button.identity-source-status:hover{transform:none}
}


/* DS-2026-028 · ActivityTimelineSurface Authority
   Compact expediente history: latest five first, progressive disclosure, factual summary only. */
.activity-timeline-surface{overflow:hidden}
.activity-timeline-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-4);border-bottom:1px solid var(--border-subtle)}
.activity-timeline-title{display:flex;align-items:flex-start;gap:var(--space-3);min-width:0}
.activity-timeline-title h2{margin:0;color:var(--text-main);font-size:var(--type-title,1.05rem)}
.activity-timeline-title p{margin:3px 0 0}
.activity-timeline-title-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:var(--radius-lg);color:var(--color-primario);background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card))}
.activity-timeline-count{flex:0 0 auto}
.activity-timeline-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:var(--space-4);padding:var(--space-4)}
.activity-timeline-main{min-width:0}
.activity-timeline-list{position:relative}
.activity-timeline-list .timeline-item{grid-template-columns:42px minmax(0,1fr);gap:var(--space-3);padding:0 0 var(--space-3)}
.activity-timeline-list .timeline-item:not(:last-child)::before{left:20px;top:38px;background:color-mix(in srgb,var(--color-primario) 18%,var(--border-subtle))}
.activity-timeline-list .timeline-marker{width:40px;height:40px;border-radius:var(--radius-lg);border:0;background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-soft));color:var(--color-primario)}
.activity-timeline-list .timeline-validacion .timeline-marker,.activity-timeline-list .timeline-aprobacion .timeline-marker{color:var(--semantic-success);background:color-mix(in srgb,var(--semantic-success) 10%,var(--surface-card))}
.activity-timeline-list .timeline-documento .timeline-marker{color:var(--semantic-info);background:color-mix(in srgb,var(--semantic-info) 10%,var(--surface-card))}
.activity-timeline-list .timeline-alerta .timeline-marker{color:var(--semantic-danger);background:color-mix(in srgb,var(--semantic-danger) 10%,var(--surface-card))}
.activity-timeline-list .timeline-item--latest .timeline-content{background:linear-gradient(90deg,color-mix(in srgb,var(--semantic-success) 7%,var(--surface-card)),transparent);border-radius:var(--radius-lg);padding:9px 12px;margin:-7px 0 0 -4px}
.activity-timeline-list .timeline-content{padding-top:2px}
.activity-timeline-list .timeline-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:start}
.activity-timeline-list .timeline-meta strong{font-size:.84rem}
.activity-timeline-list .timeline-meta time{font-size:.7rem;padding-top:2px}
.timeline-detail-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-width:0}
.timeline-detail-row p{min-width:0;margin:.18rem 0 0!important}
.timeline-actor{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;color:var(--text-muted);font-size:.7rem;white-space:nowrap}
.timeline-actor>span{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--surface-soft);color:var(--text-secondary);font-weight:700}
.activity-timeline-expander{margin-top:2px}
.activity-timeline-expander>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 14px;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-soft));color:var(--color-primario);font-weight:700;font-size:.78rem;transition:background var(--motion-fast,160ms) ease}
.activity-timeline-expander>summary::-webkit-details-marker{display:none}
.activity-timeline-expander>summary:hover{background:color-mix(in srgb,var(--color-primario) 9%,var(--surface-soft))}
.activity-timeline-expander>summary:focus-visible{outline:2px solid var(--color-primario);outline-offset:2px}
.activity-timeline-expander>summary svg{transition:transform var(--motion-fast,160ms) ease}
.activity-timeline-expander[open]>summary svg{transform:rotate(180deg)}
.activity-timeline-less-label{display:none}
.activity-timeline-expander[open] .activity-timeline-more-label{display:none}
.activity-timeline-expander[open] .activity-timeline-less-label{display:inline}
.activity-timeline-more{padding-top:var(--space-3);animation:activityTimelineReveal var(--motion-standard,320ms) cubic-bezier(.2,.8,.2,1) both}
.activity-timeline-summary{align-self:start;display:grid;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-xl);background:var(--surface-soft)}
.activity-timeline-summary-heading{display:flex;align-items:center;gap:9px;color:var(--text-main)}
.activity-timeline-summary-heading svg{color:var(--color-primario)}
.activity-timeline-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.activity-timeline-summary-grid>div{min-height:78px;padding:12px;border-radius:var(--radius-lg);background:var(--surface-card);display:flex;flex-direction:column;justify-content:center}
.activity-timeline-summary-grid strong{font-size:1.15rem;color:var(--text-main)}
.activity-timeline-summary-grid span{font-size:.68rem;line-height:1.3;color:var(--text-muted)}
.activity-timeline-context{display:flex;gap:10px;padding-top:var(--space-3);border-top:1px solid var(--border-subtle);color:var(--text-muted)}
.activity-timeline-context svg{flex:0 0 auto;color:var(--text-secondary)}
.activity-timeline-context strong{display:block;color:var(--text-main);font-size:.75rem}
.activity-timeline-context p{margin:3px 0 0;font-size:.68rem;line-height:1.45}
@keyframes activityTimelineReveal{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:980px){.activity-timeline-layout{grid-template-columns:minmax(0,1fr)}.activity-timeline-summary{grid-template-columns:180px minmax(0,1fr);align-items:center}.activity-timeline-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.activity-timeline-context{border-top:0;border-left:1px solid var(--border-subtle);padding:0 0 0 var(--space-3)}}
@media(max-width:767px){.activity-timeline-header{padding:14px;gap:10px}.activity-timeline-title-icon{width:34px;height:34px}.activity-timeline-count{font-size:.66rem}.activity-timeline-layout{padding:14px}.activity-timeline-summary{display:none}.activity-timeline-list .timeline-item{grid-template-columns:36px minmax(0,1fr);gap:10px}.activity-timeline-list .timeline-marker{width:34px;height:34px}.activity-timeline-list .timeline-item:not(:last-child)::before{left:17px;top:33px}.activity-timeline-list .timeline-meta{grid-template-columns:minmax(0,1fr)}.activity-timeline-list .timeline-meta time{order:2}.timeline-detail-row{align-items:flex-start;flex-direction:column;gap:6px}.timeline-actor{white-space:normal}.activity-timeline-list .timeline-item--latest .timeline-content{margin:-5px 0 0 -2px;padding:8px 10px}}
@media(max-width:390px){.activity-timeline-header{flex-direction:column}.activity-timeline-count{margin-left:44px}.activity-timeline-expander>summary{width:100%}}
@media(prefers-reduced-motion:reduce){.activity-timeline-more{animation:none}.activity-timeline-expander>summary,.activity-timeline-expander>summary svg{transition:none}}

/* DS-2026-029 · EmployeeInformationSurface Authority
   Separates official identity evidence from captured employee information. */
.employee-captured-information{margin:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border-subtle)}
.employee-captured-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.employee-captured-header h3{margin:2px 0 0;color:var(--text-main);font-size:var(--type-title,1.05rem)}
.employee-captured-header p{margin:4px 0 0;color:var(--text-muted);font-size:.78rem}
.employee-captured-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3)}
.employee-captured-card{min-width:0;padding:var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--surface-card)}
.employee-captured-card-title{display:flex;align-items:center;gap:9px;margin-bottom:var(--space-3);color:var(--text-main)}
.employee-captured-card-title>span{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-lg);color:var(--color-primario);background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-soft));flex:0 0 auto}
.employee-captured-card-title strong{font-size:.78rem}
.employee-captured-card dl{display:grid;gap:10px;margin:0}
.employee-captured-card dl>div{min-width:0}
.employee-captured-card dt{font-size:.66rem;color:var(--text-muted);line-height:1.25}
.employee-captured-card dd{margin:2px 0 0;color:var(--text-main);font-size:.76rem;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.employee-captured-provenance{display:flex;flex-wrap:wrap;gap:8px var(--space-4);margin-top:var(--space-3);padding:10px 12px;border-radius:var(--radius-lg);background:var(--surface-soft);color:var(--text-muted);font-size:.69rem}
.employee-captured-provenance strong{color:var(--text-secondary)}
.identity-validated-row--cp .identity-source-status--danger{box-shadow:0 0 0 1px color-mix(in srgb,var(--semantic-danger) 18%,transparent)}
@media(max-width:1180px){.employee-captured-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.employee-captured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.employee-captured-information{margin:14px;padding-top:14px}.employee-captured-header{flex-direction:column}.employee-captured-header .btn{width:100%}.employee-captured-grid{grid-template-columns:minmax(0,1fr)}.employee-captured-card{padding:14px}.employee-captured-provenance{display:grid;gap:6px}}

/* ========================================================================== 
   DS-2026-031 · Mobile Spatial Efficiency Authority
   Screenshot-led correction: mobile actions consume the available width,
   ContextInfoCard owns its icon container, and supplemental forms may span the
   complete card after the canonical icon/copy lead-in.
   ========================================================================== */
.visual-page-header.page-hero :where(.page-hero-actions){
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-2);
  flex-wrap:wrap;
}

.context-info-card .context-info-icon{
  width:var(--component-icon-box)!important;
  height:var(--component-icon-box)!important;
  min-width:var(--component-icon-box)!important;
  display:grid!important;
  place-items:center!important;
  border-radius:var(--component-icon-radius)!important;
  background:color-mix(in srgb,var(--brand-primary) 8%,var(--surface-card))!important;
  color:var(--brand-primary)!important;
}

.employment-state-panel > .employment-policy-form{
  grid-column:1 / -1;
  width:100%;
  margin-top:var(--space-2)!important;
}

@media(max-width:860px){
  .visual-page-header.page-hero :where(.page-hero-actions){
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-2);
  }
  .visual-page-header.page-hero :where(.page-hero-actions) > :where(.btn,a.btn,button.btn){
    width:100%;
    min-width:0;
    justify-content:center;
  }
  .visual-page-header.page-hero :where(.page-hero-actions) > :last-child:nth-child(odd){
    grid-column:1 / -1;
  }
}

@media(max-width:420px){
  .ui-expediente-profile-hero .expediente-hero-secondary-actions{
    width:100%;
    grid-template-columns:1fr;
  }
  .ui-expediente-profile-hero .expediente-hero-secondary-actions > *,
  .ui-expediente-profile-hero .expediente-hero-secondary-actions form,
  .ui-expediente-profile-hero .expediente-hero-secondary-actions :is(.btn,form>.btn){
    width:100%!important;
  }
}

@media(max-width:560px){
  .employment-state-panel > .employment-policy-form{
    grid-column:1 / -1;
  }
  .employment-state-panel > .employment-policy-form .form-grupo,
  .employment-state-panel > .employment-policy-form :is(input,select){
    width:100%;
    min-width:0;
  }
}


/* DS-2026-031 · Mobile Content Efficiency certified variants.
   Geometry is owned here; modules continue to own only data/content. */
/* =========================================================
   DS-2026-031 · Mobile Content Efficiency Closure
   Canonical mobile rows keep actions on the trailing edge while space allows;
   Expediente 360 removes a decorative divider that split one header surface.
   ========================================================= */
.document-hub-header{
  border-bottom:0;
}

@media(max-width:860px){
  .compliance-attention-row{
    grid-template-columns:32px minmax(0,1fr) auto;
    align-items:center;
  }
  .compliance-attention-actions{
    grid-column:3;
    justify-content:flex-end;
    flex-wrap:wrap;
    max-width:156px;
  }
  .compliance-attention-actions > .btn,
  .compliance-attention-actions > .inline-form > .btn{
    min-height:38px;
  }
}

@media(max-width:340px){
  .compliance-attention-row{
    grid-template-columns:32px minmax(0,1fr);
    align-items:start;
  }
  .compliance-attention-actions{
    grid-column:2;
    justify-content:flex-start;
    max-width:none;
  }
}

/* =========================================================
   Flōow Typography Authority 2.0 · DS-2026-032 · v2.8.77
   One semantic type scale for every canonical surface.
   Modules may provide content; they may not invent hierarchy.
   ========================================================= */
:root{
  --type-display-xl:clamp(2.75rem,5vw,5.5rem);
  --type-display:clamp(2rem,3vw,3.25rem);
  --type-page-title:1.5rem;
  --type-section-title:1.125rem;
  --type-component-title:1rem;
  --type-body:.875rem;
  --type-body-small:.8125rem;
  --type-label:.8125rem;
  --type-button:.8125rem;
  --type-caption:.75rem;
  --type-meta:.75rem;
  --type-overline:.6875rem;
  --type-kpi:1.625rem;
  --type-table:.8125rem;
  --type-table-head:.6875rem;

  --line-display:.96;
  --line-page:1.15;
  --line-section:1.28;
  --line-body:1.5;
  --line-compact:1.32;
  --line-meta:1.4;

  --weight-page:700;
  --weight-section:700;
  --weight-component:700;
  --weight-body:400;
  --weight-label:500;
  --weight-button:500;
  --weight-meta:400;
}

/* Canonical hierarchy. The same role has the same size everywhere. */
:where(.page-hero,.topbar,.page-heading,.ui-expediente-profile-hero) h1{
  font-size:var(--type-page-title)!important;
  font-weight:var(--weight-page)!important;
  line-height:var(--line-page)!important;
  letter-spacing:-.028em!important;
}
:where(.ui-section-header,.card-header,.section-title-row,.document-hub-title) h2{
  font-size:var(--type-section-title)!important;
  font-weight:var(--weight-section)!important;
  line-height:var(--line-section)!important;
  letter-spacing:-.015em!important;
}
:where(
  .context-info-card,.ui-context-info-card,
  .employment-section-heading,.employment-history-heading,
  .employee-record-supplement-header,.employee-lifecycle-state-card,
  .component-title,.panel-title
) h3{
  font-size:var(--type-component-title)!important;
  font-weight:var(--weight-component)!important;
  line-height:var(--line-compact)!important;
  letter-spacing:-.01em!important;
}
:where(
  .page-hero,.ui-section-header,.card-header,.context-info-card,.ui-context-info-card,
  .employment-section-heading,.employment-history-heading,.employee-record-supplement-header,
  .employee-lifecycle-state-card,.document-hub-title
) p{
  font-size:var(--type-body)!important;
  font-weight:var(--weight-body)!important;
  line-height:var(--line-body)!important;
}
:where(
  .module-eyebrow,.spotlight-eyebrow,.section-kicker,.document-hub-kicker,.organization-kicker,
  .expediente-hero-eyebrow,.activity-group-label,.global-create-header .eyebrow
){
  font-size:var(--type-overline)!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:.055em!important;
}
:where(.form-grupo label,.field>label,.form-field>label,.campo>label){
  font-size:var(--type-label)!important;
  font-weight:var(--weight-label)!important;
  line-height:var(--line-compact)!important;
}
:where(.form-grupo .ayuda,.field-guidance,.helper-text,.form-help,.input-help,.texto-muted,small){
  line-height:var(--line-meta);
}
:where(.btn,.tab,.nav-link){font-size:var(--type-button);font-weight:var(--weight-button)}
:where(.data-table,.table-enterprise){font-size:var(--type-table);line-height:var(--line-compact)}
:where(.data-table,.table-enterprise) th{font-size:var(--type-table-head);font-weight:700}
:where(.quantification-card,.kpi-card,.stat-card,.metric-card) :where(.valor,.stat-value,.metric-value,.kpi-card-value){font-size:var(--type-kpi)}

/* Expediente/Profile is a reference implementation, not a local scale. */
.expediente-hero-meta{font-size:var(--type-meta)!important;line-height:var(--line-meta)!important}
.expediente-number{font-size:var(--type-meta)!important;line-height:var(--line-meta)!important}
:where(.hrcore-kpis,.hrcore-current-strip,.employment-data-grid) span{font-size:var(--type-meta)!important;line-height:var(--line-meta)!important}
:where(.hrcore-kpis,.hrcore-current-strip,.employment-data-grid) strong{font-size:var(--type-body)!important;line-height:var(--line-compact)!important}
:where(.hrcore-kpis,.hrcore-current-strip,.employment-data-grid) small{font-size:var(--type-caption)!important;line-height:var(--line-meta)!important}
:where(.hrcore-row,.lifecycle-task-copy,.lifecycle-process-summary) strong{font-size:var(--type-body)!important;line-height:var(--line-compact)!important}
:where(.hrcore-row,.lifecycle-task-copy,.lifecycle-process-summary) small{font-size:var(--type-caption)!important;line-height:var(--line-meta)!important}

@media(max-width:700px){
  :root{
    --type-page-title:1.375rem;
    --type-section-title:1.0625rem;
    --type-component-title:1rem;
    --type-kpi:1.375rem;
  }
}

/* =========================================================
   DS-2026-033 · Expediente 360 Interaction & Secondary Surface Authority
   v2.8.80
   Certifies secondary-context composition, semantic completion states,
   canonical document-empty actions, modal rhythm and table action groups.
   ========================================================= */
:root{
  --expediente-secondary-gap:var(--space-3);
  --modal-section-gap:var(--space-5);
  --data-table-action-gap:var(--space-2);
  --focus-shadow:0 0 0 var(--interactive-focus-width,3px) var(--focus-ring);
}

/* SectionNav active state never uses an underline/pleca. White Label supplies
   selected tint only; geometry remains canonical in every viewport/theme. */
.ui-section-nav :is(a,button,[role="tab"]){
  border-bottom:0!important;
  text-decoration:none!important;
}
.ui-section-nav :is(a,button,[role="tab"])::before,
.ui-section-nav :is(a,button,[role="tab"])::after{
  display:none!important;
  content:none!important;
}
.ui-section-nav :is(.active,.is-active,[aria-selected="true"]){
  border-bottom:0!important;
  box-shadow:none!important;
}

/* Expediente secondary context: one family, one geometry. */
.expediente-secondary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--expediente-secondary-gap);
  margin-top:var(--space-3);
  align-items:stretch;
}
.expediente-secondary-grid>.expediente-secondary-card{
  min-width:0!important;
  min-height:100%!important;
  margin:0!important;
  padding:var(--space-4)!important;
  align-items:flex-start!important;
}
.expediente-secondary-card-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  height:100%;
}
.expediente-secondary-card-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.expediente-secondary-card :is(h3,p){margin:0!important}
.expediente-secondary-card-actions{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:var(--space-2);
}
.expediente-secondary-disclosure{position:relative}
.expediente-secondary-disclosure>summary{list-style:none;cursor:pointer}
.expediente-secondary-disclosure>summary::-webkit-details-marker{display:none}
.expediente-secondary-disclosure-panel{
  position:absolute;
  z-index:20;
  inset:auto 0 auto auto;
  width:min(300px,80vw);
  margin-top:var(--space-2);
  padding:var(--space-3);
  display:grid;
  gap:var(--space-2);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  background:var(--surface-card);
  box-shadow:var(--shadow-md);
}
.expediente-secondary-disclosure-panel label{display:grid;gap:var(--space-1);font-size:var(--type-label);font-weight:var(--weight-label)}

/* State of record: completion is semantic, not White Label. */
.employee-record-state-kpi{
  position:relative;
  border:1px solid transparent;
}
.employee-record-state-kpi.is-success{
  background:color-mix(in srgb,var(--semantic-success) 6%,var(--surface-card))!important;
  border-color:color-mix(in srgb,var(--semantic-success) 18%,var(--border-subtle));
}
.employee-record-state-kpi.is-success strong{color:var(--semantic-success)}
.employee-record-state-kpi.is-warning{
  background:color-mix(in srgb,var(--semantic-warning) 5%,var(--surface-card))!important;
  border-color:color-mix(in srgb,var(--semantic-warning) 15%,var(--border-subtle));
}
.employee-record-state-kpi.is-neutral{
  background:var(--surface-subtle)!important;
  border-color:transparent;
}

/* Document repository empty state is a real accessible action and shares the
   exact upload flow used by the primary CTA. */
.document-category-head-actions{display:flex;align-items:center;gap:var(--space-2)}
.document-category-add{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:var(--surface-card);
  color:var(--brand-primary);
  cursor:pointer;
}
.document-category-add:hover{background:var(--interaction-hover)}
.document-category-add:focus-visible,.document-empty-action:focus-visible{outline:0;box-shadow:var(--focus-shadow)}
.document-empty-action{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.document-empty-action:hover{background:color-mix(in srgb,var(--brand-primary) 4%,var(--surface-card))}
.document-empty-copy{display:flex;flex-direction:column;min-width:0}

/* AppModal rhythm: description → form → context → footer must breathe. */
.expediente-context-modal .app-modal-body{
  display:grid!important;
  gap:var(--modal-section-gap)!important;
}
.expediente-context-modal .app-modal-body>.grid{margin:0!important}
.expediente-context-modal .app-modal-body>.context-info-card{margin:0!important}
.expediente-context-modal .app-modal-footer{
  margin-top:var(--space-5)!important;
  padding-top:var(--space-4)!important;
}

/* Canonical DataTable decision action grouping. */
.table-enterprise .decision-action-group,
.data-table .decision-action-group{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--data-table-action-gap);
  flex-wrap:wrap;
  min-width:max-content;
}
.table-enterprise .decision-action-group>:is(form,details),
.data-table .decision-action-group>:is(form,details){margin:0!important}

@media(max-width:980px){
  .expediente-secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .expediente-secondary-grid>.expediente-secondary-card:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:640px){
  .expediente-secondary-grid{grid-template-columns:1fr}
  .expediente-secondary-grid>.expediente-secondary-card:last-child:nth-child(odd){grid-column:auto}
  .expediente-secondary-disclosure-panel{position:fixed;left:12px;right:12px;bottom:calc(var(--mobile-bottom-nav-h,72px) + 16px);width:auto}
  .table-enterprise .decision-action-group,.data-table .decision-action-group{min-width:0;justify-content:flex-start}
}

/* =========================================================
   DS-2026-034 · Employee Custom Data & Attention Authority
   v2.8.81
   ========================================================= */
:root{
  --nav-attention-size:1.35rem;
  --custom-data-grid-gap:var(--space-3);
}

/* Expediente navigation and first content layer need canonical separation. */
.expediente-section-tabs{margin-bottom:var(--space-4)!important;}

/* Completion surfaces use semantic fill only: no decorative semantic outline. */
.employee-record-state-kpi,
.employee-record-state-kpi.is-success,
.employee-record-state-kpi.is-warning,
.employee-record-state-kpi.is-neutral{border-color:transparent!important;}

/* Secondary context remains three independent canonical cards. */
.expediente-secondary-grid>.expediente-secondary-card{
  background:var(--surface-card)!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--radius-card)!important;
  box-shadow:var(--shadow-sm)!important;
  overflow:hidden;
}
html[data-theme="dark"] .expediente-secondary-grid>.expediente-secondary-card{background:var(--surface-card)!important;}

/* AppModal owns body/footer geometry. Helper/error text can never render below the footer. */
.app-modal>.app-modal-dialog{max-height:min(90dvh,900px);overflow:hidden;display:flex;flex-direction:column;}
.app-modal>.app-modal-dialog>form{min-height:0;display:flex;flex-direction:column;flex:1 1 auto;}
.app-modal .app-modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:var(--space-5)!important;}
.app-modal .app-modal-footer{position:relative!important;inset:auto!important;flex:0 0 auto;background:var(--surface-card);z-index:2;}
.app-modal .form-grupo>small,.app-modal .form-helper,.app-modal .form-error{position:static!important;display:block;margin-top:var(--space-1);}

/* Actionable sidebar counters. Count is computed server-side from the user's tenant/scope. */
.nav-attention-badge{
  min-width:var(--nav-attention-size);height:var(--nav-attention-size);padding:0 .38rem;
  display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
  border-radius:var(--radius-pill);background:color-mix(in srgb,var(--semantic-warning) 15%,var(--surface-card));
  color:var(--semantic-warning-strong,var(--semantic-warning));font-size:var(--type-caption);font-weight:700;line-height:1;
  white-space:nowrap;
}
.nav-attention-badge--group{margin-left:auto;margin-right:var(--space-1);}
.sidebar.is-collapsed .nav-attention-badge{position:absolute;top:2px;right:2px;margin:0;min-width:1.1rem;height:1.1rem;padding:0 .25rem;font-size:.625rem;}
.nav-link{position:relative;}

/* Custom employee data reuses canonical SectionHeader, ContextInfoCard and FormControl geometry. */
.custom-employee-data{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border-subtle);}
.custom-employee-data-header{align-items:flex-end;}
.custom-employee-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--custom-data-grid-gap);}
.custom-employee-card{min-height:100%;align-items:flex-start!important;background:var(--surface-card)!important;border:1px solid var(--border-subtle)!important;border-radius:var(--radius-card)!important;}
.custom-employee-card-body{min-width:0;width:100%;}
.custom-employee-card-body>h3{margin:0 0 var(--space-3)!important;}
.custom-employee-field-list{display:grid;gap:var(--space-3);}
.custom-employee-field label small{display:inline-flex;gap:.25rem;align-items:center;color:var(--text-muted);font-weight:500;}
.custom-employee-data-actions{display:flex;justify-content:flex-end;margin-top:var(--space-3);}
.custom-field-definition-body{display:grid!important;gap:var(--space-4)!important;}
.custom-field-flags{display:grid;gap:var(--space-2);}

/* Analytics for custom fields is type-aware instead of pretending all values aggregate equally. */
.custom-field-analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);}
.custom-field-analytics-card{min-width:0;}
.custom-field-type-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--surface-subtle);color:var(--text-muted);font-size:var(--type-caption);font-weight:700;white-space:nowrap;}
.custom-field-number-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:var(--space-3) 0 0;}
.custom-field-number-summary>div{padding:var(--space-3);border-radius:var(--radius-control);background:var(--surface-subtle);}
.custom-field-number-summary dt{font-size:var(--type-caption);color:var(--text-muted);}
.custom-field-number-summary dd{margin:.35rem 0 0;font-size:var(--type-component-title);font-weight:700;}

@media(max-width:980px){
  .custom-employee-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .custom-field-analytics-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .expediente-section-tabs{margin-bottom:var(--space-3)!important;}
  .custom-employee-card-grid{grid-template-columns:1fr;}
  .custom-employee-data-actions>.btn{width:100%;}
  .custom-field-number-summary{grid-template-columns:1fr;}
}
.nav-domain-toggle[aria-expanded="true"] .nav-attention-badge--group{display:none;}

.custom-field-inline-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2);}
.custom-field-deactivate-action{color:var(--semantic-danger)!important;}
.custom-information-request-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);}
.custom-information-request-card{min-width:0;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);}
.custom-information-request-form{display:grid;gap:var(--space-3);margin-top:var(--space-3);}
@media(max-width:760px){.custom-information-request-grid{grid-template-columns:1fr}.custom-field-inline-actions>.btn{flex:1 1 auto}}

/* Custom category icon picker: curated canonical registry, no arbitrary uploads. */
.custom-field-icon-fieldset{min-width:0;border:0;padding:0;margin:0;}
.custom-field-icon-fieldset>legend{padding:0;margin:0 0 var(--space-2);font-size:var(--type-label);font-weight:var(--weight-label);color:var(--text-main);}
.custom-field-icon-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);max-height:220px;overflow:auto;padding:2px;}
.custom-field-icon-option{position:relative;display:grid;justify-items:center;align-content:center;gap:var(--space-1);min-height:64px;padding:var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-control);background:var(--surface-card);cursor:pointer;text-align:center;}
.custom-field-icon-option input{position:absolute;opacity:0;pointer-events:none;}
.custom-field-icon-option span{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-control);background:var(--surface-subtle);color:var(--brand-primary);}
.custom-field-icon-option small{font-size:var(--type-caption);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.custom-field-icon-option:has(input:checked){border-color:color-mix(in srgb,var(--brand-primary) 38%,var(--border-subtle));background:color-mix(in srgb,var(--brand-primary) 6%,var(--surface-card));box-shadow:var(--focus-shadow);}
.custom-field-icon-option:has(input:focus-visible){box-shadow:var(--focus-shadow);}
.document-upload-body{display:grid;gap:var(--space-3);}
.document-upload-body>.grid{margin-top:0!important;}
@media(max-width:640px){.custom-field-icon-picker{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* =========================================================
   DS-2026-035 · Document Repository Row Hierarchy Authority
   v2.8.82
   ========================================================= */
/* Repository rows are list content inside the category surface, never a
   second Card. Legacy .document-row is intentionally not consumed here. */
.document-category-audit .document-row-modern{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3);
  min-width:0;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.document-category-audit .document-row-modern + .document-row-modern{
  border-top:1px solid var(--border-subtle)!important;
}
.document-file-statuses{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  margin-top:var(--space-2);
}
.document-category-audit .document-row-actions-modern{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-2);
  flex-wrap:wrap;
  min-width:max-content;
}
.document-category-audit .document-row-actions-modern>:is(form,details){margin:0!important}
.document-category-audit .document-row-actions-modern .inline-form{display:inline-flex;align-items:center}
@media(max-width:760px){
  .document-category-audit .document-row-modern{grid-template-columns:auto minmax(0,1fr)}
  .document-category-audit .document-row-actions-modern{
    grid-column:2;
    justify-content:flex-start;
    min-width:0;
  }
}


/* DS-2026-036 · Interaction, Navigation & Audit Governance Authority */
.ui-expediente-profile-hero--full-grid{display:grid!important;grid-template-columns:minmax(0,1.65fr) minmax(260px,.72fr) minmax(250px,.62fr);column-gap:var(--space-6,24px);width:100%;align-items:center}
.ui-expediente-profile-hero--full-grid .expediente-hero-identity{min-width:0;width:100%}
.ui-expediente-profile-hero--full-grid .expediente-hero-status{min-width:0;width:100%;border-inline-start:1px solid var(--line-soft);padding-inline-start:var(--space-5,20px)}
.ui-expediente-profile-hero--full-grid .expediente-hero-operations{min-width:0;width:100%;border-inline-start:1px solid var(--line-soft);padding-inline-start:var(--space-5,20px);justify-self:stretch}
.ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions{width:100%;display:grid;gap:var(--space-2,8px)}
.ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions :is(.btn,form,.btn>*){min-width:0}
.ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions :is(.btn,form>.btn){width:100%;justify-content:center}
@media(max-width:1100px){.ui-expediente-profile-hero--full-grid{grid-template-columns:minmax(0,1fr) minmax(250px,.62fr)}.ui-expediente-profile-hero--full-grid .expediente-hero-operations{grid-column:1/-1;border-inline-start:0;padding-inline-start:0}.ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ui-expediente-profile-hero--full-grid{grid-template-columns:1fr}.ui-expediente-profile-hero--full-grid :is(.expediente-hero-status,.expediente-hero-operations){border-inline-start:0;padding-inline-start:0}.ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions{grid-template-columns:1fr}}

/* Selectable Card State Authority: brand identifies selection, semantic colors remain independent. */
.ui-selectable-card{cursor:pointer;transition:background-color var(--motion-fast,160ms) ease,border-color var(--motion-fast,160ms) ease,box-shadow var(--motion-fast,160ms) ease}
.ui-selectable-card:is(:hover,:focus-visible){border-color:color-mix(in srgb,var(--color-primario) 26%,var(--line-soft));outline:none}
.ui-selectable-card:is(.is-selected,[aria-selected="true"],[aria-pressed="true"],:has(input:checked)){background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));border-color:color-mix(in srgb,var(--color-primario) 18%,var(--line-soft));box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primario) 8%,transparent)}
.ui-selectable-card:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--focus-ring) 22%,transparent)}
html[data-theme="dark"] .ui-selectable-card:is(.is-selected,[aria-selected="true"],[aria-pressed="true"],:has(input:checked)){background:color-mix(in srgb,var(--color-primario) 14%,var(--surface-card))}

/* Toggle & binary-control authority */
.settings-module-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-4,16px);padding:var(--space-4,16px) 0;border-bottom:1px solid var(--line-soft)}
.settings-module-row:last-child{border-bottom:0}.settings-module-row>div{min-width:0}.settings-module-row p{max-width:760px}
.toggle-switch{align-self:start;margin-top:2px}
.automation-channel-options{display:flex;flex-wrap:wrap;gap:var(--space-2,8px);margin-top:var(--space-3,12px)}
.automation-channel-choice{display:inline-flex!important;align-items:center;gap:7px!important;min-height:36px;padding:7px 10px;border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:var(--surface-subtle);font-size:var(--type-meta,.75rem)!important;color:var(--text-main)!important}
.automation-channel-choice:has(input:checked){background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));border-color:color-mix(in srgb,var(--color-primario) 18%,var(--line-soft))}
.automation-channel-choice input{accent-color:var(--color-primario)}
.automation-escalation-hours{display:inline-flex!important;align-items:center;gap:7px!important;font-size:var(--type-meta,.75rem)!important}.automation-escalation-hours input{width:76px!important}
@media(max-width:680px){.settings-module-row{grid-template-columns:minmax(0,1fr) auto}.automation-channel-options{grid-column:1/-1}}

/* Color Picker geometry is a FormControl concern, never browser-square geometry. */
.color-field input[type="color"]{border-radius:var(--radius-md,12px)!important;overflow:hidden!important;padding:4px!important;border:1px solid var(--line-soft)!important;background:var(--surface-card)!important}
.color-field input[type="color"]::-webkit-color-swatch-wrapper{padding:0}.color-field input[type="color"]::-webkit-color-swatch{border:0!important;border-radius:calc(var(--radius-md,12px) - 4px)!important}.color-field input[type="color"]::-moz-color-swatch{border:0!important;border-radius:calc(var(--radius-md,12px) - 4px)!important}

/* Release Manager progressive disclosure + canonical feedback. */
.release-feedback{padding:12px 14px;border-radius:var(--radius-md,12px);font-size:var(--type-body-small,.8rem);line-height:1.45}.release-feedback--danger{background:var(--danger-soft,#fff1f2);color:var(--danger,#b42318);border:0!important;outline:0!important}
.release-list-expander,.release-restore-expander{margin-top:var(--space-3,12px)}.release-list-expander>summary,.release-restore-expander>summary{width:max-content;max-width:100%}.release-restore-more-row>td{padding:0!important;border-bottom:0!important}.release-restore-more-table{margin-top:var(--space-3,12px)}

/* Audit Center hierarchy · DS-2026-061 */
.audit-center{display:grid;gap:var(--ui-section-gap,16px);min-width:0}.audit-page-hero .page-hero-actions,.audit-hero-actions{display:flex;align-items:center;gap:var(--space-3,12px);flex-wrap:wrap}.audit-period-select{min-height:var(--control-height,44px);border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-card);color:var(--text-main);padding:0 var(--space-4,16px);font:inherit}
.audit-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3,12px)}.audit-summary-grid .ui-quantification-card{display:flex;align-items:center;gap:var(--space-3,12px);min-height:118px}.audit-summary-icon,.audit-inspector-icon{width:40px;height:40px;border-radius:var(--radius-md,12px);display:grid;place-items:center;background:var(--surface-subtle);color:var(--color-primario);flex:0 0 auto}.audit-summary-grid strong{display:block;font-size:var(--type-kpi,1.5rem);line-height:1}.audit-summary-grid span:not(.audit-summary-icon){display:block;margin-top:5px;font-weight:700}.audit-summary-grid small{display:block;margin-top:3px;color:var(--text-muted)}.audit-last-time{font-variant-numeric:tabular-nums}
.audit-explorer-card,.audit-log-card,.audit-inspector{padding:var(--space-5,20px)}.audit-filter-bar-v2{display:grid;grid-template-columns:minmax(520px,2fr) minmax(180px,220px) minmax(180px,220px) minmax(170px,210px) auto auto;align-items:end;gap:var(--space-3,12px)}.audit-filter-bar .form-grupo{margin:0}.audit-filter-bar-v2 .audit-search-field{min-width:0}.audit-filter-bar-v2 .audit-search-field input{display:block;width:100%!important;max-width:none!important;min-width:0;box-sizing:border-box}.audit-filter-bar .btn{min-height:var(--control-height,44px)}
.audit-quick-filters{display:flex;gap:var(--space-2,8px);margin-top:var(--space-4,16px);padding-top:var(--space-4,16px);border-top:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none}.audit-quick-filters::-webkit-scrollbar{display:none}.audit-filter-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--space-3,12px);border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:var(--surface-subtle);color:var(--text-muted);font-size:var(--type-body-small,.8rem);font-weight:700;white-space:nowrap;text-decoration:none}.audit-filter-chip.is-active{background:color-mix(in srgb,var(--color-primario) 10%,var(--surface-card));border-color:color-mix(in srgb,var(--color-primario) 24%,var(--line-soft));color:var(--color-primario)}.audit-alert-dot{width:7px;height:7px;border-radius:50%;background:var(--danger)}
.audit-workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr);align-items:start;gap:var(--space-4,16px);min-width:0}.audit-workspace>.audit-log-card,.audit-workspace>.audit-inspector{align-self:start;margin-block-start:0!important;transform:none}.audit-log-heading{margin-bottom:var(--space-4,16px)}.audit-table-wrap{border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);overflow:auto}.audit-table{margin:0}.audit-table td{vertical-align:middle}.audit-date-cell{white-space:nowrap;min-width:max-content}.audit-date-cell strong,.audit-date-cell small,.audit-ip,.audit-row-meta{display:block}.audit-date-cell small,.audit-ip,.audit-row-meta{margin-top:3px;color:var(--text-muted);font-size:var(--type-meta,.72rem)}.audit-detail-cell{max-width:360px}.audit-event-row{transition:background .16s ease}.audit-event-row.is-selected{background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-card))}.audit-event-row:focus-within{outline:0}.audit-detail-btn:focus-visible{outline:2px solid var(--focus-ring,var(--color-primario));outline-offset:2px}
.audit-inspector{position:static;align-self:start;min-width:0;background:var(--surface-card);border-color:var(--line-soft)}.audit-inspector.is-danger{background:linear-gradient(135deg,color-mix(in srgb,var(--semantic-danger) 8%,var(--surface-card)),var(--surface-card) 74%);border-color:color-mix(in srgb,var(--semantic-danger) 28%,var(--border-subtle))}.audit-inspector-empty{min-height:260px;display:grid;place-items:center;align-content:center;text-align:center;gap:var(--space-2,8px);color:var(--text-muted)}.audit-inspector-empty h3{margin:var(--space-2,8px) 0 0;color:var(--text-main)}.audit-inspector-empty p{max-width:320px;margin:0}.audit-inspector-head{display:flex;align-items:flex-start;gap:var(--space-3,12px);padding-bottom:var(--space-4,16px);border-bottom:1px solid var(--line-soft)}.audit-inspector-head h2{margin:3px 0 var(--space-2,8px);font-size:var(--type-component-title,1rem)}.audit-inspector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4,16px);padding:var(--space-4,16px) 0}.audit-inspector-grid small,.audit-technical-details small{display:block;color:var(--text-muted);font-size:var(--type-meta,.72rem);margin-bottom:4px}.audit-inspector-grid strong{font-size:var(--type-body-small,.8rem);overflow-wrap:anywhere}.audit-inspector-wide{grid-column:1/-1}.audit-technical-details{border-top:1px solid var(--line-soft);padding-top:var(--space-3,12px)}.audit-technical-details summary{cursor:pointer;font-weight:700}.audit-technical-details p{overflow-wrap:anywhere;color:var(--text-muted);font-size:var(--type-meta,.72rem)}.audit-retention-note{margin-top:0}
@media(max-width:1180px){.audit-filter-bar-v2{grid-template-columns:repeat(2,minmax(0,1fr))}.audit-filter-bar-v2 .audit-search-field{grid-column:1/-1}.audit-filter-bar .btn{width:100%;justify-content:center}.audit-workspace{grid-template-columns:1fr}.audit-inspector{position:static}}
@media(max-width:1040px){.audit-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.audit-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.audit-filter-bar-v2{grid-template-columns:1fr}.audit-filter-bar-v2 .audit-search-field{grid-column:auto}.audit-summary-grid .ui-quantification-card{min-height:104px;padding:14px}.audit-explorer-card,.audit-log-card,.audit-inspector{padding:14px}.audit-inspector-grid{grid-template-columns:1fr}.audit-inspector-wide{grid-column:auto}.audit-page-hero .page-hero-actions{width:100%}.audit-page-hero .page-hero-actions form,.audit-page-hero .page-hero-actions .btn,.audit-period-select{width:100%}}

/* =========================================================
   DS-2026-037 · Expediente Responsive Acceptance Authority
   v2.8.84
   Closes the accepted layout contract from v2.8.83: the employee header,
   SectionNav and content surfaces share one rail; action groups reflow before
   overflow; mobile structural surfaces keep a consistent content gutter.
   ========================================================= */
:root{
  --expediente-rail-gap:var(--space-5,20px);
  --expediente-hero-column-gap:var(--space-5,20px);
  --mobile-structural-rail-gutter:0px;
}

/* The profile hero consumes the exact same available rail as SectionNav and
   the first content surface. No child is allowed to create a wider intrinsic
   minimum than its assigned grid track. */
.ui-expediente-profile-hero--full-grid{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.72fr) minmax(340px,.82fr)!important;
  column-gap:var(--expediente-hero-column-gap)!important;
}
.ui-expediente-profile-hero--full-grid :is(
  .expediente-hero-identity,
  .expediente-hero-copy,
  .expediente-hero-status,
  .expediente-hero-operations,
  .expediente-hero-action-grid,
  .expediente-hero-secondary-actions,
  .expediente-hero-decision-actions,
  form,
  .btn
){min-width:0!important;max-width:100%;box-sizing:border-box;}
.ui-expediente-profile-hero--full-grid .expediente-hero-action-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%;
}
.ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions:only-child{
  grid-column:1 / -1;
}
.ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions:only-child :is(.btn,form>.btn){
  width:100%;
}

/* Reflow occurs before the action area can exceed the content rail. This
   breakpoint intentionally enters earlier than the historic 1100px rule
   because the desktop sidebar reduces the real workspace width. */
@media (min-width:1001px) and (max-width:1450px){
  .ui-expediente-profile-hero--full-grid{
    grid-template-columns:minmax(0,1fr) minmax(300px,.62fr)!important;
    row-gap:var(--space-4,16px)!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-status{
    border-inline-start:1px solid var(--line-soft)!important;
    border-inline-end:0!important;
    padding-inline:var(--space-5,20px) 0!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-operations{
    grid-column:1 / -1!important;
    border-inline-start:0!important;
    border-top:1px solid var(--line-soft)!important;
    padding-inline-start:0!important;
    padding-top:var(--space-4,16px)!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-action-grid{
    width:min(100%,720px)!important;
    margin-inline-start:auto;
  }
}

/* Tablet: identity owns the first row; status and actions share the second
   row while there is enough room. This is a reflow, never horizontal clipping. */
@media (min-width:761px) and (max-width:1000px){
  .ui-expediente-profile-hero--full-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    row-gap:var(--space-4,16px)!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-identity{grid-column:1 / -1;}
  .ui-expediente-profile-hero--full-grid .expediente-hero-status{
    border:0!important;
    padding:0!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-operations{
    grid-column:auto!important;
    border:0!important;
    padding:0!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-action-grid{
    grid-template-columns:1fr!important;
  }
}

/* Mobile decision pairs are a single semantic action group: equal width,
   equal height and side-by-side. Secondary actions remain full-width below. */
@media (max-width:760px){
  .ui-expediente-profile-hero--full-grid{
    width:100%!important;
    margin-inline:0!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-action-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:var(--space-3,12px)!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-decision-actions{
    order:1!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--space-2,8px)!important;
    width:100%!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-decision-actions > :is(form,button,.btn){
    width:100%!important;
    min-width:0!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-decision-actions :is(.btn,form>.btn){
    width:100%!important;
    min-height:48px!important;
    padding-inline:10px!important;
    white-space:normal;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions{
    order:2!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:var(--space-2,8px)!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions > *,
  .ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions form,
  .ui-expediente-profile-hero--full-grid .expediente-hero-secondary-actions :is(.btn,form>.btn){
    width:100%!important;
  }

  /* Mobile structural surfaces share one rail. Internal collections keep their
     own grid/rail rules; only their outer structural surface is normalized. */
  .content > :where(
    .ui-expediente-profile-hero,
    .ui-section-nav,
    .card,
    .surface-panel,
    .section-card,
    .content-surface
  ){
    width:100%!important;
    max-width:100%!important;
    margin-inline:var(--mobile-structural-rail-gutter)!important;
    box-sizing:border-box!important;
  }
}

/* SectionNav is a navigation surface, not the header of the next card. The
   separation belongs to the canonical rail rhythm rather than a local page
   margin. */
.expediente-section-tabs{
  margin-bottom:var(--expediente-rail-gap)!important;
}
@media(max-width:760px){
  .expediente-section-tabs{margin-bottom:var(--space-4,16px)!important;}
}

/* ========================================================================== */
/* DS-2026-038 · Lifecycle Experience Builder Authority                       */
/* ========================================================================== */
.ui-lifecycle-builder{
  display:grid!important;
  grid-template-columns:minmax(240px,.72fr) minmax(0,1.6fr) minmax(280px,.82fr)!important;
  gap:var(--space-4,16px)!important;
  align-items:start!important;
}
.ui-lifecycle-builder > *{min-width:0!important;}
.lifecycle-builder-library,.lifecycle-builder-assignment>.card{position:sticky;top:calc(var(--topbar-height,64px) + var(--space-4,16px));}
.lifecycle-template-list{display:flex;flex-direction:column;gap:var(--space-2,8px);margin-top:var(--space-3,12px);}
.lifecycle-template-card{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3,12px);
  padding:var(--space-3,12px);border:1px solid var(--border-subtle,#e2e8f0);border-radius:var(--radius-lg,16px);
  color:inherit;text-decoration:none;background:var(--surface-card,#fff);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.lifecycle-template-card:hover{background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-card,#fff));}
.lifecycle-template-card.is-selected{background:color-mix(in srgb,var(--color-primario) 10%,var(--surface-card,#fff));border-color:color-mix(in srgb,var(--color-primario) 28%,var(--border-subtle,#e2e8f0));}
.lifecycle-template-icon,.lifecycle-step-index{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md,12px);background:color-mix(in srgb,var(--color-primario) 10%,transparent);color:var(--color-primario);}
.lifecycle-template-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.lifecycle-template-copy small{color:var(--texto-secundario,#64748b)}
.lifecycle-new-template{width:100%;margin-top:var(--space-4,16px);justify-content:center}
.lifecycle-builder-canvas{display:flex;flex-direction:column;gap:var(--space-4,16px);min-width:0}
.lifecycle-experience-cover{position:relative;overflow:hidden;min-height:190px;display:flex;align-items:flex-end;padding:0!important;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primario) 10%,#fff),var(--surface-card,#fff));}
.lifecycle-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.lifecycle-experience-cover:has(.lifecycle-cover-image)::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.54) 55%,rgba(255,255,255,.12));}
.lifecycle-cover-content{position:relative;z-index:1;padding:var(--space-5,24px);max-width:70%}.lifecycle-cover-content h2{margin:4px 0 6px}.lifecycle-cover-content p{margin:0;color:var(--texto-secundario,#64748b)}
.lifecycle-template-form,.lifecycle-add-step-form{margin-top:var(--space-3,12px)}
.lifecycle-steps-card .card-header{margin-bottom:var(--space-3,12px)}
.lifecycle-builder-steps{display:flex;flex-direction:column;gap:var(--space-2,8px);margin-bottom:var(--space-4,16px)}
.lifecycle-builder-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3,12px);align-items:start;padding:var(--space-3,12px);border:1px solid var(--border-subtle,#e2e8f0);border-radius:var(--radius-lg,16px);background:var(--surface-card,#fff)}
.lifecycle-step-index{width:34px;height:34px;font-weight:700}.lifecycle-step-copy{display:flex;flex-direction:column;gap:4px}.lifecycle-step-copy small{color:var(--texto-secundario,#64748b)}
.lifecycle-step-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.lifecycle-step-meta span{padding:4px 8px;border-radius:var(--radius-pill);background:var(--surface-muted,#f1f5f9);font-size:12px;color:var(--texto-secundario,#64748b)}
.lifecycle-person-picker{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto;margin:var(--space-3,12px) 0;padding-right:4px}
.lifecycle-person-option{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-md,12px);cursor:pointer}
.lifecycle-person-option:hover{background:var(--surface-muted,#f8fafc)}.lifecycle-person-option input{width:18px;height:18px;accent-color:var(--color-primario)}
.lifecycle-person-option>span:nth-of-type(2){display:flex;flex-direction:column;min-width:0}.lifecycle-person-option small{color:var(--texto-secundario,#64748b)}.lifecycle-person-option em{font-style:normal;font-size:11px;color:var(--texto-secundario,#64748b)}
.lifecycle-notification-note{display:flex;gap:10px;align-items:flex-start;margin:var(--space-3,12px) 0}.lifecycle-notification-note p{margin:3px 0 0}.lifecycle-send-button{width:100%;justify-content:center}
.employee-flow-experience{overflow:hidden}.employee-flow-cover{width:100%;max-height:220px;object-fit:cover;border-radius:var(--radius-lg,16px);margin-bottom:var(--space-4,16px)}
.employee-flow-header{display:flex;justify-content:space-between;gap:var(--space-4,16px);align-items:flex-start}.employee-flow-header h3{margin:4px 0}.employee-flow-header p{margin:0;color:var(--texto-secundario,#64748b)}
.employee-flow-progress{width:100%;margin:var(--space-3,12px) 0 var(--space-4,16px)}.employee-flow-step-copy{min-width:0}.employee-flow-step-status{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.employee-flow-step-action{display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:320px}.employee-flow-step-action .signature-consent{font-size:12px}
html[data-theme="dark"] .lifecycle-experience-cover:has(.lifecycle-cover-image)::after{background:linear-gradient(90deg,rgba(15,23,42,.95),rgba(15,23,42,.65) 55%,rgba(15,23,42,.18));}
@media(max-width:1180px){.ui-lifecycle-builder{grid-template-columns:minmax(220px,.72fr) minmax(0,1.4fr)!important}.lifecycle-builder-assignment{grid-column:1/-1}.lifecycle-builder-assignment>.card{position:static}.lifecycle-assign-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:var(--space-4,16px)}.lifecycle-assign-card>.card-header{grid-column:1/-1}.lifecycle-person-picker{max-height:260px}}
@media(max-width:760px){.ui-lifecycle-builder{grid-template-columns:1fr!important}.lifecycle-builder-library{position:static}.lifecycle-template-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,82%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.lifecycle-template-card{scroll-snap-align:start}.lifecycle-cover-content{max-width:100%;padding:var(--space-4,16px)}.lifecycle-assign-card{display:block}.employee-flow-header{flex-direction:column}.employee-flow-step-action{max-width:none;width:100%;align-items:stretch}.employee-flow-step-action .btn{width:100%}}

/* ========================================================================== */
/* DS-2026-039 · Lifecycle Builder Acceptance Closure                         */
/* ========================================================================== */
.ui-lifecycle-builder{
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.7fr) minmax(300px,.88fr)!important;
  gap:var(--space-4,16px)!important;
}
.lifecycle-builder-library{padding:var(--space-4,16px)!important}
.lifecycle-library-section{display:flex;flex-direction:column;gap:var(--space-2,8px);margin-top:var(--space-4,16px)}
.lifecycle-library-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--texto-secundario,#64748b)}
.lifecycle-library-label strong{color:var(--texto-principal,#0f172a);font-size:13px}
.lifecycle-library-empty{margin:0;padding:10px 4px;color:var(--texto-secundario,#64748b);font-size:13px;line-height:1.5}
.lifecycle-preset-form{margin:0}
.lifecycle-template-card-button{width:100%;font:inherit;text-align:left;cursor:pointer}
.lifecycle-use-preset{font-size:12px;font-weight:700;color:var(--color-primario);white-space:nowrap}
.lifecycle-template-search{margin-top:var(--space-3,12px)}
.lifecycle-template-search label{display:none}
.lifecycle-editor-nav{position:relative;overflow-x:auto;scrollbar-width:none}
.lifecycle-editor-nav::-webkit-scrollbar{display:none}
.lifecycle-editor-nav .nav-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--surface-muted,#f1f5f9);font-size:11px}
.lifecycle-builder-assignment{min-width:0}
.lifecycle-assign-card{padding:var(--space-4,16px)!important}
.lifecycle-assign-card>.card-header{align-items:flex-start}
.lifecycle-selected-count{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card,#fff));color:var(--color-primario);font-size:11px;font-weight:700;white-space:nowrap}
.lifecycle-person-picker{border-top:1px solid var(--border-subtle,#e2e8f0);border-bottom:1px solid var(--border-subtle,#e2e8f0);padding:var(--space-2,8px) 0;max-height:420px}
.lifecycle-person-option{border:1px solid transparent}
.lifecycle-person-option:has(input:checked){background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card,#fff));border-color:color-mix(in srgb,var(--color-primario) 18%,var(--border-subtle,#e2e8f0))}
.lifecycle-send-config{display:flex;flex-direction:column;gap:var(--space-2,8px)}
.lifecycle-assign-placeholder .ui-empty-state{min-height:260px}
.lifecycle-experience-cover{min-height:210px}
.lifecycle-cover-content{max-width:72%}
.lifecycle-template-form .ui-file-control{min-height:44px;border-radius:var(--radius-md,12px);padding:8px;border:1px solid var(--border-subtle,#e2e8f0);background:var(--surface-card,#fff)}
.lifecycle-template-form .ui-file-control::file-selector-button{border:0;border-radius:calc(var(--radius-md,12px) - 3px);padding:8px 10px;margin-right:8px;background:var(--surface-muted,#f1f5f9);color:var(--texto-principal,#0f172a);font:inherit;cursor:pointer}
@media(max-width:1280px){
  .ui-lifecycle-builder{grid-template-columns:minmax(230px,.7fr) minmax(0,1.55fr)!important}
  .lifecycle-builder-assignment{grid-column:1/-1}
  .lifecycle-builder-assignment>.card{position:static}
  .lifecycle-assign-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);gap:var(--space-4,16px)}
  .lifecycle-assign-card>.card-header{grid-column:1/-1}
  .lifecycle-send-config{align-self:start}
}
@media(max-width:760px){
  .ui-lifecycle-builder{grid-template-columns:1fr!important}
  .lifecycle-library-section .lifecycle-template-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,86%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .lifecycle-preset-form{scroll-snap-align:start}
  .lifecycle-template-card{scroll-snap-align:start}
  .lifecycle-assign-card{display:block}
  .lifecycle-cover-content{max-width:100%}
}

/* =========================================================
   DS-2026-040 · Responsive Reflow & Text Integrity Authority
   v2.8.89
   Root-cause closure for narrow mobile compression: structural grids must
   reflow before text is forced into one-character columns. Expediente hero
   resets every desktop track at the mobile breakpoint; Document Automation
   libraries/importers stack as full-width structural surfaces.
   ========================================================= */
:root{
  --mobile-readable-inline-min:12ch;
}

/* Text must wrap by words, never by arbitrary characters because a parent
   retained a desktop track. These are safe, canonical text-bearing surfaces. */
:where(
  .ui-expediente-profile-hero,
  .context-info-card,
  .docauto-template-toolbar,
  .docauto-editor-layout,
  .docauto-list-card
) :where(h1,h2,h3,p,small,strong,label,span){
  word-break:normal;
  overflow-wrap:break-word;
}

@media(max-width:760px){
  /* The v2.8.84 desktop grid uses !important, so mobile must explicitly reset
     the track definition with the same authority. This was the direct cause
     of the compressed employee identity column seen at runtime. */
  .ui-expediente-profile-hero--full-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    column-gap:0!important;
    row-gap:var(--space-4,16px)!important;
  }
  .ui-expediente-profile-hero--full-grid > :is(
    .expediente-hero-identity,
    .expediente-hero-status,
    .expediente-hero-operations
  ){
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-inline:0!important;
    border-inline:0!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-identity{
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    align-items:start!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-avatar-stack{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-copy{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-copy h1,
  .ui-expediente-profile-hero--full-grid .expediente-hero-meta{
    min-width:var(--mobile-readable-inline-min);
    max-width:100%!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-meta{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:4px 0!important;
  }
}

@media(max-width:420px){
  .ui-expediente-profile-hero--full-grid .expediente-hero-meta{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:3px!important;
  }
  .ui-expediente-profile-hero--full-grid .expediente-hero-meta span{
    min-width:0!important;
    width:auto!important;
  }
}

@media(max-width:620px){
  /* Generic structural grids stack on narrow mobile. Specialized KPI
     collections keep their own canonical mobile density rules. */
  :where(.content,.main) :is(.grid-2,.grid-3,.grid-4,.grid-5):not(.card-collection){
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Document Automation: library and importer are structural siblings, not
     KPIs. They must stack before copy becomes unreadable. */
  .docauto-template-toolbar,
  .docauto-editor-layout,
  .docauto-quick-grid{
    min-width:0!important;
    max-width:100%!important;
  }
  .docauto-template-toolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
  }
  .docauto-template-picker{
    width:100%!important;
    min-width:0!important;
  }
  .docauto-template-picker select{
    width:100%!important;
    min-width:0!important;
  }
  .docauto-editor-layout{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .docauto-field-dock{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .docauto-template-toolbar-copy,
  .docauto-template-toolbar-copy :where(h2,p),
  .context-info-card .card-header > div{
    min-width:0!important;
    max-width:100%!important;
  }
}

/* ========================================================================
   DS-2026-041 · Lifecycle Builder Guided Editing & Assignment Closure
   Design System 2.9.12 · Flōow 2.8.92
   ======================================================================== */
.lifecycle-create-card{padding:var(--space-5,20px)!important}
.lifecycle-create-form{display:flex;flex-direction:column;gap:var(--space-5,20px)}
.lifecycle-form-section{display:flex;flex-direction:column;gap:var(--space-4,16px);padding-top:var(--space-4,16px);border-top:1px solid var(--border-subtle,#e2e8f0)}
.lifecycle-form-section:first-of-type{padding-top:0;border-top:0}
.lifecycle-form-section-head{display:flex;align-items:flex-start;gap:var(--space-3,12px)}
.lifecycle-form-section-head h3{margin:0 0 4px;font-size:var(--type-component-title-size,18px);line-height:1.3}
.lifecycle-form-section-head p{margin:0;color:var(--texto-secundario,#64748b);font-size:var(--type-body-small-size,14px)}
.lifecycle-form-index{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:var(--radius-lg,16px);background:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card,#fff));color:var(--color-primario);font-weight:700}
.lifecycle-experience-form-grid{display:grid;grid-template-columns:minmax(240px,.82fr) minmax(0,1.18fr);gap:var(--space-4,16px);align-items:stretch}
.lifecycle-cover-dropzone{min-width:0;min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border:1px dashed color-mix(in srgb,var(--color-primario) 30%,var(--border-subtle,#e2e8f0));border-radius:var(--radius-xl,20px);background:color-mix(in srgb,var(--color-primario) 4%,var(--surface-card,#fff));padding:var(--space-5,20px);cursor:pointer;transition:background .18s ease,border-color .18s ease}
.lifecycle-cover-dropzone:hover{background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card,#fff));border-color:color-mix(in srgb,var(--color-primario) 50%,var(--border-subtle,#e2e8f0))}
.lifecycle-cover-dropzone:focus-within{outline:3px solid color-mix(in srgb,var(--color-primario) 24%,transparent);outline-offset:2px}
.lifecycle-cover-dropzone input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.lifecycle-cover-dropzone-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-lg,16px);background:color-mix(in srgb,var(--color-primario) 10%,var(--surface-card,#fff));color:var(--color-primario)}
.lifecycle-cover-dropzone>span:not(.lifecycle-cover-dropzone-icon):not(.lifecycle-cover-file){color:var(--texto-secundario,#64748b);font-size:var(--type-body-small-size,14px)}
.lifecycle-cover-file{margin-top:4px;display:inline-flex;max-width:100%;padding:8px 12px;border-radius:var(--radius-md,12px);background:var(--surface-card,#fff);border:1px solid var(--border-subtle,#e2e8f0);font-size:var(--type-label-size,13px);font-weight:700;overflow-wrap:anywhere}
.lifecycle-experience-copy{display:flex;flex-direction:column;gap:var(--space-3,12px)}
.lifecycle-progress-toggle{margin:0!important}
.lifecycle-create-actions{display:flex;justify-content:flex-end;gap:var(--space-3,12px);padding-top:var(--space-2,8px)}
.lifecycle-create-actions .btn{min-width:160px}
.lifecycle-step-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3,12px)}
.lifecycle-step-heading>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.lifecycle-step-meta-human{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lifecycle-step-meta-human>span{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border-radius:var(--radius-pill);background:var(--surface-muted,#f1f5f9);color:var(--texto-secundario,#64748b);font-size:12px;font-weight:500}
.lifecycle-step-editor{grid-column:1/-1;margin-top:var(--space-4,16px);padding-top:var(--space-4,16px);border-top:1px solid var(--border-subtle,#e2e8f0)}
.lifecycle-step-editor-actions{display:flex;justify-content:flex-end;gap:var(--space-2,8px);flex-wrap:wrap}
.lifecycle-starter-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3,12px);margin-bottom:var(--space-4,16px)}
.lifecycle-starter-materialize{display:flex;align-items:center;gap:var(--space-3,12px);flex-wrap:wrap}
.lifecycle-inline-help{color:var(--texto-secundario,#64748b);font-size:var(--type-body-small-size,14px);max-width:560px}
.lifecycle-person-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.lifecycle-person-copy strong,.lifecycle-person-copy small{overflow-wrap:anywhere}
.lifecycle-person-no-results{padding:var(--space-4,16px);text-align:center;color:var(--texto-secundario,#64748b)}
.lifecycle-person-no-results strong{display:block;color:var(--texto-principal,#0f172a);margin-bottom:4px}
.lifecycle-person-empty{padding:var(--space-4,16px)!important}
.lifecycle-person-option em{font-style:normal;white-space:normal;text-align:right;max-width:110px;font-size:11px;color:var(--texto-secundario,#64748b)}

@media(max-width:900px){
  .lifecycle-experience-form-grid{grid-template-columns:1fr}
  .lifecycle-cover-dropzone{min-height:180px}
  .lifecycle-starter-summary-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .lifecycle-create-card{padding:var(--space-4,16px)!important}
  .lifecycle-create-actions{display:grid;grid-template-columns:1fr 1fr}
  .lifecycle-create-actions .btn{min-width:0;width:100%}
  .lifecycle-step-heading{align-items:stretch;flex-direction:column}
  .lifecycle-step-heading .btn{align-self:flex-start}
  .lifecycle-step-editor-actions{display:grid;grid-template-columns:1fr}
  .lifecycle-step-editor-actions .btn{width:100%}
}
.lifecycle-cover-dropzone-compact{min-height:124px;padding:var(--space-3,12px)}

/* DS-2026-041 structural hygiene: existing compliance bulk action reflow moved out of module CSS. */
.compliance-bulk-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3,12px);flex-wrap:wrap}
.compliance-bulk-actions [data-signature-selected-count]{white-space:nowrap}
@media (max-width:860px){.compliance-bulk-actions{width:100%;justify-content:stretch}.compliance-bulk-actions .btn{flex:1 1 100%}}

/* DS-2026-042 · Shared identity workspace and lifecycle composition authority. */
/* Flōow 2.8.98 — Lifecycle Builder layout closure.
   Canonical LifecycleExperienceBuilder composition, consolidated under DS-2026-042. */
.lifecycle-create-basic-grid>.campo.span-2{grid-column:1/-1}
.lifecycle-experience-stack{display:grid;gap:16px;min-width:0}
.lifecycle-welcome-title{width:100%;min-width:0}
.lifecycle-welcome-title input{width:100%}
.lifecycle-experience-content-grid{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:16px;align-items:stretch;min-width:0}
.lifecycle-welcome-message{min-width:0}
.lifecycle-welcome-message .lifecycle-rich-editor{height:100%;min-height:190px;display:flex;flex-direction:column;border-radius:var(--radius-md);clip-path:inset(0 round var(--radius-md))}
.lifecycle-welcome-message .lifecycle-rich-surface{flex:1;min-height:132px}
.lifecycle-rich-editor{border-radius:var(--radius-md)}
.lifecycle-template-card{cursor:pointer;position:relative;z-index:0}
.lifecycle-template-card:focus-visible{outline:2px solid var(--color-primario);outline-offset:2px}
@media(max-width:980px){.lifecycle-experience-content-grid{grid-template-columns:1fr}.lifecycle-cover-dropzone{min-height:170px}}
@media(max-width:620px){.lifecycle-experience-stack,.lifecycle-experience-content-grid{gap:12px}.lifecycle-welcome-message .lifecycle-rich-editor{min-height:160px}}

/* Flōow 2.8.133 — Standalone Validation visual contract restoration.
   Canonical IdentityValidationWorkspace, consolidated under DS-2026-042. */
.validation-value-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}.validation-value-strip>div{display:flex;gap:10px;align-items:center;padding:14px 16px;border:1px solid var(--line-soft);border-radius:var(--radius-card);background:var(--surface-card)}.validation-value-strip svg{flex:0 0 auto}.validation-value-strip span{display:grid;gap:2px}.validation-value-strip small{color:var(--text-muted)}.validation-workspace{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:16px;align-items:start}.validation-capture{min-width:0}.validation-capture form{display:grid;gap:12px;width:100%;max-width:none}.validation-submit{width:100%;justify-content:center}.validation-result{min-height:430px}.validation-result-banner{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;border-radius:var(--radius-card);margin-bottom:14px}.validation-result-banner p{margin:3px 0 0}.validation-result-banner.is-success{background:var(--semantic-success-soft)}.validation-result-banner.is-warning{background:var(--semantic-warning-soft)}.validation-result-banner.is-danger{background:var(--semantic-danger-soft)}.validation-result-banner.is-info{background:var(--semantic-info-soft)}.validation-folio{display:grid;text-align:right}.validation-source-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}.validation-source-grid>div{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line-soft);border-radius:var(--radius-card);padding:12px}.validation-next{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line-soft);padding-top:16px;margin-top:16px}.validation-next p{margin:3px 0 0;color:var(--text-muted)}.validation-next>div:last-child{display:flex;gap:8px;align-items:center}.validation-history{margin-top:16px}.validation-risk{margin-top:14px}.validation-field-group{min-width:0;margin:0;padding:0 0 16px;border:0;border-bottom:1px solid var(--line-soft)}.validation-field-group:last-of-type{padding-bottom:4px;border-bottom:0}.validation-field-group legend{width:100%;padding:0;margin:0 0 3px;font-size:var(--type-body);font-weight:700;color:var(--text-main)}.validation-field-group>p{margin:0 0 12px;color:var(--text-muted);font-size:var(--type-support);line-height:1.45}.validation-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.validation-fields .form-grupo{min-width:0;margin:0}.validation-fields :is(input,select,textarea){display:block;width:100%!important;max-width:none!important;min-width:0;box-sizing:border-box}.validation-field-span{grid-column:1/-1}
@media(max-width:980px){.validation-value-strip{grid-template-columns:repeat(2,1fr)}.validation-workspace{grid-template-columns:1fr}.validation-result{min-height:0}}
@media(max-width:760px){.validation-workspace{display:block}.validation-result{margin-top:14px}.validation-capture{width:100%;max-width:none}.validation-capture form{gap:16px}.validation-fields{grid-template-columns:1fr;gap:12px}.validation-field-span{grid-column:auto}.validation-field-group{padding-bottom:15px}.validation-field-group>p{margin-bottom:10px}.validation-capture .form-grupo :is(input,select,textarea){width:100%!important;max-width:none!important;min-width:100%!important}.validation-submit{min-height:48px}}
@media(max-width:640px){.validation-value-strip{display:flex;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.validation-value-strip>div{min-width:78%;scroll-snap-align:start}.validation-source-grid{grid-template-columns:1fr}.validation-result-banner{grid-template-columns:auto 1fr}.validation-folio{grid-column:1/-1;text-align:left}.validation-next{align-items:stretch;flex-direction:column}.validation-next>div:last-child{flex-wrap:wrap}}

/* =========================================================
   v2.8.139 · Identity Validation Evidence Bridge
   Validaciones y Expediente 360 comparten evidencia y detalle.
   ========================================================= */
.validation-evidence-context{margin:0 0 var(--space-3);align-items:center}
.validation-evidence-context>svg{flex:0 0 auto}
.validation-evidence-status{margin-left:auto;align-self:center}
.validation-workspace.has-result{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}
.validation-workspace.has-result .validation-result{min-width:0}
.validation-result-banner .module-eyebrow{display:block;margin-bottom:3px}
.validation-result-banner strong{display:block}
.validation-discrepancy-summary{margin-top:var(--space-3)}
.identity-validation-matrix-wrap{margin-top:2px}
.identity-validation-matrix{min-width:820px}
.identity-validation-matrix th:first-child{min-width:150px}
.identity-validation-matrix td:nth-child(2){min-width:190px}
.identity-source-cell{display:flex;align-items:center;gap:var(--space-2);min-width:112px}
.identity-source-detail-trigger{width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-soft);color:var(--text-muted);display:grid;place-items:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}
.identity-source-detail-trigger:hover{background:var(--surface-card);border-color:var(--brand-primary);color:var(--brand-primary)}
.identity-source-detail-trigger:active{transform:scale(.96)}
.identity-source-detail-trigger:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
.identity-source-detail-dialog{width:min(100%,720px)}
.identity-source-detail-body{display:grid;gap:var(--space-4)}
.identity-source-detail-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--space-3);align-items:end}
.identity-source-detail-heading>div:not(.identity-source-detail-status){display:grid;gap:4px}
.identity-source-detail-heading span:not(.status-pill){font-size:var(--type-caption,.72rem);color:var(--text-muted)}
.identity-source-detail-heading strong{font-size:var(--type-body,.9rem);overflow-wrap:anywhere}
.identity-source-detail-status{align-self:center;justify-self:end}
.identity-source-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.identity-source-detail-value{display:grid;gap:7px;min-width:0;padding:var(--space-4);border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-soft)}
.identity-source-detail-value span{font-size:var(--type-caption,.72rem);color:var(--text-muted)}
.identity-source-detail-value small{font-size:var(--type-caption,.72rem);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.identity-source-detail-value strong{font-size:var(--type-body,.9rem);line-height:1.45;overflow-wrap:anywhere}
.identity-source-detail-explanation{margin:0}
.identity-source-detail-footnote{font-size:var(--type-caption,.72rem);color:var(--text-muted)}
.identity-source-detail-dialog .app-modal-footer{border-top:1px solid var(--line-soft);padding-top:var(--space-3)}

@media(max-width:980px){
  .validation-workspace.has-result{grid-template-columns:1fr}
}
@media(max-width:760px){
  .validation-evidence-context{align-items:flex-start}
  .validation-evidence-status{grid-column:2;margin-left:0;justify-self:start}
  .validation-workspace.has-result{display:flex;flex-direction:column;gap:14px}
  .validation-workspace.has-result .validation-result{order:1;margin-top:0}
  .validation-workspace.has-result .validation-capture{order:2}
  .identity-source-cell{justify-content:space-between;min-width:0}
  .identity-source-detail-trigger{width:44px;height:44px;min-width:44px;min-height:44px}
  .identity-source-detail-heading{grid-template-columns:1fr 1fr}
  .identity-source-detail-status{grid-column:1/-1;justify-self:start}
  .identity-source-detail-grid{grid-template-columns:1fr}
  .identity-source-detail-dialog .app-modal-footer{align-items:stretch}
  .identity-source-detail-footnote{order:2}
}
@media(max-width:420px){
  .identity-source-detail-heading{grid-template-columns:1fr}
  .identity-source-detail-status{grid-column:1}
}

/* 2.8.147: identity workspace composition; canonical controls and surfaces retained. */
.validation-workspace.validation-workspace--stacked{grid-template-columns:minmax(0,1fr)}
.validation-workspace--stacked .validation-capture form{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.validation-workspace--stacked .validation-capture form>:not(fieldset){grid-column:1/-1}
.validation-workspace--stacked .validation-field-group{border:0;padding:0}
.validation-workspace--stacked .validation-result{min-width:0;min-height:0}
.validation-connection-notice,.validation-evidence-context{height:auto;margin-bottom:var(--space-4)}
.validation-evidence-context .validation-evidence-status{margin-top:var(--space-2);margin-left:0}
.identity-review-panel{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4)}
.identity-review-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.identity-review-actions form{margin:0}
.identity-query-options{margin-block:var(--space-4)}
.identity-query-options summary{cursor:pointer;padding-block:var(--space-3)}
.identity-query-options form{margin-top:var(--space-3)}
.identity-connection-form{display:grid;gap:var(--space-4)}
.identity-connection-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.identity-connection-fields .form-grupo{min-width:0}
.identity-connection-form .form-grupo input{width:100%;max-width:100%}
.identity-connection-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.identity-connection-status{display:grid;gap:var(--space-3)}
@media(max-width:760px){
 .validation-workspace--stacked .validation-capture form,.identity-connection-fields{grid-template-columns:minmax(0,1fr)}
 .identity-review-panel>div,.identity-review-actions{width:100%}
 .identity-review-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .identity-review-actions .btn,.identity-connection-actions .btn{width:100%}
 .identity-connection-actions{display:grid;grid-template-columns:minmax(0,1fr)}
}

.identity-matrix-mobile{display:none}
.identity-source-accordion{border-bottom:1px solid var(--line-soft);padding-block:var(--space-3)}
.identity-source-accordion summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);cursor:pointer;list-style:none;padding-block:var(--space-2)}
.identity-source-accordion summary>strong{margin-right:auto}
.identity-accordion-minus,.identity-source-accordion[open] .identity-accordion-plus{display:none}
.identity-source-accordion[open] .identity-accordion-minus{display:inline-flex}
.identity-mobile-datum{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-3)}
.identity-mobile-datum>div{min-width:0;overflow-wrap:anywhere}
.identity-mobile-datum p{margin-block:var(--space-1)}
@media(max-width:760px){.identity-matrix-desktop{display:none}.identity-matrix-mobile{display:block}}

/* v2.8.163 · Certified wide-data RHMotionModal variant.
   For evidence/comparison tables that require horizontal reading room. */
.modal-overlay > .modal-card.modal-card--wide-data{
  width:min(1040px,calc(100vw - 64px));
  max-width:min(1040px,calc(100vw - 64px));
  max-height:min(90dvh,920px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modal-card--wide-data > .modal-header{flex:0 0 auto;}
.modal-card--wide-data > .validation-detail-modal-body{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
}
.validation-detail-modal-body .validation-result{margin:0;}
.validation-detail-loader{
  min-height:260px;
  display:grid;
  place-items:center;
  padding:32px;
}
.validation-detail-loader[hidden]{display:none!important;}
.validation-detail-loader__brand{width:min(150px,42vw);}
@media(max-width:860px){
  .modal-overlay > .modal-card.modal-card--wide-data{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))!important;
  }
}

/* ============================================================
   Design System Authority · ChoiceCard
   Canonical selectable option for radio/checkbox decisions.
   Geometry, spacing, states and responsive live here; modules
   may provide only content and semantic context.
   ============================================================ */
:root{
  --choice-card-gap:var(--space-3,12px);
  --choice-card-padding-y:var(--space-3,12px);
  --choice-card-padding-x:var(--space-4,16px);
  --choice-card-radius:var(--radius-md,12px);
  --choice-card-icon-size:36px;
}
.choice-card-group{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--choice-card-gap);
  width:100%;
}
.choice-card{
  position:relative;
  display:grid;
  grid-template-columns:auto var(--choice-card-icon-size) minmax(0,1fr) auto;
  align-items:center;
  gap:var(--icon-text-gap,var(--space-3,12px));
  min-width:0;
  min-height:72px;
  padding:var(--choice-card-padding-y) var(--choice-card-padding-x);
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--choice-card-radius);
  background:var(--surface-card);
  color:var(--text-main);
  cursor:pointer;
  transition:background-color var(--motion-fast,.14s) ease,border-color var(--motion-fast,.14s) ease,box-shadow var(--motion-fast,.14s) ease;
}
.choice-card>input:is([type="radio"],[type="checkbox"]){
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--color-primario);
}
.choice-card-icon{
  display:grid;
  place-items:center;
  width:var(--choice-card-icon-size);
  height:var(--choice-card-icon-size);
  border-radius:var(--radius-sm,10px);
  background:var(--surface-subtle);
  color:var(--text-secondary);
}
.choice-card-copy{display:grid;gap:var(--space-1,4px);min-width:0}
.choice-card-copy strong{font-size:var(--type-label);line-height:1.25;color:var(--text-main)}
.choice-card-copy small{font-size:var(--type-caption);line-height:1.4;color:var(--text-secondary)}
.choice-card-info{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--text-secondary);cursor:help}
.choice-card-info::after{content:attr(data-tooltip);position:absolute;right:0;bottom:calc(100% + var(--space-2));z-index:20;width:max-content;max-width:260px;padding:8px 10px;border-radius:var(--radius-sm,10px);background:var(--text-primary);color:var(--surface-card);font-size:var(--type-caption);line-height:1.35;opacity:0;visibility:hidden;transform:translateY(3px);transition:.15s ease;pointer-events:none}
.choice-card-info:hover::after,.choice-card-info:focus-visible::after{opacity:1;visibility:visible;transform:none}
.choice-card:has(>input:checked){border-color:color-mix(in srgb,var(--color-primario) 58%,var(--border-subtle));background:var(--interactive-selected,var(--brand-soft));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primario) 18%,transparent)}
.choice-card:has(>input:checked) .choice-card-icon{background:color-mix(in srgb,var(--color-primario) 12%,var(--surface-card));color:var(--color-primario)}
.choice-card:focus-within{border-color:var(--color-primario);box-shadow:0 0 0 var(--interactive-focus-width,3px) var(--focus-ring)}
@media(hover:hover){.choice-card:hover{border-color:var(--interactive-border-hover);background:var(--interactive-hover)}}
html[data-theme="dark"] .choice-card{background:var(--surface-card);border-color:var(--border-subtle)}
html[data-theme="dark"] .choice-card:has(>input:checked){background:var(--interactive-selected);border-color:color-mix(in srgb,var(--color-primario) 55%,var(--border-subtle))}
@media(max-width:860px){.choice-card-group{grid-template-columns:1fr}.choice-card{min-height:68px}}
@media(max-width:520px){.choice-card{grid-template-columns:auto 32px minmax(0,1fr) auto;padding:var(--space-3,12px);gap:var(--space-2,8px)}.choice-card-icon{width:32px;height:32px}}

/* ========================================================================
   DS-2026-044 · ContextInfoCard Geometry & Collection Authority
   Design System 2.9.15 · Flōow 2.8.178
   Root-cause closure for clipped copy, uneven 3+1 collections and module-local
   sizing. ContextInfoCard owns intrinsic height; ContextInfoGrid owns layout.
   ======================================================================== */
.context-info-grid{
  width:100%!important;
  grid-auto-flow:row!important;
  grid-auto-rows:1fr!important;
  align-items:stretch!important;
}
.context-info-grid > .context-info-card{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:var(--governance-context-min-height)!important;
  height:auto!important;
  align-self:stretch!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  padding:var(--space-4)!important;
}
.context-info-card > :last-child{
  min-width:0!important;
  align-self:start!important;
}
.context-info-card :where(h3,strong,p,small){
  max-width:100%!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.context-info-card :where(p,small){
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
/* Four contextual principles are one collection, never an orphaned 3+1 row. */
.context-info-grid:has(> .context-info-card:nth-child(4)):not(:has(> .context-info-card:nth-child(5))){
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
@media(max-width:1180px) and (min-width:761px){
  .context-info-grid:has(> .context-info-card:nth-child(4)):not(:has(> .context-info-card:nth-child(5))){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  .context-info-grid{
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:auto!important;
  }
  .context-info-grid > .context-info-card{
    min-height:auto!important;
  }
}

/* DS-2026-045 · FilterBar + TemplateCard + EqualHeightGrid Authority */
.ui-filter-surface{padding:var(--space-4,16px)}
.ui-filter-bar{display:grid;align-items:end;gap:var(--space-3,12px);min-width:0}
.ui-filter-bar>.form-grupo{margin:0;min-width:0}
.ui-filter-bar :is(input,select,textarea,.btn){min-height:var(--control-height,44px)}
.ui-filter-bar-search-state{grid-template-columns:minmax(280px,1fr) minmax(200px,280px) auto;margin-bottom:var(--space-4,16px)}
.ui-filter-bar-dates{grid-template-columns:repeat(2,minmax(180px,260px)) auto}
.ui-filter-bar>.btn{justify-self:start;white-space:nowrap}
.ui-context-action-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-4,16px)}
.ui-template-card{display:flex;flex-direction:column;gap:var(--space-3,12px);min-width:0;height:100%;padding:var(--space-4,16px)}
.ui-template-card-tags{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-2,8px);flex-wrap:wrap;width:auto;min-width:0}
.ui-template-card-tags :is(.badge,.status-pill){width:auto;max-width:100%;flex:0 0 auto}
.ui-template-card>form,.ui-template-card>.btn,.ui-template-card>a.btn{margin-top:auto;align-self:flex-start}
.ui-equal-height-grid{display:grid;align-items:stretch;gap:var(--space-4,16px)}
.ui-equal-height-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ui-section-nav.analytics-section-nav{margin-bottom:var(--space-4,16px)}
@media(max-width:1024px){.ui-filter-bar-search-state{grid-template-columns:minmax(0,1fr) minmax(180px,.5fr) auto}.ui-equal-height-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.ui-filter-bar-search-state,.ui-filter-bar-dates{grid-template-columns:1fr}.ui-filter-bar>.btn{width:100%;justify-content:center}.ui-context-action-bar{grid-template-columns:1fr}.ui-equal-height-grid-3{grid-template-columns:1fr}}

/* =========================================================
   DS-2026-046 · DataTable Comfortable Density Authority
   v2.8.181
   Multiline operational records receive canonical vertical breathing room
   without fixed row heights or module-owned cell geometry.
   ========================================================= */
:root{
  --data-table-comfortable-cell-y:var(--space-4);
  --data-table-comfortable-line-height:1.48;
  --data-table-followup-gap:var(--space-4);
}
:where(.data-table,.table-enterprise).data-table-comfortable > tbody > tr > td{
  padding-block:var(--data-table-comfortable-cell-y);
  line-height:var(--data-table-comfortable-line-height);
  vertical-align:middle;
}
:where(.data-table,.table-enterprise).data-table-comfortable > tbody > tr > td :where(strong,.status-pill,.btn){
  vertical-align:middle;
}
.data-table-followup{
  margin-top:var(--data-table-followup-gap);
}
@media (max-width:760px){
  :root{--data-table-comfortable-cell-y:var(--space-3)}
}

/* DS-2026-047 · Analytics narrative hierarchy: ChartCard + InsightCard + PeriodSelector */
.analytics-period-selector{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
}
.analytics-period-summary{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  min-width:max-content;
  margin-right:auto;
}
.analytics-period-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
  color:var(--text-secondary);
}
.analytics-period-summary strong{
  display:block;
  color:var(--text-main);
  line-height:1.35;
}
.analytics-period-presets{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.analytics-period-custom{
  position:relative;
}
.analytics-period-custom>summary{
  list-style:none;
  cursor:pointer;
}
.analytics-period-custom>summary::-webkit-details-marker{display:none}
.analytics-period-custom[open] .analytics-period-form{
  display:grid;
}
.analytics-period-form{
  position:absolute;
  z-index:var(--z-dropdown,30);
  right:0;
  top:calc(100% + var(--space-2));
  width:min(560px,calc(100vw - 48px));
  grid-template-columns:repeat(2,minmax(0,1fr)) auto;
  align-items:end;
  gap:var(--space-3);
  padding:var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
  box-shadow:var(--shadow-lg);
}
html[data-theme="dark"] .analytics-period-selector,
html[data-theme="dark"] .analytics-period-form{
  background:var(--surface-card);
}
@media(max-width:980px){
  .analytics-period-selector{flex-wrap:wrap}
  .analytics-period-summary{flex:1 1 100%}
}
@media(max-width:767px){
  .analytics-period-selector{align-items:stretch;padding:var(--space-3)}
  .analytics-period-presets{overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x proximity;scrollbar-width:none}
  .analytics-period-presets::-webkit-scrollbar{display:none}
  .analytics-period-presets>a{flex:0 0 auto;scroll-snap-align:start}
  .analytics-period-custom{width:100%}
  .analytics-period-custom>summary{width:100%;justify-content:center}
  .analytics-period-form{position:static;width:100%;grid-template-columns:1fr;margin-top:var(--space-2);box-shadow:none}
}

/* DS-2026-048 · ChartCard responsive plot + contained native interaction */
.analytics-chart-panel .analytics-chart-scroll{
  width:100%;
  min-width:0;
  overflow:hidden;
}
.analytics-chart-panel .analytics-bar-chart--responsive{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:auto;
  aspect-ratio:520 / 220;
}
.analytics-chart-panel .analytics-bar-chart--responsive text{
  fill:currentColor;
  fill-opacity:.62;
  font-size:11px;
}
.analytics-chart-panel .analytics-legend{
  width:100%;
}
@media(max-width:767px){
  .analytics-chart-panel .analytics-bar-chart--responsive{
    min-width:420px;
  }
  .analytics-chart-panel .analytics-chart-scroll{
    overflow-x:auto;
  }
}

/* =========================================================
   DS-2026-049 · Responsive viewport + independent panels + compact Dropzone
   ========================================================= */
:root{
  --dropzone-compact-min-height:132px;
  --dropzone-compact-padding:var(--space-4,16px);
}

/* IndependentPanelGrid: sibling panels align at the top and keep intrinsic height. */
.ui-independent-panel-grid{
  align-items:start!important;
  align-content:start!important;
  grid-auto-rows:auto!important;
}
.ui-independent-panel-grid > *{
  min-width:0!important;
  align-self:start!important;
}
.validation-command-center,
.payroll-suite-panels{
  align-items:start!important;
  align-content:start!important;
  grid-auto-rows:auto!important;
}
.validation-command-center > *,
.payroll-suite-panels > *{
  min-width:0!important;
  align-self:start!important;
}

/* Canonical compact evidence Dropzone. */
.ui-dropzone{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:var(--space-2,8px);
  padding:var(--space-5,20px);
  border:1px dashed var(--border-default)!important;
  border-radius:var(--radius-xl,20px);
  background:color-mix(in srgb,var(--color-primario) 4%,var(--surface-card));
  cursor:pointer;
}
.ui-dropzone--compact{
  min-height:var(--dropzone-compact-min-height);
  padding:var(--dropzone-compact-padding);
}
.ui-dropzone > input[type="file"]{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}
.ui-dropzone:focus-within{
  outline:var(--interactive-focus-width,3px) solid var(--focus-ring);
  outline-offset:2px;
}
.ui-dropzone > strong{color:var(--text-main);font-size:var(--type-label);line-height:1.3}
.ui-dropzone > span:last-child{color:var(--text-secondary);font-size:var(--type-caption);line-height:1.4;max-width:32rem}
html[data-theme="dark"] .ui-dropzone{background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card))}

/* Responsive containment: component-owned scrolling must never widen the page axis. */
:where(.validation-command-center,.payroll-suite-panels,.choice-card-group,.choice-card,.ui-section-nav,.data-table-surface,.responsive-table-wrap,.table-responsive){
  min-width:0;
  max-width:100%;
}
:where(.validation-command-center,.payroll-suite-panels){
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:860px){
  :where(.validation-command-center,.payroll-suite-panels){grid-template-columns:minmax(0,1fr)!important}
  .ui-dropzone--compact{min-height:116px}
}


/* ========================================================================
   DS-2026-050 · Audit Quantification + Support Form Surface Authority
   Design System 2.9.21 · Flōow 2.8.185
   Restores canonical QuantificationCard surfaces in Audit and makes complex
   modal forms consume one containing Card; ContextInfoCard remains nested
   guidance inside that surface.
   ======================================================================== */
/* ui-quantification-card is a canonical alias used by system/admin views. */
.ui-quantification-card{
  min-width:0;
  box-sizing:border-box;
  border:0!important;
  border-radius:var(--radius-card,var(--radius-xl,20px))!important;
  background:var(--frost-light-bg,var(--surface-card))!important;
  box-shadow:var(--frost-light-shadow,var(--surface-elevation-card))!important;
  padding:var(--quantification-padding,var(--space-4,16px))!important;
}
html[data-theme="dark"] .ui-quantification-card{
  background:var(--frost-dark-bg,var(--surface-card))!important;
  box-shadow:var(--frost-dark-shadow,var(--surface-elevation-card))!important;
}
.audit-summary-grid .ui-quantification-card{
  width:100%;
  height:auto;
  align-self:stretch;
}

/* ============================================================
   DS-2026-051 · Mobile Bottom Navigation Visual Contract
   Geometry remains owned by Mobile Shell; this Authority owns the
   certified compact frost/glass composition and five-slot layout.
   Prevents flex fallback from wrapping "Más" into a second row.
   ============================================================ */
@media (max-width:860px){
  .bottom-nav-movil{
    --mobile-bottom-nav-h:72px;
    background:var(--glass-bg)!important;
    border:1px solid var(--glass-border)!important;
    box-shadow:var(--glass-shadow)!important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%)!important;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%)!important;
  }
  .bottom-nav-movil.has-global-create{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    gap:2px!important;
  }
  .bottom-nav-movil.has-global-create::after{
    display:none!important;
    content:none!important;
  }
  .bottom-nav-movil > :is(a,button){
    min-width:0!important;
    min-height:52px!important;
    max-height:60px!important;
    margin:0!important;
  }
  .bottom-nav-movil.has-global-create > :is(a,button){
    order:initial!important;
  }
  .bottom-nav-movil .bottom-nav-create-icon{
    width:58px!important;
    height:58px!important;
    margin-top:-32px!important;
  }
}
/* ============================================================
   DS-2026-052 · Mobile Bottom Navigation deterministic slot contract
   The shell owns viewport geometry only. Authority owns composition.
   Explicit slots make legacy order/flex rules unable to push “Más”
   into an implicit second row.
   ============================================================ */
@media (max-width:860px){
  .bottom-nav-movil.has-global-create{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:minmax(52px,1fr)!important;
    grid-auto-rows:0!important;
    grid-auto-flow:column!important;
    align-items:center!important;
    min-height:var(--mobile-bottom-nav-h,72px)!important;
    max-height:calc(var(--mobile-bottom-nav-h,72px) + 8px)!important;
  }
  .bottom-nav-movil.has-global-create > :is(a,button){
    grid-row:1!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:52px!important;
    max-height:60px!important;
    flex:none!important;
    order:initial!important;
    align-self:center!important;
  }
  .bottom-nav-movil.has-global-create > a:nth-of-type(1){grid-column:1!important}
  .bottom-nav-movil.has-global-create > a:nth-of-type(2){grid-column:2!important}
  .bottom-nav-movil.has-global-create > .bottom-nav-create{grid-column:3!important}
  .bottom-nav-movil.has-global-create > a:nth-of-type(3){grid-column:4!important}
  .bottom-nav-movil.has-global-create > [data-mobile-more-toggle]{grid-column:5!important}
  .bottom-nav-movil.has-global-create > .bottom-nav-create{
    background:transparent!important;
    border:0!important;
    transform:none!important;
  }
}

@media (max-width:420px){
  .bottom-nav-movil .bottom-nav-create-icon{
    width:56px!important;
    height:56px!important;
    margin-top:-31px!important;
  }
}

/* ============================================================
   DS-2026-053 · Global Create protrusion contract
   The central quick-action button intentionally protrudes above the
   compact frost navigation surface. Viewport geometry stays in Mobile
   Shell; Authority owns protrusion, stacking and clipping behavior.
   ============================================================ */
@media (max-width:860px){
  .bottom-nav-movil.has-global-create{
    overflow:visible!important;
  }
  .bottom-nav-movil.has-global-create > .bottom-nav-create{
    position:relative!important;
    z-index:3!important;
    overflow:visible!important;
    align-self:center!important;
  }
  .bottom-nav-movil.has-global-create > .bottom-nav-create .bottom-nav-create-icon{
    position:relative!important;
    z-index:4!important;
    margin-top:-32px!important;
    flex:0 0 auto!important;
  }
}
@media (max-width:420px){
  .bottom-nav-movil.has-global-create > .bottom-nav-create .bottom-nav-create-icon{
    margin-top:-31px!important;
  }
}

/* ============================================================
   DS-2026-054 · Mobile Viewport + Bottom Navigation Integrity
   Flōow 2.8.189
   Root cause: Validaciones can expose wide intrinsic table/content widths and
   some runtimes do not emit the legacy `has-global-create` hook consistently.
   The viewport must never become a horizontal page scroller; wide data scrolls
   only inside its governed table surface. The five-slot bottom navigation is
   inferred from the canonical Global Create child as well as the legacy hook.
   ============================================================ */
@media (max-width:860px){
  html{
    width:100%;
    max-width:100%;
    overflow-x:clip!important;
    overscroll-behavior-x:none;
  }
  body{
    width:100%;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:clip!important;
    overscroll-behavior-x:none;
  }
  :where(.app-shell,.content,.main-content,main){
    min-width:0!important;
    max-width:100%!important;
  }
  :where(.responsive-table-wrap,.table-responsive,.table-scroll,.data-table-scroll,.tabla-wrap,.table-shell,.table-container,.data-table-surface){
    width:100%;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:visible;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  .bottom-nav-movil:has(> .bottom-nav-create),
  .bottom-nav-movil.has-global-create{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:minmax(52px,1fr)!important;
    grid-auto-rows:0!important;
    grid-auto-flow:column!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .bottom-nav-movil:has(> .bottom-nav-create) > :is(a,button),
  .bottom-nav-movil.has-global-create > :is(a,button){
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex:none!important;
    order:initial!important;
  }
  .bottom-nav-movil:has(> .bottom-nav-create) > a:nth-of-type(1){grid-column:1!important}
  .bottom-nav-movil:has(> .bottom-nav-create) > a:nth-of-type(2){grid-column:2!important}
  .bottom-nav-movil:has(> .bottom-nav-create) > .bottom-nav-create{grid-column:3!important}
  .bottom-nav-movil:has(> .bottom-nav-create) > a:nth-of-type(3){grid-column:4!important}
  .bottom-nav-movil:has(> .bottom-nav-create) > [data-mobile-more-toggle]{grid-column:5!important}
}

/* ============================================================
   DS-2026-055 · Intrinsic Width Containment for Data Surfaces
   Flōow 2.8.192
   Canonical rule: wide data may scroll inside its own surface, but its
   intrinsic width must never enlarge the application viewport or displace
   fixed Mobile Shell geometry. Grid/flex ancestors must remain shrinkable.
   ============================================================ */
@media (max-width:860px){
  :where(.responsive-table-wrap,.table-responsive,.table-scroll,.data-table-scroll,.tabla-wrap,.table-shell,.table-container,.data-table-surface){
    box-sizing:border-box;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    contain:inline-size;
    overflow-x:auto!important;
    overflow-y:visible;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Audit consumes the canonical DataTable boundary through a grid chain.
     Every intermediate grid item must be allowed to shrink to the viewport. */
  :where(.audit-center,.audit-explorer-card,.audit-explorer-heading,.audit-filter-bar,.audit-table-wrap){
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box;
  }
  .audit-center{
    width:100%!important;
    overflow:visible;
  }
  .audit-explorer-card{
    width:100%!important;
    overflow:hidden;
  }
  .audit-table-wrap{
    overflow-x:auto!important;
    overflow-y:hidden;
  }
}

/* ============================================================
   DS-2026-056 · Validation Workspace Mobile Viewport Containment
   Flōow 2.8.193
   Root cause: Validaciones combines a two-panel grid, KPI collection and a
   wide DataTable. Even though the DataTable wrapper owns horizontal scroll,
   the validation panel itself did not establish an inline-size containment
   boundary. On mobile WebView/Chromium this allowed the table's intrinsic
   width to leak through the panel/grid chain and create a horizontally
   pannable page canvas. Fixed Mobile Shell geometry then appeared displaced.
   Canonical rule: module workspaces and data panels must contain intrinsic
   width; only the governed table wrapper may scroll horizontally.
   ============================================================ */
@media (max-width:860px){
  :where(.validation-command-center,.validation-primary-column,.validation-history){
    box-sizing:border-box!important;
    inline-size:100%!important;
    width:100%!important;
    min-inline-size:0!important;
    min-width:0!important;
    max-inline-size:100%!important;
    max-width:100%!important;
  }
  .validation-command-center{
    grid-template-columns:minmax(0,1fr)!important;
    overflow:clip!important;
    contain:inline-size;
  }
  .validation-primary-column,
  .validation-history{
    overflow:clip!important;
    contain:inline-size;
  }
  .validation-history > .table-responsive{
    display:block!important;
    box-sizing:border-box!important;
    inline-size:100%!important;
    width:100%!important;
    min-inline-size:0!important;
    min-width:0!important;
    max-inline-size:100%!important;
    max-width:100%!important;
    contain:inline-size layout;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .validation-history > .table-responsive > .table-enterprise{
    max-width:none!important;
  }
  .validation-history-kpis,
  .validation-traceability-note{
    min-inline-size:0!important;
    max-inline-size:100%!important;
  }
}


/* =========================================================
   DS-2026-051 · Modal / Dropzone / ContextInfoCard Lockdown
   Canonical ownership: viewport overlay, evidence upload icon and context card.
   Modules may provide content only; geometry remains Design System Authority.
   ========================================================= */
:root{
  --modal-backdrop-bg:rgba(15,23,42,.24);
  --modal-backdrop-blur:18px;
  --dropzone-icon-box:44px;
}
.modal-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  z-index:10000!important;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0!important;
  background:var(--modal-backdrop-bg)!important;
  -webkit-backdrop-filter:blur(var(--modal-backdrop-blur)) saturate(112%)!important;
  backdrop-filter:blur(var(--modal-backdrop-blur)) saturate(112%)!important;
  isolation:isolate;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.modal-overlay[hidden]{display:none!important;}
body.modal-open{overflow:hidden!important;overscroll-behavior:none;}

/* Canonical evidence upload icon. Do not reuse module-specific icon classes. */
.ui-dropzone .ui-dropzone-icon{
  width:var(--dropzone-icon-box)!important;
  height:var(--dropzone-icon-box)!important;
  flex:0 0 var(--dropzone-icon-box)!important;
  display:grid!important;
  place-items:center!important;
  margin:0 0 var(--space-1,4px)!important;
  padding:0!important;
  border-radius:var(--component-icon-radius,14px)!important;
  background:color-mix(in srgb,var(--color-primario) 10%,var(--surface-card))!important;
  color:var(--color-primario)!important;
  line-height:0!important;
}
.ui-dropzone .ui-dropzone-icon svg{width:22px!important;height:22px!important;display:block!important;margin:auto!important;}

/* ContextInfoCard owns icon geometry and inner rhythm in every module. */
.context-info-card{
  padding:var(--space-4,16px)!important;
  border-radius:var(--radius-xl,20px)!important;
  background:var(--surface-subtle)!important;
  border:0!important;
  box-shadow:none!important;
}
.context-info-card .context-info-icon{
  width:var(--component-icon-box)!important;
  height:var(--component-icon-box)!important;
  min-width:var(--component-icon-box)!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:var(--component-icon-radius)!important;
  background:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card))!important;
  color:var(--color-primario)!important;
  line-height:0!important;
}
.context-info-card .context-info-icon svg{display:block!important;margin:auto!important;}
.context-info-card :is(h2,h3,strong){margin-top:0!important;}

@media(max-width:860px){
  .modal-overlay{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
  }
}


/* =========================================================
   v2.8.201 · Help Center 2.0 — composición aligerada sobre DS canónico
   ========================================================= */
.help-center-v2{display:grid;gap:14px}.help-v2-hero{display:block!important;overflow:hidden}.help-v2-hero-copy{min-width:0}.help-v2-hero-copy>p{max-width:760px}.help-v2-search{margin-top:16px;max-width:720px;min-height:50px;display:grid;grid-template-columns:24px minmax(0,1fr) 34px;align-items:center;gap:8px;padding:0 8px 0 14px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-elevated);color:var(--text-muted);box-shadow:var(--shadow-xs)}.help-v2-search:focus-within{border-color:color-mix(in srgb,var(--color-primario) 55%,var(--border-default));box-shadow:0 0 0 3px var(--focus-ring)}.help-v2-search input{min-height:48px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--text-main);font-size:.86rem}.help-v2-search button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--text-muted);cursor:pointer}.help-v2-search-hint{display:block;margin-top:7px;color:var(--text-muted);font-size:.62rem}.help-v2-frequent,.help-v2-modules,.help-v2-guides,.help-v2-faq,.help-v2-support-card,.help-v2-status-card,.help-v2-tips{padding:16px!important}.help-v2-section-header{margin-bottom:13px}.help-v2-section-header h2{margin:.12rem 0 0}.help-v2-section-header p{margin:.22rem 0 0}.help-v2-text-action{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--color-primario);font:inherit;font-size:.64rem;font-weight:700;cursor:pointer}.help-v2-action-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.help-v2-action-card{min-width:0;min-height:126px;padding:12px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-main);text-align:center;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.help-v2-action-card:hover,.help-v2-action-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--color-primario) 25%,var(--line-soft));box-shadow:var(--shadow-sm)}.help-v2-action-icon,.help-v2-module-icon,.help-v2-support-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--brand-soft);color:var(--color-primario)}.help-v2-action-card strong{font-size:.67rem}.help-v2-action-card small{color:var(--text-muted);font-size:.58rem;line-height:1.35}.help-v2-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}.help-v2-main,.help-v2-aside{display:grid;gap:14px}.help-v2-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.help-v2-module-card{min-width:0;min-height:138px;display:grid;grid-template-columns:44px minmax(0,1fr) 18px;gap:10px;align-items:start;padding:14px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-main);text-align:left;cursor:pointer}.help-v2-module-card:hover,.help-v2-module-card:focus-visible{border-color:color-mix(in srgb,var(--color-primario) 25%,var(--line-soft));background:var(--brand-softer)}.help-v2-module-icon.is-warning{background:color-mix(in srgb,var(--semantic-warning,#f59e0b) 10%,var(--surface-card));color:var(--semantic-warning,#f59e0b)}.help-v2-module-card strong{display:block;margin:1px 0 5px;font-size:.75rem}.help-v2-module-card p{margin:0;color:var(--text-muted);font-size:.62rem;line-height:1.45}.help-v2-module-card small{display:block;margin-top:8px;color:var(--text-muted);font-size:.58rem}.help-v2-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.help-v2-guide-card{padding:13px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-card)}.help-v2-guide-card>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px}.help-v2-guide-card>div:first-child>small{display:flex;align-items:center;gap:4px;color:var(--text-muted);font-size:.58rem}.help-v2-guide-kind{color:var(--text-muted);font-size:.6rem;font-weight:700;letter-spacing:.01em}.help-v2-guide-card h3{margin:11px 0 6px;font-size:.76rem}.help-v2-guide-card>p,.help-v2-guide-detail p,.help-v2-guide-detail li{color:var(--text-muted);font-size:.62rem;line-height:1.5}.help-v2-guide-card>button{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:0;border:0;background:transparent;color:var(--color-primario);font-size:.62rem;font-weight:700;cursor:pointer}.help-v2-guide-detail{margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft)}.help-v2-guide-detail ol{margin:0 0 10px;padding-left:18px;display:grid;gap:5px}.help-v2-faq-list{display:grid;gap:8px}.help-v2-faq-list details{overflow:hidden;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-card)}.help-v2-faq-list summary{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;cursor:pointer;color:var(--text-main);font-size:.67rem;font-weight:500}.help-v2-faq-list details p{margin:0;padding:0 40px 13px 12px;color:var(--text-muted);font-size:.63rem;line-height:1.55}.help-v2-support-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;background:var(--brand-softer)!important}.help-v2-support-card h2,.help-v2-status-card h2,.help-v2-tips h2{margin:0;font-size:.76rem}.help-v2-support-card p,.help-v2-status-card p,.help-v2-tips p{margin:.25rem 0 0;color:var(--text-muted);font-size:.62rem;line-height:1.45}.help-v2-support-card .btn{grid-column:1/-1;justify-content:center}.help-v2-status-list{display:grid;gap:9px;margin:12px 0}.help-v2-status-list>div{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px;align-items:center}.help-v2-status-list small{color:var(--text-muted);font-size:.58rem}.help-v2-tips ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}.help-v2-tips li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:7px;color:var(--text-muted);font-size:.61rem;line-height:1.45}.help-v2-tips li svg{color:var(--semantic-success,#16a34a)}.help-v2-bottom-cta{min-height:76px;display:grid;grid-template-columns:42px minmax(0,1fr) max-content;gap:12px;align-items:center;padding:13px 16px;border:1px solid color-mix(in srgb,var(--color-primario) 14%,var(--line-soft));border-radius:var(--radius-lg);background:var(--brand-softer)}.help-v2-bottom-cta>span{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--brand-soft);color:var(--color-primario)}.help-v2-bottom-cta h2{margin:0;font-size:.76rem}.help-v2-bottom-cta p{margin:.2rem 0 0;color:var(--text-muted);font-size:.61rem}.help-v2-no-results{min-height:230px}
html[data-theme="dark"] :is(.help-v2-search,.help-v2-action-card,.help-v2-module-card,.help-v2-guide-card){background:var(--surface-elevated);border-color:var(--line-soft)}
@media(max-width:1180px){.help-v2-layout{grid-template-columns:1fr}.help-v2-aside{grid-template-columns:repeat(3,minmax(0,1fr))}.help-v2-action-rail{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.help-v2-action-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.help-v2-action-card{flex:0 0 170px;scroll-snap-align:start}.help-v2-module-grid,.help-v2-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.help-v2-aside{grid-template-columns:1fr 1fr}.help-v2-tips{grid-column:1/-1}}
@media(max-width:620px){.help-center-v2{gap:11px}.help-v2-frequent,.help-v2-modules,.help-v2-guides,.help-v2-faq,.help-v2-support-card,.help-v2-status-card,.help-v2-tips{padding:13px!important}.help-v2-module-grid,.help-v2-guide-grid,.help-v2-aside{grid-template-columns:1fr}.help-v2-tips{grid-column:auto}.help-v2-bottom-cta{grid-template-columns:38px minmax(0,1fr)}.help-v2-bottom-cta .btn{grid-column:1/-1;justify-content:center}.help-v2-search{min-height:46px}.help-v2-action-card{flex-basis:148px}}

/* =======================================================================
   TodayInFloowDashboardExperience · DS-2026-067
   Adaptive dashboard composition. Canonical cards keep their own geometry;
   this authority only owns dashboard composition and certified variants.
   ======================================================================= */
.today-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4,16px);margin-top:var(--space-4,16px)}
.today-kpi-grid>.kpi-card{min-height:156px;margin:0!important}
.today-kpi-card .today-kpi-progress{width:100%;height:6px;border:0;border-radius:var(--radius-pill);overflow:hidden;margin-top:10px;appearance:none}.today-kpi-progress::-webkit-progress-bar{background:var(--surface-soft,#edf1f6);border-radius:var(--radius-pill)}.today-kpi-progress::-webkit-progress-value{background:var(--success,#16a34a);border-radius:var(--radius-pill)}.today-kpi-progress::-moz-progress-bar{background:var(--success,#16a34a);border-radius:var(--radius-pill)}
.today-primary-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:var(--space-4,16px);align-items:stretch}
.today-primary-grid>.card{margin:0!important;min-width:0;height:100%}
.today-people-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding-top:6px}
.today-people-groups>div{min-width:0}
.today-people-groups h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:.92rem}
.today-person-list{display:grid;gap:4px}.today-person-list>div{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-soft,var(--border))}.today-person-list>div:last-child{border-bottom:0}.today-person-list strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.today-person-list small,.today-muted{color:var(--text-muted)}
.today-person-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft,rgba(89,45,181,.09));color:var(--brand-primary);font-weight:700;font-size:.78rem}
.today-attendance-score{display:flex;align-items:baseline;gap:8px;margin:6px 0 16px}.today-attendance-score strong{font-size:2.2rem;line-height:1}.today-attendance-score span{color:var(--text-muted)}
.today-week-bars{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;height:150px;align-items:end}.today-week-bars>div{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:7px;text-align:center}.today-week-value{font-size:.75rem;color:var(--text-muted)}.today-week-bars progress{width:100%;height:12px;align-self:center;border:0;border-radius:var(--radius-pill);appearance:none}.today-week-bars progress::-webkit-progress-bar{background:var(--surface-soft,#edf1f6);border-radius:var(--radius-pill)}.today-week-bars progress::-webkit-progress-value{background:var(--brand-primary);border-radius:var(--radius-pill);opacity:.72}.today-week-bars progress::-moz-progress-bar{background:var(--brand-primary);border-radius:var(--radius-pill)}.today-week-bars small{color:var(--text-muted)}.today-attendance-exceptions{margin-top:14px}
@media(max-width:1100px){.today-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.today-primary-grid{grid-template-columns:1fr}}
@media(max-width:680px){.today-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.today-kpi-grid>.kpi-card{min-height:132px}.today-people-groups{grid-template-columns:1fr}.today-person-list>div{grid-template-columns:34px minmax(0,1fr)}.today-person-list small{grid-column:2}.today-week-bars{height:130px}}

/* =======================================================================
   TodayInFloowCommandCenter · DS-2026-068
   Daily command hierarchy, local context, attention center and compact analytics.
   ======================================================================= */
.dashboard-command-hero .dashboard-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-width:0}.dashboard-local-context{display:grid;gap:2px;text-align:right;line-height:1.25}.dashboard-local-context strong{font-size:.72rem}.dashboard-local-context small{font-size:.62rem;color:var(--text-muted)}
.dashboard-command-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.9fr);gap:var(--space-4,16px);margin-top:var(--space-4,16px);align-items:stretch}.dashboard-command-row .command-hint-card{margin:0!important;height:100%}.dashboard-quick-actions{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:10px 14px;border:1px solid var(--border-soft,var(--border));border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-xs)}.dashboard-quick-actions>strong{display:flex;align-items:center;gap:6px;color:var(--color-primario);font-size:.72rem;white-space:nowrap}.dashboard-quick-actions>div{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}.dashboard-quick-actions a{padding:7px 10px;border-radius:var(--radius-pill);background:var(--brand-soft);color:var(--color-primario);font-size:.62rem;font-weight:700;text-decoration:none}
.dashboard-attention-center{margin-top:var(--space-4,16px);padding:14px 16px!important;border-radius:var(--radius-lg)!important}.dashboard-attention-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.dashboard-attention-head>div{display:flex;align-items:center;gap:10px}.dashboard-attention-head>a{display:flex;align-items:center;gap:5px;color:var(--color-primario);font-size:.65rem;font-weight:700;text-decoration:none}.dashboard-attention-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.dashboard-attention-item{display:grid;grid-template-columns:36px minmax(0,1fr) 16px;align-items:center;gap:9px;min-width:0;padding:10px;border:1px solid var(--border-soft,var(--border));border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-main);text-decoration:none}.attention-item-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--component-icon-radius);background:var(--brand-soft);color:var(--color-primario)}.dashboard-attention-item.is-danger .attention-item-icon{background:color-mix(in srgb,var(--semantic-danger,#ef4444) 10%,var(--surface-card));color:var(--semantic-danger,#ef4444)}.dashboard-attention-item strong,.dashboard-attention-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-attention-item strong{font-size:.67rem}.dashboard-attention-item small{margin-top:3px;color:var(--text-muted);font-size:.57rem}
.today-week-bars{grid-template-columns:repeat(7,minmax(0,1fr))!important;height:150px}.dashboard-lower-grid{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);gap:var(--space-4,16px);align-items:stretch}.dashboard-lower-grid>.card,.dashboard-lower-grid>section{margin:0!important;height:100%}.dashboard-activity-list{display:grid}.dashboard-activity-row{display:grid;grid-template-columns:44px 30px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border-soft,var(--border));color:var(--text-main);text-decoration:none}.dashboard-activity-row:last-child{border-bottom:0}.dashboard-activity-row time{font-size:.61rem;color:var(--text-muted)}.activity-row-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--brand-soft);color:var(--color-primario)}.dashboard-activity-row strong,.dashboard-activity-row small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-activity-row strong{font-size:.66rem}.dashboard-activity-row small{font-size:.57rem;color:var(--text-muted);margin-top:2px}.dashboard-month-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.dashboard-month-kpis>.kpi-card{min-height:120px!important;padding:12px!important}.dashboard-month-kpis .kpi-card-value{font-size:1.35rem!important}
@media(max-width:1180px){.dashboard-command-row,.dashboard-lower-grid{grid-template-columns:1fr}.dashboard-attention-items{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-quick-actions{grid-template-columns:1fr}.dashboard-quick-actions>div{justify-content:flex-start}}
@media(max-width:760px){.dashboard-command-hero .dashboard-hero-actions{width:100%;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.dashboard-local-context{text-align:left}.dashboard-attention-items{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.dashboard-attention-item{flex:0 0 250px;scroll-snap-align:start}.today-week-bars{gap:5px!important;height:120px!important}.dashboard-month-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-activity-row{grid-template-columns:38px 28px minmax(0,1fr)}.dashboard-activity-row>.status-pill{display:none}}
/* DS-2026-069 — Global local context + dashboard semantic attention + monthly chart */
.app-header-local-context{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:112px;padding:0 10px;border-right:1px solid var(--border-soft,var(--border));line-height:1.15}.app-header-local-time{font-size:.78rem;font-weight:700;color:var(--text-main)}.app-header-local-meta{margin-top:2px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.56rem;color:var(--text-muted)}
.dashboard-attention-center{border:1px solid color-mix(in srgb,var(--semantic-danger,#ef4444) 28%,var(--border-soft,var(--border)))!important;background:linear-gradient(105deg,color-mix(in srgb,var(--semantic-danger,#ef4444) 7%,var(--surface-card)) 0%,var(--surface-card) 58%,var(--surface-card) 100%)!important;box-shadow:var(--shadow-sm)!important}
.dashboard-month-chart{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft,var(--border))}.dashboard-month-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.dashboard-month-chart-head strong,.dashboard-month-chart-head small{display:block}.dashboard-month-chart-head strong{font-size:.78rem}.dashboard-month-chart-head small{margin-top:3px;font-size:.6rem;color:var(--text-muted)}.dashboard-chart-legend{display:flex;gap:12px;font-size:.58rem;font-weight:700}.dashboard-chart-legend span:before{content:"";display:inline-block;width:7px;height:7px;border-radius:var(--radius-pill);margin-right:5px}.dashboard-chart-legend .is-success:before{background:var(--semantic-success,#22c55e)}.dashboard-chart-legend .is-danger:before{background:var(--semantic-danger,#ef4444)}.dashboard-month-bars{display:flex;align-items:stretch;gap:6px;height:145px;overflow-x:auto;padding:4px 2px 0}.dashboard-month-day{flex:1 0 18px;min-width:18px;display:grid;grid-template-rows:1fr 16px;gap:4px;text-align:center}.dashboard-month-bar-pair{display:flex;align-items:flex-end;justify-content:center;gap:2px;min-height:0}.dashboard-month-bar-pair i{display:block;width:5px;min-height:3px;border-radius:5px 5px 2px 2px}.dashboard-month-bar-pair .is-success{background:var(--semantic-success,#22c55e)}.dashboard-month-bar-pair .is-danger{background:var(--semantic-danger,#ef4444)}.dashboard-month-day small{font-size:.5rem;color:var(--text-muted)}
@media(max-width:900px){.app-header-local-meta{display:none}.app-header-local-context{min-width:auto;padding:0 7px}.dashboard-month-bars{gap:4px}.dashboard-month-day{flex-basis:16px}}

.dashboard-month-bar-pair .h-0{height:0}.dashboard-month-bar-pair .h-1{height:10%}.dashboard-month-bar-pair .h-2{height:20%}.dashboard-month-bar-pair .h-3{height:30%}.dashboard-month-bar-pair .h-4{height:40%}.dashboard-month-bar-pair .h-5{height:50%}.dashboard-month-bar-pair .h-6{height:60%}.dashboard-month-bar-pair .h-7{height:70%}.dashboard-month-bar-pair .h-8{height:80%}.dashboard-month-bar-pair .h-9{height:90%}.dashboard-month-bar-pair .h-10{height:100%}

/* DS-2026-071 · White Label Topbar Weather Motion refinement */
/* DS-2026-072 · Right-anchored Weather Motion composition; divider retained */
.app-header-weather{flex-direction:row;align-items:center;justify-content:flex-end;gap:10px;min-width:196px;max-width:292px;padding-inline:9px 11px}.app-header-weather-copy{display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right}.app-header-weather-primary{display:flex;align-items:baseline;gap:6px}.app-header-weather-temp{font-size:.7rem;font-weight:700;color:var(--text-main)}.app-header-weather .app-header-local-meta{max-width:230px}.weather-motion{position:relative;display:grid;width:27px;height:27px;flex:0 0 27px;place-items:center;color:var(--brand-primary);opacity:.82}.weather-motion svg{width:27px;height:27px;overflow:visible}.weather-motion g{transform-box:fill-box;transform-origin:center}.weather-motion path,.weather-motion circle{fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}.weather-motion .weather-sun circle{fill:var(--brand-primary-soft);stroke:var(--brand-primary)}.weather-motion .weather-rays{stroke:var(--brand-primary);opacity:.78}.weather-motion .weather-cloud path{fill:var(--brand-primary-soft);stroke:color-mix(in srgb,var(--brand-primary) 72%,var(--text-muted))}.weather-motion .weather-cloud-back path{fill:var(--brand-softer,var(--brand-primary-soft));stroke:color-mix(in srgb,var(--brand-primary) 50%,var(--text-muted));opacity:.72}.weather-motion .weather-moon path{fill:var(--brand-primary-soft);stroke:var(--brand-primary)}.weather-motion .weather-rain,.weather-motion .weather-fog{stroke:var(--brand-primary);opacity:.78}.weather-motion .weather-snow{fill:var(--brand-primary)}.weather-motion .weather-snow circle{fill:currentColor;stroke:none}.weather-motion .weather-bolt path{fill:var(--brand-primary-soft);stroke:var(--brand-primary)}.weather-motion .weather-sun,.weather-motion .weather-moon,.weather-motion .weather-cloud,.weather-motion .weather-rain,.weather-motion .weather-snow,.weather-motion .weather-fog,.weather-motion .weather-bolt{display:none}.weather-motion--clear-day .weather-sun,.weather-motion--partly-day .weather-sun,.weather-motion--clear-night .weather-moon,.weather-motion--partly-night .weather-moon,.weather-motion--partly-day .weather-cloud-front,.weather-motion--partly-night .weather-cloud-front,.weather-motion--cloudy .weather-cloud-front,.weather-motion--cloudy .weather-cloud-back,.weather-motion--rain .weather-cloud-front,.weather-motion--rain .weather-rain,.weather-motion--snow .weather-cloud-front,.weather-motion--snow .weather-snow,.weather-motion--fog .weather-fog,.weather-motion--storm .weather-cloud-front,.weather-motion--storm .weather-bolt{display:block}.weather-motion--clear-day .weather-sun,.weather-motion--partly-day .weather-sun{animation:floow-weather-breathe 6.2s ease-in-out infinite}.weather-motion--clear-day .weather-rays,.weather-motion--partly-day .weather-rays{animation:floow-weather-rays 20s linear infinite}.weather-motion--partly-day .weather-cloud-front,.weather-motion--partly-night .weather-cloud-front,.weather-motion--cloudy .weather-cloud-front{animation:floow-weather-drift 7.2s ease-in-out infinite}.weather-motion--cloudy .weather-cloud-back{display:block;opacity:.46;transform:translate(-4px,-4px);animation:floow-weather-drift-back 9s ease-in-out infinite}.weather-motion--clear-night .weather-moon,.weather-motion--partly-night .weather-moon{animation:floow-weather-moon 6.4s ease-in-out infinite}.weather-motion--rain .weather-rain{animation:floow-weather-rain 1.55s ease-in-out infinite}.weather-motion--snow .weather-snow{animation:floow-weather-snow 2.8s ease-in-out infinite}.weather-motion--fog .weather-fog{animation:floow-weather-fog 5.2s ease-in-out infinite}.weather-motion--storm .weather-bolt{animation:floow-weather-flash 5s ease-in-out infinite}@keyframes floow-weather-breathe{0%,100%{transform:scale(.98)}50%{transform:scale(1.025)}}@keyframes floow-weather-rays{to{transform:rotate(360deg)}}@keyframes floow-weather-drift{0%,100%{transform:translateX(-.6px)}50%{transform:translateX(1.2px)}}@keyframes floow-weather-drift-back{0%,100%{transform:translate(-4px,-4px)}50%{transform:translate(-2px,-4px)}}@keyframes floow-weather-moon{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}@keyframes floow-weather-rain{0%{transform:translateY(-.5px);opacity:.4}55%{opacity:.8}100%{transform:translateY(1.5px);opacity:.4}}@keyframes floow-weather-snow{0%,100%{transform:translateY(-.5px)}50%{transform:translateY(1.5px)}}@keyframes floow-weather-fog{0%,100%{transform:translateX(-1px);opacity:.5}50%{transform:translateX(1px);opacity:.8}}@keyframes floow-weather-flash{0%,90%,100%{opacity:.45}92%,96%{opacity:.8}94%,98%{opacity:.35}}@media(prefers-reduced-motion:reduce){.weather-motion *{animation:none!important}}@media(max-width:1100px){.app-header-weather{min-width:auto;max-width:180px}.app-header-weather .app-header-local-meta{max-width:135px}}@media(max-width:900px){.app-header-weather{gap:5px;padding-inline:6px}.weather-motion{width:24px;height:24px;flex-basis:24px}.weather-motion svg{width:24px;height:24px}.app-header-weather .app-header-local-meta{display:none}}

/* DS-2026-073 · Canonical Topbar Notification Control
   Notification remains a 44px accessible control, but no longer carries a
   permanent card/glass treatment. Visual emphasis is state-driven only. */
.notificaciones > .btn-icono-cabecera{
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
@media (hover:hover){
  .notificaciones > .btn-icono-cabecera:hover{
    background:var(--shell-control-hover)!important;
    border-color:transparent!important;
    box-shadow:none!important;
    color:var(--text-main)!important;
  }
}
.notificaciones > .btn-icono-cabecera:focus-visible{
  background:var(--shell-control-hover)!important;
  border-color:transparent!important;
  box-shadow:0 0 0 3px var(--focus-ring)!important;
}
.notificaciones > .btn-icono-cabecera[aria-expanded="true"],
.notificaciones.abierto > .btn-icono-cabecera{
  background:var(--shell-control-active)!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:var(--color-primario,var(--primario))!important;
}
html[data-theme="dark"] .notificaciones > .btn-icono-cabecera{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* DS-2026-074 · Canonical Activity Center Floating Anchor
   The floating surface is anchored from the notification trigger geometry,
   not from the trigger's visual border/card treatment. Header actions remain
   one row and the close control keeps a 44px hit target without visual weight. */
@media(min-width:861px){
  .notificaciones-panel.activity-center[data-desktop-notifications-panel]{
    position:fixed!important;
    top:var(--activity-panel-top,72px)!important;
    right:var(--activity-panel-right,24px)!important;
    left:auto!important;
    width:min(390px,calc(100vw - 32px))!important;
    max-height:min(620px,calc(100dvh - var(--activity-panel-top,72px) - 16px))!important;
    overflow:auto!important;
    transform:translateY(-5px)!important;
    transform-origin:top right!important;
  }
  .notificaciones.abierto > .notificaciones-panel.activity-center[data-desktop-notifications-panel]{
    transform:translateY(0)!important;
  }
  .notificaciones-panel.activity-center[data-desktop-notifications-panel]::after{
    content:"";
    position:fixed;
    top:calc(var(--activity-panel-top,72px) - 6px);
    right:calc(var(--activity-panel-right,24px) + var(--activity-trigger-half,22px) - 6px);
    width:12px;height:12px;
    background:color-mix(in srgb,var(--surface-card) 94%,transparent);
    border-top:1px solid color-mix(in srgb,var(--line-soft) 92%,transparent);
    border-left:1px solid color-mix(in srgb,var(--line-soft) 92%,transparent);
    transform:rotate(45deg);
    pointer-events:none;
  }
}
.activity-center .notificaciones-header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  min-height:72px;
  padding:14px 14px 14px 16px!important;
}
.activity-center .notificaciones-header>div:first-child{min-width:0;display:grid;gap:3px}
.activity-center .notificaciones-header>div:first-child strong{line-height:1.2}
.activity-center .notificaciones-header>div:first-child small{line-height:1.35;color:var(--text-muted)}
.activity-center .activity-header-actions{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;align-self:center;gap:6px!important}
.activity-center .activity-total{white-space:nowrap}
.activity-center .activity-center-close{
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text-main)!important;
}
@media(hover:hover){.activity-center .activity-center-close:hover{background:var(--shell-control-hover)!important;box-shadow:none!important}}
.activity-center .activity-center-close:focus-visible{background:var(--shell-control-hover)!important}
@media(max-width:860px){
  .activity-center .notificaciones-header{min-height:68px;padding:12px 10px 12px 14px!important;gap:8px!important}
  .activity-center .activity-header-actions{gap:2px!important}
}

/* ========================================================================
   v2.9.47 · Canonical Account Floating Surface
   DS-2026-076 — Account and Activity Center share one GlassFloatingSurface
   grammar: header/content/footer, close geometry, WL accents and interaction.
   Redundant notification/onboarding shortcuts are intentionally omitted from
   Account because their canonical entry points already live in the Topbar.
   ======================================================================== */
.canonical-account-surface{
  width:min(390px,calc(100vw - 32px))!important;
  padding:0!important;
  overflow:hidden!important;
}
.canonical-account-surface .account-surface-header{
  min-height:72px!important;
  padding:14px 14px 14px 16px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  border-bottom:1px solid var(--line-soft)!important;
}
.canonical-account-surface .account-surface-header>div{display:grid;gap:3px;min-width:0}
.canonical-account-surface .account-surface-header strong{font-size:.9rem!important;line-height:1.2!important}
.canonical-account-surface .account-surface-header small{font-size:.72rem!important;line-height:1.35!important;color:var(--text-muted)!important}
.canonical-account-surface .desktop-account-close,
.canonical-account-surface .mobile-account-close{position:static!important;inset:auto!important;background:transparent!important;box-shadow:none!important}
.canonical-account-surface .account-identity-card{
  margin:12px 12px 6px!important;
  padding:12px!important;
  min-height:64px!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:11px!important;
  border:1px solid color-mix(in srgb,var(--brand-primary) 10%,var(--line-soft))!important;
  border-radius:var(--radius-lg)!important;
  background:color-mix(in srgb,var(--brand-primary) 7%,var(--surface-card))!important;
  text-decoration:none!important;
}
.canonical-account-surface .account-identity-card .user-avatar{width:44px!important;height:44px!important;border-radius:50%!important;background:color-mix(in srgb,var(--brand-primary) 12%,var(--surface-soft))!important;color:var(--brand-primary)!important}
.canonical-account-surface .account-identity-card>span{display:grid!important;gap:2px!important;min-width:0}
.canonical-account-surface .account-identity-card strong{font-size:.84rem!important}
.canonical-account-surface .account-identity-card small{font-size:.72rem!important}
.canonical-account-surface .account-identity-card>svg:last-child{color:var(--brand-primary)!important}
.canonical-account-surface .account-surface-list{display:grid!important;padding:4px 10px 10px!important}
.canonical-account-surface .account-surface-list>:is(a,button){
  min-height:58px!important;
  padding:8px 10px!important;
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:10px!important;
  border:0!important;
  border-radius:var(--radius-md)!important;
  background:transparent!important;
  color:var(--text-main)!important;
  text-decoration:none!important;
  text-align:left!important;
}
.canonical-account-surface .account-surface-list>:is(a,button)>svg:first-child{
  width:36px!important;height:36px!important;padding:8px!important;box-sizing:border-box!important;
  border:1px solid var(--line-soft)!important;border-radius:var(--radius-md)!important;
  background:var(--surface-soft)!important;color:var(--text-main)!important;
}
.canonical-account-surface .account-surface-list>:is(a,button)>span{display:grid!important;gap:2px!important;min-width:0}
.canonical-account-surface .account-surface-list>:is(a,button)>svg:last-child{color:var(--text-muted)!important;justify-self:end}
@media(hover:hover){
  .canonical-account-surface .account-surface-list>:is(a,button):hover{background:color-mix(in srgb,var(--brand-primary) 6%,transparent)!important}
  .canonical-account-surface .account-surface-list>:is(a,button):hover>svg:first-child{border-color:color-mix(in srgb,var(--brand-primary) 24%,var(--line-soft))!important;color:var(--brand-primary)!important;background:color-mix(in srgb,var(--brand-primary) 8%,var(--surface-soft))!important}
}
.canonical-account-surface .account-surface-list>:is(a,button):focus-visible{outline:2px solid var(--brand-primary)!important;outline-offset:-2px!important;background:color-mix(in srgb,var(--brand-primary) 6%,transparent)!important}
.canonical-account-surface .account-surface-footer{padding:10px 12px 12px!important;border-top:1px solid var(--line-soft)!important}
.canonical-account-surface .account-surface-footer form{border:0!important;margin:0!important}
.canonical-account-surface .account-logout{
  min-height:48px!important;padding:10px 12px!important;border:0!important;border-radius:var(--radius-md)!important;
  display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;
  background:color-mix(in srgb,var(--danger,#dc2626) 7%,transparent)!important;color:var(--danger,#dc2626)!important;
}
.canonical-account-surface .account-logout strong{color:inherit!important}
@media(hover:hover){.canonical-account-surface .account-logout:hover{background:color-mix(in srgb,var(--danger,#dc2626) 11%,transparent)!important}}
html[data-theme="dark"] .canonical-account-surface .account-identity-card{background:color-mix(in srgb,var(--brand-primary) 10%,rgba(255,255,255,.025))!important}
html[data-theme="dark"] .canonical-account-surface .account-surface-list>:is(a,button)>svg:first-child{background:rgba(255,255,255,.035)!important}
@media(min-width:861px){
  .desktop-account-panel.canonical-account-surface{padding-top:0!important;right:0!important;top:calc(100% + 10px)!important}
}
@media(max-width:860px){
  .canonical-account-surface .account-surface-header{min-height:68px!important;padding:12px 10px 12px 14px!important}
  .canonical-account-surface .account-identity-card{margin:10px 10px 5px!important}
  .canonical-account-surface .account-surface-list{padding-inline:8px!important}
}

/* ========================================================================
   v2.9.48 · Canonical Account Inner Grid
   DS-2026-077 — fixes identity-card inset/overflow and strengthens frost.
   All account body rows share one content inset and trailing column.
   ======================================================================== */
.canonical-account-surface{
  --account-content-inset:12px;
  background:color-mix(in srgb,var(--surface-card) 96%,transparent)!important;
  backdrop-filter:blur(22px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(125%)!important;
}
.canonical-account-surface .account-identity-card{
  box-sizing:border-box!important;
  width:calc(100% - (var(--account-content-inset) * 2))!important;
  max-width:calc(100% - (var(--account-content-inset) * 2))!important;
  margin:12px var(--account-content-inset) 6px!important;
  padding:10px 12px!important;
  min-height:60px!important;
  grid-template-columns:44px minmax(0,1fr) 18px!important;
  overflow:hidden!important;
}
.canonical-account-surface .account-identity-card>svg:last-child{justify-self:end!important;margin:0!important}
.canonical-account-surface .account-surface-list{padding:4px var(--account-content-inset) 10px!important}
.canonical-account-surface .account-surface-list>:is(a,button){box-sizing:border-box!important;width:100%!important}
.canonical-account-surface .account-surface-footer{padding:10px var(--account-content-inset) 12px!important}
@media(max-width:860px){
 .canonical-account-surface{--account-content-inset:10px}
 .canonical-account-surface .account-identity-card{margin-top:10px!important;margin-bottom:5px!important}
}

/* DS-2026-078 · Personal Profile Summary Composition */
.profile-hub-name-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);}
.profile-hub-name-row h2{margin:var(--space-1) 0;}
.profile-role-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--space-3);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card));color:var(--color-primario);font-size:.78rem;font-weight:500;}
.profile-summary-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:var(--space-4);align-items:start;}
.profile-summary-panel{min-width:0;padding:var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--surface-card);}
.profile-summary-panel .profile-pending-grid,.profile-summary-panel .profile-access-grid{grid-template-columns:1fr;gap:var(--space-2);}
.profile-summary-panel .profile-pending-card,.profile-summary-panel .profile-access-card{padding:var(--space-3);min-height:72px;box-shadow:none;}
.profile-summary-panel .profile-pending-card:hover,.profile-summary-panel .profile-access-card:hover{transform:none;background:color-mix(in srgb,var(--color-primario) 3%,var(--surface-card));}
.profile-pending-trailing{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto;}
.profile-pending-trailing>svg{color:var(--text-muted);}
.profile-summary-support{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);align-items:stretch;}
.profile-summary-support:has(.profile-account-only-note:only-child){grid-template-columns:1fr;}
.profile-summary-support>.context-info-card,.profile-summary-support>.profile-help-surface{height:100%;box-sizing:border-box;}
.profile-help-summary{border:1px solid color-mix(in srgb,var(--color-primario) 8%,var(--border-subtle));}
@media(max-width:1100px){.profile-summary-layout{grid-template-columns:1fr;}.profile-summary-support{grid-template-columns:1fr;}}
@media(max-width:767px){.profile-summary-panel{padding:var(--space-3);}.profile-summary-panel .profile-pending-grid{display:grid;overflow:visible;padding-bottom:0}.profile-summary-panel .profile-pending-card{min-width:0}.profile-pending-trailing .status-pill{display:none}.profile-summary-support{grid-template-columns:1fr}.profile-role-chip{min-height:26px;padding-inline:var(--space-2)}}
/* =========================================================
   2.8.228 · Usuarios y accesos — composición sobre DS Authority
   No redefine componentes canónicos; sólo layout y contenido del módulo.
   ========================================================= */
.users-hero-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.users-access-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:82px;margin:14px 0 12px;border:1px solid var(--border-subtle,var(--line-soft));border-radius:var(--radius-lg);background:var(--surface-card);overflow:hidden}.users-summary-item{display:grid;grid-template-columns:auto auto 1fr;align-items:center;align-content:center;column-gap:9px;padding:15px 20px;position:relative}.users-summary-item+.users-summary-item:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--border-subtle,var(--line-soft))}.users-summary-item strong{font-size:1.15rem;line-height:1;color:var(--text-main)}.users-summary-item>span:last-child{grid-column:2/4;color:var(--text-muted);font-size:.72rem;margin-top:3px}.users-summary-icon{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;color:var(--color-primario);background:color-mix(in srgb,var(--color-primario) 8%,transparent);border-radius:var(--radius-md)}.users-state-dot{grid-row:1/3;width:10px;height:10px;border-radius:50%;margin:0 7px}.users-state-dot.is-success{background:var(--semantic-success)}.users-state-dot.is-warning{background:var(--semantic-warning)}.users-state-dot.is-neutral{background:var(--text-muted)}
.users-section-nav{display:flex;align-items:end;gap:22px;margin-bottom:12px;border-bottom:1px solid var(--border-subtle,var(--line-soft))}.users-tab{appearance:none;border:0;background:none;color:var(--text-muted);display:flex;align-items:center;gap:7px;min-height:44px;padding:0 3px;position:relative;font:inherit;font-size:.78rem;font-weight:500;cursor:pointer}.users-tab:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:var(--radius-xs);background:transparent}.users-tab.is-active{color:var(--color-primario)}.users-tab.is-active:after{background:var(--color-primario)}.users-tab>span{min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-primario) 10%,transparent);font-size:.62rem}.users-list-card{padding:0!important;overflow:visible}.users-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 205px 205px;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border-subtle,var(--line-soft))}.users-search{min-height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--border-subtle,var(--line-soft));border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-muted)}.users-search:focus-within{border-color:var(--color-primario);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primario) 12%,transparent)}.users-search input{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;min-height:38px!important;width:100%}.users-toolbar select{min-height:42px}.users-table-wrap{border:0!important;border-radius:0!important;overflow:visible}.usuarios-table{min-width:900px!important}.usuarios-table th,.usuarios-table td{padding-top:11px!important;padding-bottom:11px!important;vertical-align:middle}.users-person{display:flex;align-items:center;gap:10px;min-width:0}.users-avatar{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;font-size:.7rem;font-weight:700;color:var(--color-primario);background:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card))}.users-person>span:last-child{min-width:0}.users-person strong,.users-person small{display:block}.users-person small{margin-top:2px;color:var(--text-muted);font-size:.67rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.users-role-name{font-size:.74rem}.usuarios-table td:nth-child(2) small{display:block;color:var(--text-muted);font-size:.62rem;margin-top:2px}.users-row-actions{display:flex;justify-content:flex-end;align-items:center;gap:5px}.btn-icon{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer}.btn-icon:hover,.btn-icon:focus-visible{background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card));color:var(--color-primario);outline:none}.users-more{position:relative}.users-more summary{list-style:none}.users-more summary::-webkit-details-marker{display:none}.users-more-menu{position:absolute;right:0;top:38px;z-index:30;width:190px;padding:5px;border:1px solid var(--border-subtle,var(--line-soft));border-radius:var(--radius-md);background:var(--surface-card);box-shadow:var(--shadow-lg);display:grid}.users-more-menu form{margin:0}.users-more-menu button{width:100%;border:0;background:transparent;color:var(--text-main);padding:9px 10px;border-radius:var(--radius-sm);text-align:left;font:inherit;font-size:.7rem;cursor:pointer}.users-more-menu button:hover,.users-more-menu button:focus-visible{background:var(--surface-subtle);outline:none}.users-more-menu button.is-danger{color:var(--semantic-danger)}.users-protected{font-size:.65rem}.users-access-guidance{margin-top:12px}.users-invitation-list{display:grid}.users-invitation-row{display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(150px,.7fr) minmax(130px,.55fr) auto;align-items:center;gap:16px;padding:13px 16px}.users-invitation-row+.users-invitation-row{border-top:1px solid var(--border-subtle,var(--line-soft))}.users-invitation-row>div>small,.users-invitation-row>div>strong{display:block}.users-invitation-row>div>small{color:var(--text-muted);font-size:.62rem;margin-bottom:3px}.users-invitation-actions{display:flex;gap:6px}.users-invitation-actions form{margin:0}
.users-guided-dialog{width:min(520px,calc(100vw - 28px))!important}.users-guided-form{display:grid;gap:16px}.users-stepper{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:start;padding:2px 8px 4px}.users-stepper button{border:0;background:none;color:var(--text-muted);display:grid;justify-items:center;gap:5px;font:inherit;font-size:.65rem;cursor:pointer}.users-stepper button span{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--border-subtle,var(--line-soft));border-radius:50%;background:var(--surface-card);font-size:.65rem;font-weight:700}.users-stepper button.is-active{color:var(--color-primario);font-weight:700}.users-stepper button.is-active span,.users-stepper button.is-complete span{border-color:var(--color-primario);background:var(--color-primario);color:var(--text-on-primary,#fff)}.users-stepper i{height:1px;background:var(--border-subtle,var(--line-soft));margin:13px 10px 0}.users-step-panel{display:none;gap:12px}.users-step-panel.is-active{display:grid}.users-person-preview{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--radius-md);background:var(--surface-subtle,var(--surface-card));border:1px solid var(--border-subtle,var(--line-soft))}.users-person-preview strong,.users-person-preview small{display:block}.users-person-preview small{margin-top:2px;color:var(--text-muted);font-size:.68rem}.users-scope-preview{margin-top:2px}.users-review-card{padding:14px;border:1px solid var(--border-subtle,var(--line-soft));border-radius:var(--radius-lg);background:var(--surface-subtle,var(--surface-card))}.users-review-card dl{display:grid;gap:0;margin:12px 0 0}.users-review-card dl div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-top:1px solid var(--border-subtle,var(--line-soft))}.users-review-card dt{color:var(--text-muted);font-size:.68rem}.users-review-card dd{margin:0;text-align:right;font-size:.7rem;font-weight:500}.users-guided-actions{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center}.users-guided-actions [data-invite-submit]{grid-column:3}.users-filter-empty td{padding:0!important}
html[data-theme="dark"] .users-access-summary,html[data-theme="dark"] .users-search,html[data-theme="dark"] .users-more-menu{background:var(--surface-card)}
@media(max-width:900px){.users-access-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.users-summary-item:nth-child(3):before{display:none}.users-summary-item:nth-child(n+3){border-top:1px solid var(--border-subtle,var(--line-soft))}.users-toolbar{grid-template-columns:1fr 1fr}.users-search{grid-column:1/-1}.users-invitation-row{grid-template-columns:1fr 1fr}.users-invitation-actions{justify-content:flex-end}}
@media(max-width:760px){.users-hero-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.users-hero-actions .btn{width:100%;justify-content:center}.users-access-summary{margin-top:10px}.users-summary-item{padding:12px}.users-toolbar{grid-template-columns:1fr;padding:11px}.users-search{grid-column:auto}.users-section-nav{overflow-x:auto}.users-invitation-row{grid-template-columns:1fr;gap:10px}.users-invitation-actions{justify-content:flex-start}.users-guided-dialog{width:calc(100vw - 20px)!important}.users-stepper{padding-inline:0}.users-stepper i{margin-inline:5px}.users-guided-actions{grid-template-columns:1fr 1fr}.users-guided-actions span{display:none}.users-guided-actions .btn{width:100%;justify-content:center}.users-guided-actions [data-invite-submit]{grid-column:2}.usuarios-table{min-width:850px!important}}
@media(max-width:430px){.users-hero-actions{grid-template-columns:1fr}.users-summary-item{padding:10px}.users-summary-item strong{font-size:1rem}.users-summary-item>span:last-child{font-size:.64rem}.users-summary-icon{width:30px;height:30px}.users-stepper button{font-size:.58rem}.users-stepper button span{width:25px;height:25px}.users-stepper i{margin-top:12px}}

/* DS-2026-080 — Canonical SectionNav + Active Panel */
[data-section-nav]{display:flex;align-items:center;gap:var(--space-2,8px);overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
[data-section-nav]::-webkit-scrollbar{display:none}
[data-section-nav] [role="tab"]{appearance:none;font:inherit;white-space:nowrap;cursor:pointer}
[data-section-nav] [role="tab"]:focus-visible{outline:2px solid var(--brand-primary,#5b21b6);outline-offset:2px}
[data-section-panel][hidden]{display:none!important}
[data-section-panel]:not([hidden]){animation:floow-section-panel-in .16s ease-out}
@keyframes floow-section-panel-in{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){[data-section-panel]:not([hidden]){animation:none}}
@media (max-width:767px){[data-section-nav]{scroll-snap-type:x proximity;padding-inline:var(--space-1,4px)}[data-section-nav] [role="tab"]{scroll-snap-align:start;min-height:44px}}

/* DS-2026-081 — SectionNav visual convergence
   One canonical grammar for links and active-panel buttons. Modules provide
   labels/data only; geometry and interaction remain owned by Authority. */
.ui-section-nav > :is(a,button,[role="tab"]){
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:var(--space-2,8px)!important;
  min-height:40px!important;
  padding:0 var(--space-3,12px)!important;
  margin:0!important;
  border:1px solid transparent!important;
  border-radius:var(--radius-control)!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text-secondary)!important;
  font:inherit!important;
  font-weight:500!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
@media (hover:hover){
  .ui-section-nav > :is(a,button,[role="tab"]):not(.active):not(.is-active):not([aria-selected="true"]):hover{
    background:var(--interaction-hover)!important;
    color:var(--text-main)!important;
  }
}
.ui-section-nav > :is(a,button,[role="tab"]):is(.active,.is-active,[aria-selected="true"]){
  border-color:transparent!important;
  background:var(--interaction-selected)!important;
  color:var(--brand-primary)!important;
  box-shadow:none!important;
  font-weight:700!important;
}
.ui-section-nav > :is(a,button,[role="tab"]):focus-visible{
  outline:none!important;
  box-shadow:var(--focus-shadow)!important;
}
.ui-section-nav > :is(a,button,[role="tab"]):disabled,
.ui-section-nav > [role="tab"][aria-disabled="true"]{
  opacity:.55!important;
  cursor:not-allowed!important;
}
@media(max-width:767px){
  .ui-section-nav{overflow-x:auto!important;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
  .ui-section-nav > :is(a,button,[role="tab"]){min-height:44px!important;scroll-snap-align:start}
}

/* DS-2026-082 — BiometricCameraVisor canonical capture preview */
.biometric-camera-visor{position:relative;width:min(100%,560px);aspect-ratio:4/3;margin-top:var(--space-4);overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-sm);isolation:isolate}
.biometric-camera-visor .biometric-diagnostic-video{display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;border-radius:0;background:var(--text-main)}
.biometric-camera-visor__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-5);text-align:center;background:var(--surface-raised);color:var(--text-muted);z-index:2}
.biometric-camera-visor__placeholder strong{color:var(--text-main)}
.biometric-camera-visor__camera{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--surface-soft);color:var(--text-main)}
.biometric-camera-visor__guide{position:absolute;left:50%;top:47%;width:38%;height:58%;transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,.72);border-radius:48% 48% 44% 44%/40% 40% 56% 56%;box-shadow:0 0 0 999px rgba(0,0,0,.08);opacity:0;pointer-events:none;z-index:3;transition:opacity .2s ease}
.biometric-camera-visor__hud{position:absolute;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:10px 12px;border-radius:var(--radius-lg);background:rgba(18,20,24,.72);color:#fff;font-size:.82rem;line-height:1.2;z-index:4;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.biometric-camera-visor[data-state="live"] .biometric-camera-visor__guide,.biometric-camera-visor[data-state="success"] .biometric-camera-visor__guide,.biometric-camera-visor[data-state="live"] .biometric-camera-visor__hud,.biometric-camera-visor[data-state="success"] .biometric-camera-visor__hud{opacity:1;transform:none}
.biometric-camera-visor[data-state="success"]{border-color:var(--success);box-shadow:0 0 0 1px color-mix(in srgb,var(--success) 22%,transparent),var(--shadow-sm)}
.biometric-camera-visor[data-state="success"] .biometric-camera-visor__state{font-weight:700}
.biometric-camera-visor__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;opacity:.86}
@media(max-width:640px){.biometric-camera-visor{width:100%;border-radius:var(--radius-lg)}.biometric-camera-visor__guide{width:44%;height:60%}.biometric-camera-visor__hud{left:var(--space-2);right:var(--space-2);bottom:var(--space-2)}}
@media(prefers-reduced-motion:reduce){.biometric-camera-visor__guide,.biometric-camera-visor__hud{transition:none}}

/* DS-2026-083 — BiometricCompatibilityExperience canonical guided validation */
.biometric-compatibility-shell{display:grid;gap:var(--space-4,16px)}
.biometric-compatibility-shell__header{padding-bottom:0!important}
.biometric-compatibility-shell__status{margin:0!important}
.biometric-compatibility-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);gap:var(--space-5,20px);align-items:start}
.biometric-compatibility-grid__preview{display:grid;gap:var(--space-3,12px);min-width:0}
.biometric-compatibility-grid .biometric-camera-visor{width:100%;max-width:none;margin:0}
.biometric-camera-tip{margin:0!important}
.biometric-readiness-panel{display:grid;gap:var(--space-3,12px);padding:var(--space-3,12px);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--surface-card);box-shadow:var(--shadow-sm)}
.biometric-readiness-panel__hero{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--space-3,12px);align-items:center;padding:var(--space-3,12px);border-radius:var(--radius-lg);background:var(--surface-soft)}
.biometric-readiness-panel__hero-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--surface-soft);color:var(--text-muted)}
.biometric-readiness-panel__hero strong,.biometric-readiness-item strong{display:block;color:var(--text-main)}
.biometric-readiness-panel__hero p{margin:3px 0 0;color:var(--text-muted)}
.biometric-readiness-list{display:grid;gap:var(--space-2,8px)}
.biometric-readiness-item{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;gap:var(--space-3,12px);align-items:center;min-height:64px;padding:10px 12px;border-radius:var(--radius-lg);background:var(--surface-soft)}
.biometric-readiness-item__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--brand-primary) 8%,var(--surface-card));color:var(--brand-primary)}
.biometric-readiness-item div span{display:block;margin-top:2px;color:var(--text-muted);font-size:.78rem}
.biometric-readiness-item__state{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--surface-card);color:var(--text-muted);font-weight:700}
.biometric-readiness-panel[data-state="ready"] .biometric-readiness-panel__hero{background:color-mix(in srgb,var(--success) 10%,var(--surface-card))}
.biometric-readiness-panel[data-state="ready"] .biometric-readiness-panel__hero-icon{background:var(--success);color:#fff;box-shadow:0 8px 24px color-mix(in srgb,var(--success) 22%,transparent)}
.biometric-readiness-panel[data-state="ready"] .biometric-readiness-item__state{background:color-mix(in srgb,var(--success) 13%,var(--surface-card));color:var(--success)}
.biometric-compatibility-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4,16px);align-items:end}
.biometric-technical-details{margin:0!important;min-width:0;overflow:hidden}
.biometric-technical-details summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:54px;width:100%;padding:4px 0}
.biometric-technical-details summary::-webkit-details-marker{display:none}
.biometric-technical-details summary span{display:grid;gap:2px;min-width:0}
.biometric-technical-details summary small{display:block;color:var(--text-muted);font-weight:400;line-height:1.35}
.biometric-compatibility-actions{display:flex;justify-content:flex-end;gap:var(--space-2,8px);flex-wrap:wrap}
.biometric-compatibility-actions .btn{min-height:44px}
.biometric-camera-visor__state{display:inline-flex;align-items:center;gap:6px}
@media(max-width:980px){.biometric-compatibility-grid{grid-template-columns:1fr}.biometric-readiness-panel{order:2}.biometric-compatibility-footer{grid-template-columns:1fr}.biometric-compatibility-actions{justify-content:stretch}.biometric-compatibility-actions .btn{flex:1 1 auto}}
@media(max-width:640px){.biometric-compatibility-shell{gap:var(--space-3,12px)}.biometric-readiness-panel{padding:var(--space-2,8px)}.biometric-readiness-item{min-height:58px;grid-template-columns:36px minmax(0,1fr) 26px;gap:10px}.biometric-readiness-item__icon{width:36px;height:36px}.biometric-compatibility-actions{display:grid;grid-template-columns:1fr 1fr}.biometric-compatibility-actions .btn{width:100%;justify-content:center}.biometric-compatibility-actions #bdev-next{grid-column:1/-1}.biometric-technical-details summary small{white-space:normal}.biometric-camera-visor__hud{font-size:.72rem}}

/* DS-2026-084 — Biometric Compatibility Experience refinement */
.biometric-compatibility-start{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3,12px);align-items:center}
.biometric-compatibility-start>.btn{min-height:44px;white-space:nowrap}
.biometric-camera-visor__guide{display:none!important}
.biometric-technical-details{border-top:1px solid var(--border-subtle);border-radius:0;box-shadow:none;background:transparent;padding:0;overflow:visible}
.biometric-technical-details summary{min-height:58px;padding:10px 4px;gap:var(--space-3,12px)}
.biometric-technical-details summary::before{content:'⌄';display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:var(--radius-md);background:var(--surface-soft);color:var(--text-main);font-weight:700}
.biometric-technical-details[open] summary::before{content:'⌃'}
.biometric-technical-details>div{padding:0 4px var(--space-3,12px)}
.biometric-readiness-item__icon svg{width:20px;height:20px}
.biometric-readiness-item__icon{overflow:hidden;line-height:0}
.biometric-compatibility-actions{align-items:center}
@media(max-width:640px){.biometric-compatibility-start{grid-template-columns:1fr}.biometric-compatibility-start>.btn{width:100%;justify-content:center}.biometric-technical-details summary{align-items:flex-start}}

/* DS-2026-085 — Biometric compatibility vertical alignment */
.biometric-compatibility-start{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
.biometric-compatibility-start>.biometric-compatibility-shell__status{
  min-height:112px;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center!important;
  column-gap:var(--space-4,16px);
  padding-block:var(--space-5,20px)!important;
}
.biometric-compatibility-start>.biometric-compatibility-shell__status>.context-info-card__icon{
  align-self:center;
}
.biometric-compatibility-start>.biometric-compatibility-shell__status>div:not(.context-info-card__icon){
  align-self:center;
}
.biometric-compatibility-start>.btn{
  grid-column:1;
  grid-row:1;
  justify-self:end;
  align-self:center;
  margin-right:var(--space-5,20px);
  z-index:1;
}
.biometric-camera-tip{
  min-height:112px;
  display:flex!important;
  align-items:center!important;
  gap:var(--space-4,16px);
  padding-block:var(--space-5,20px)!important;
}
.biometric-camera-tip>.context-info-card__icon,
.biometric-camera-tip>div:not(.context-info-card__icon){align-self:center}
@media(max-width:640px){
  .biometric-compatibility-start>.biometric-compatibility-shell__status{
    grid-template-columns:auto minmax(0,1fr);
    padding-bottom:84px!important;
  }
  .biometric-compatibility-start>.btn{
    align-self:end;
    justify-self:stretch;
    margin:0 var(--space-5,20px) var(--space-5,20px);
    width:auto;
  }
  .biometric-camera-tip{min-height:96px}
}

/* ========================================================================
   v2.8.289 · Biometric Enrollment Experience v2
   DS-2026-087 — live server-backed quality guidance on canonical capture surface.
   ======================================================================== */
.biometric-camera-shell{max-height:620px;background:linear-gradient(145deg,var(--surface-subtle),var(--surface-card));box-shadow:inset 0 0 0 1px var(--line-soft)}
.biometric-camera-shell video{transition:opacity .3s ease}.biometric-camera-shell:not([data-biometric-state]) video{opacity:0}
.biometric-face-guide{inset:11% 25%;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--text-muted) 62%,transparent);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,opacity .3s ease}
.biometric-face-guide::before{border-width:3px;animation:none}.biometric-face-guide::after{inset:-14px}
.biometric-guide-scan{position:absolute;left:14%;right:14%;top:20%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-primario) 72%,white),transparent);opacity:0;box-shadow:0 0 16px color-mix(in srgb,var(--color-primario) 35%,transparent)}
.biometric-camera-shell[data-biometric-state="positioning"] .biometric-guide-scan{opacity:.8;animation:bioPremiumScan 2.4s ease-in-out infinite}
.biometric-camera-shell[data-biometric-state="ready"] .biometric-face-guide{box-shadow:0 0 0 2px color-mix(in srgb,var(--success) 78%,transparent),0 0 38px color-mix(in srgb,var(--success) 12%,transparent)}
.biometric-camera-shell[data-biometric-state="ready"] .biometric-face-guide::before{border-color:color-mix(in srgb,var(--success) 82%,transparent);clip-path:inset(0 0 0 0)}
.biometric-camera-status{display:grid;gap:2px;left:50%;right:auto;width:min(calc(100% - 32px),640px);transform:translateX(-50%);padding:12px 18px;background:color-mix(in srgb,var(--text-main) 82%,transparent);box-shadow:0 10px 32px rgba(0,0,0,.14)}
.biometric-camera-status strong{font-size:.92rem}.biometric-camera-status span{font-size:.76rem;opacity:.78}
.biometric-live-signal{position:absolute;top:var(--space-4);left:var(--space-4);display:grid;grid-template-columns:9px 1fr;column-gap:9px;align-items:center;max-width:min(360px,calc(100% - 32px));padding:9px 12px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--text-main) 78%,transparent);color:var(--surface-card);backdrop-filter:blur(14px);box-shadow:0 8px 26px rgba(0,0,0,.12);z-index:4}
.biometric-live-signal>span{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:var(--warning);box-shadow:0 0 0 5px color-mix(in srgb,var(--warning) 18%,transparent)}
.biometric-live-signal[data-ok="1"]>span{background:var(--success);box-shadow:0 0 0 5px color-mix(in srgb,var(--success) 18%,transparent)}
.biometric-live-signal strong{font-size:.78rem;line-height:1.15}.biometric-live-signal small{font-size:.68rem;line-height:1.25;opacity:.76}
.biometric-motion-progress{top:var(--space-4);left:auto;right:var(--space-4);transform:none;padding:8px 10px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-main) 54%,transparent);backdrop-filter:blur(10px)}
.biometric-motion-progress i{width:8px;height:8px}.biometric-motion-progress i.is-done{background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 18%,transparent)}
@keyframes bioPremiumScan{0%,100%{top:18%;opacity:.25}50%{top:76%;opacity:.95}}
@media(max-width:860px){.biometric-live-signal{top:12px;left:12px}.biometric-motion-progress{top:12px;right:12px}.biometric-camera-status{bottom:12px}.biometric-face-guide{inset:15% 14%}}
@media(prefers-reduced-motion:reduce){.biometric-guide-scan{animation:none!important}}

/* ========================================================================
   v2.8.290 · Biometric Enrollment Tracking & Workspace
   DS-2026-088 — canonical enrollment workspace and tracked face guidance.
   ======================================================================== */
.biometric-enrollment-workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr);gap:var(--space-5);align-items:start}
.biometric-enrollment-workspace>.card{margin:0;min-width:0}
.biometric-guidance-card{position:sticky;top:calc(var(--header-height,72px) + var(--space-4));padding:var(--space-5)}
.biometric-guidance-card .card-header{margin-bottom:var(--space-4)}
.biometric-guidance-list{display:grid;gap:var(--space-3)}
.biometric-guidance-list .context-info-card{min-height:0;padding:var(--space-4);align-items:center}
.biometric-guidance-list .context-info-card h3{margin:0 0 3px;font-size:.94rem}.biometric-guidance-list .context-info-card p{margin:0;font-size:.82rem;line-height:1.45}
.biometric-camera-card form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4);align-items:center;margin-top:var(--space-4)}
.biometric-consent{min-width:0;margin:0}.biometric-enrollment-actions{display:flex;justify-content:flex-end;align-items:center;min-width:max-content}
.biometric-enrollment-actions .btn{min-width:178px;justify-content:center}
.biometric-face-guide{opacity:calc(.58 + (var(--bio-track-confidence,.2) * .42));will-change:transform}
.biometric-face-guide[data-tracked="1"]{inset:var(--bio-guide-y) auto auto var(--bio-guide-x);width:var(--bio-guide-w);height:var(--bio-guide-h);transform:none!important;border-radius:47% 47% 43% 43%;transition:inset .11s linear,width .11s linear,height .11s linear,box-shadow .2s ease,opacity .2s ease}
.biometric-face-guide[data-tracked="1"]::after{inset:-10px}
.biometric-camera-shell[data-face-detected="1"] .biometric-face-guide{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primario) 70%,transparent),0 0 30px color-mix(in srgb,var(--color-primario) 10%,transparent)}
.biometric-camera-shell[data-biometric-state="searching"] .biometric-guide-scan{opacity:.65;animation:bioPremiumScan 1.8s ease-in-out infinite}
@media(max-width:1100px){.biometric-enrollment-workspace{grid-template-columns:1fr}.biometric-guidance-card{position:static;order:-1}.biometric-guidance-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.biometric-guidance-list{grid-template-columns:1fr}.biometric-camera-card form{grid-template-columns:1fr}.biometric-enrollment-actions,.biometric-enrollment-actions .btn{width:100%}.biometric-enrollment-actions .btn{min-width:0}}

/* ========================================================================
   v2.8.291 · Biometric Live Tracking & Capture Readiness
   DS-2026-089 — engine-bound tracking, distance coaching and integrated readiness.
   ======================================================================== */
.biometric-readiness{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-4);margin-bottom:var(--space-4);border-radius:var(--radius-lg);background:var(--surface-subtle);border:1px solid var(--line-soft)}
.biometric-readiness>div:first-child{display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:10px;align-items:center}.biometric-readiness .status-dot{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:var(--warning);box-shadow:0 0 0 5px color-mix(in srgb,var(--warning) 14%,transparent)}.biometric-readiness[data-ok="1"] .status-dot{background:var(--success);box-shadow:0 0 0 5px color-mix(in srgb,var(--success) 14%,transparent)}
.biometric-readiness strong{font-size:.9rem}.biometric-readiness small{font-size:.78rem;color:var(--text-muted)}.biometric-readiness-score{display:grid;text-align:right;line-height:1}.biometric-readiness-score strong{font-size:1.15rem}.biometric-readiness-score span{margin-top:4px;font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.biometric-distance-meter{position:absolute;left:var(--space-4);bottom:var(--space-4);z-index:5;display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-main) 72%,transparent);color:var(--surface-card);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.12)}.biometric-distance-meter>span{width:8px;height:8px;border-radius:50%;background:var(--success)}.biometric-distance-meter[data-state="warn"]>span{background:var(--warning)}.biometric-distance-meter strong{font-size:.72rem}
.biometric-camera-shell[data-face-detected="1"] .biometric-face-guide{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,opacity .22s ease}.biometric-camera-shell[data-biometric-state="ready"] .biometric-guide-scan{opacity:0!important;animation:none!important}
.biometric-camera-card .biometric-enrollment-actions{align-self:stretch}.biometric-camera-card .biometric-enrollment-actions .btn{min-height:44px}
@media(max-width:720px){.biometric-readiness{grid-template-columns:1fr}.biometric-readiness-score{text-align:left;padding-left:20px}.biometric-distance-meter{bottom:76px}.biometric-live-signal{max-width:calc(100% - 96px)}}

/* DS-2026-090 · Release Manager operational workspace */
.release-manager-kpi-grid{gap:var(--space-3)!important}.release-manager-kpi{grid-template-columns:var(--component-icon-box) minmax(0,1fr) auto!important;align-items:center!important;min-height:104px!important;background:var(--surface-card)!important;box-shadow:var(--shadow-xs)!important}.release-manager-kpi>span:last-child{color:var(--text-muted);line-height:0}.release-manager-kpi strong{font-size:var(--type-kpi,1.5rem)!important}.release-manager-kpi.is-success .context-info-icon{background:var(--semantic-success-soft)!important;color:var(--semantic-success)!important}.release-manager-kpi.is-info .context-info-icon{background:var(--status-info-bg)!important;color:var(--status-info-text)!important}.release-manager-kpi.is-primary .context-info-icon{background:color-mix(in srgb,var(--color-primario) 11%,var(--surface-card))!important;color:var(--color-primario)!important}.release-manager-kpi.is-warning .context-info-icon{background:var(--status-warning-bg)!important;color:var(--status-warning-text)!important}.release-manager-upload-card{background:linear-gradient(118deg,color-mix(in srgb,var(--color-primario) 10%,var(--surface-card)),var(--surface-card) 72%)!important}.release-manager-upload-card .card-header{margin-bottom:var(--space-3)!important}.release-manager-upload-card .ui-context-action-bar{align-items:stretch}.release-manager-upload-card .ui-dropzone{min-height:118px!important}.release-manager-upload-card .btn{align-self:center;min-width:190px;justify-content:center}.release-manager-modules-card{padding:0!important;overflow:hidden}.release-manager-modules-card>.card-header{padding:var(--space-5)!important;margin:0!important;border-bottom:1px solid var(--line-soft)}.release-manager-module-list{display:grid}.release-manager-module-row{display:grid;grid-template-columns:40px minmax(210px,1fr) auto minmax(140px,.7fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line-soft);min-width:0}.release-manager-module-row:last-child{border-bottom:0}.release-manager-module-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card));color:var(--color-primario);line-height:0}.release-manager-module-row strong,.release-manager-module-row small{display:block}.release-manager-module-row small{margin-top:3px;color:var(--text-muted);font-size:var(--type-meta)}.release-manager-module-meta{white-space:nowrap}.release-restore-expander{margin-top:var(--space-4)!important}.release-restore-expander>summary{margin-bottom:var(--space-2)!important}.release-candidates-card .release-item{padding:var(--space-3)!important}.release-candidates-card .release-test-summary{margin-top:var(--space-2)!important;padding:9px 12px!important}.release-candidates-card .release-tests{margin-top:var(--space-2)!important}.release-list-expander{margin-top:var(--space-4)!important}
@media(max-width:1180px){.release-manager-module-row{grid-template-columns:40px minmax(0,1fr) auto auto}.release-manager-module-meta{display:none}}@media(max-width:760px){.release-manager-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.release-manager-kpi{min-height:92px!important}.release-manager-upload-card .ui-context-action-bar{grid-template-columns:1fr}.release-manager-upload-card .btn{width:100%}.release-manager-module-row{grid-template-columns:40px minmax(0,1fr) auto;padding:var(--space-3)}.release-manager-module-row .status-pill{grid-column:2}.release-manager-module-row .btn{grid-column:3;grid-row:1/3}.release-restore-expander>summary{width:100%!important}}


/* ========================================================================
   DS-2026-092 · ContextInfoCard Mobile Resilience
   Design System 2.9.61 · Flōow 2.8.315
   Runtime evidence showed touch/mobile browsers can expose a wider layout
   viewport than the physical screen. ContextInfoCard and Release Manager KPI
   collections therefore keep their governed responsive geometry on coarse
   pointers as well as width breakpoints. Modules do not own this behavior.
   ======================================================================== */
@media (max-width:980px), (pointer:coarse) and (max-width:1366px){
  .release-manager-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--space-3)!important;
  }
  .release-manager-kpi{
    min-width:0!important;
    min-height:108px!important;
    grid-template-columns:36px minmax(0,1fr)!important;
    align-items:center!important;
    align-content:center!important;
    gap:var(--space-3)!important;
    padding:var(--space-3)!important;
  }
  .release-manager-kpi > span:last-child{
    display:none!important;
  }
  .release-manager-kpi .context-info-icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
  }
  .release-manager-kpi strong{
    font-size:clamp(1.05rem,4vw,1.3rem)!important;
    line-height:1.08!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .release-manager-kpi p{
    font-size:.72rem!important;
    line-height:1.35!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}

/* Touch devices using a desktop-like viewport must not keep four contextual
   cards in one row. This mirrors the certified tablet 2x2 contract. */
@media (pointer:coarse) and (min-width:761px) and (max-width:1366px){
  .context-info-grid:has(> .context-info-card:nth-child(4)):not(:has(> .context-info-card:nth-child(5))){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:1fr!important;
  }
}

/* Narrow mobile always stacks contextual guidance, while the compact Release
   Manager summary remains 2x2. Re-declared at the end of Authority so later
   certified variants cannot accidentally restore desktop tracks. */
@media (max-width:760px){
  .context-info-grid{
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:auto!important;
  }
  .context-info-grid > .context-info-card{
    min-height:auto!important;
  }
  .release-manager-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:390px){
  .release-manager-kpi-grid{
    gap:var(--space-2)!important;
  }
  .release-manager-kpi{
    min-height:104px!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    gap:var(--space-2)!important;
    padding:10px!important;
  }
  .release-manager-kpi .context-info-icon{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }
  .release-manager-kpi strong{
    font-size:1rem!important;
  }
  .release-manager-kpi p{
    font-size:.68rem!important;
  }
}


/* ========================================================================
   DS-2026-093 · Admin Mobile Card Governance
   Design System 2.9.62 · Flōow 2.8.317
   Release Manager summary KPIs adopt QuantificationCard as the canonical KPI
   owner and follow the canonical >3-card mobile rail, while storage guidance
   cards use explicit governed collection modifiers instead of selector
   inference. This removes reliance on :has() for critical responsive layout.
   ======================================================================== */
.release-manager-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:var(--space-3)!important;
  align-items:stretch!important;
}
.release-manager-summary-grid > .release-manager-summary-card{
  min-width:0!important;
  min-height:132px!important;
  padding:var(--space-4)!important;
  justify-content:flex-start!important;
  gap:var(--space-2)!important;
}
.release-manager-summary-card .kpi-card-icon{
  width:40px!important;
  height:40px!important;
}
.release-manager-summary-card .kpi-card-value{
  font-size:clamp(1.2rem,2vw,1.6rem)!important;
  line-height:1.05!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:var(--gris-950,#0f172a)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
html[data-theme="dark"] .release-manager-summary-card .kpi-card-value{
  color:var(--text-main,#f8fafc)!important;
}
.release-manager-summary-card .release-manager-summary-value{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  margin:0 0 4px!important;
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  font-size:clamp(1.2rem,2vw,1.6rem)!important;
  font-weight:700!important;
  line-height:1.05!important;
  font-variant-numeric:tabular-nums!important;
  white-space:nowrap!important;
}
html[data-theme="dark"] .release-manager-summary-card .release-manager-summary-value{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
}
.release-manager-summary-card .kpi-card-label{
  font-size:.86rem!important;
  line-height:1.25!important;
}
.release-manager-summary-card .kpi-card-subtitle{
  font-size:.74rem!important;
  line-height:1.35!important;
}
.release-manager-summary-card.is-success .kpi-card-icon{background:var(--semantic-success-soft)!important;color:var(--semantic-success)!important}
.release-manager-summary-card.is-info .kpi-card-icon{background:var(--status-info-bg)!important;color:var(--status-info-text)!important}
.release-manager-summary-card.is-primary .kpi-card-icon{background:color-mix(in srgb,var(--color-primario) 11%,var(--surface-card))!important;color:var(--color-primario)!important}
.release-manager-summary-card.is-warning .kpi-card-icon{background:var(--status-warning-bg)!important;color:var(--status-warning-text)!important}

.context-info-grid.context-info-grid--quad{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:1fr!important;
}
.context-info-grid.context-info-grid--triple{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:1fr!important;
}
.context-info-grid.context-info-grid--quad > .context-info-card,
.context-info-grid.context-info-grid--triple > .context-info-card{
  min-width:0!important;
  min-height:146px!important;
  align-items:flex-start!important;
}
.context-info-grid.context-info-grid--quad > .context-info-card h3,
.context-info-grid.context-info-grid--triple > .context-info-card h3{
  margin-bottom:6px!important;
}
.storage-trend-grid > .context-info-card p,
.storage-policy-grid > .context-info-card p,
.storage-governance-grid > .context-info-card p{
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
@media (max-width:1024px), (pointer:coarse) and (max-width:1366px){
  .context-info-grid.context-info-grid--quad,
  .context-info-grid.context-info-grid--triple{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:1fr!important;
  }
}
@media (max-width:760px){
  .release-manager-summary-grid > .release-manager-summary-card{
    min-height:124px!important;
    padding:12px!important;
  }
  .release-manager-summary-card .kpi-card-icon{
    width:36px!important;
    height:36px!important;
  }
  .release-manager-summary-card .kpi-card-value{
    font-size:1.15rem!important;
  }
  .release-manager-summary-card .kpi-card-label{
    font-size:.8rem!important;
  }
  .release-manager-summary-card .kpi-card-subtitle{
    font-size:.7rem!important;
  }
  .context-info-grid.context-info-grid--quad,
  .context-info-grid.context-info-grid--triple{
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:auto!important;
  }
  .context-info-grid.context-info-grid--quad > .context-info-card,
  .context-info-grid.context-info-grid--triple > .context-info-card{
    min-height:auto!important;
  }
}
@media (max-width:390px){
  .release-manager-summary-grid > .release-manager-summary-card{
    min-height:118px!important;
    padding:10px!important;
  }
  .release-manager-summary-card .kpi-card-icon{
    width:32px!important;
    height:32px!important;
  }
  .release-manager-summary-card .kpi-card-value{
    font-size:1rem!important;
  }
  .release-manager-summary-card .kpi-card-label{
    font-size:.74rem!important;
  }
  .release-manager-summary-card .kpi-card-subtitle{
    font-size:.66rem!important;
  }
}

/* DS-2026-094 · Dashboard mobile card governance + quick actions realignment */
.today-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4,16px);margin-top:var(--space-4,16px)}
.today-kpi-grid>.kpi-card{margin:0!important;min-height:156px}
.today-kpi-grid .kpi-card-label{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;word-break:normal;overflow-wrap:break-word;text-wrap:balance;min-height:2.5em}
.today-kpi-grid .kpi-card-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;word-break:normal;overflow-wrap:break-word;min-height:2.7em}
.dashboard-command-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:var(--space-4,16px);margin-top:var(--space-4,16px);align-items:stretch}
.dashboard-command-row .dashboard-command-card{margin:0!important;height:100%;min-height:128px;align-items:flex-start;padding:18px 18px 16px}
.dashboard-command-row .dashboard-command-card .command-hint-icon{width:42px;height:42px;flex-basis:42px;border-radius:var(--radius-control)}
.dashboard-command-row .dashboard-command-card strong{font-size:.94rem}
.dashboard-command-row .dashboard-command-card small{margin-top:4px;font-size:.74rem;line-height:1.45}
.dashboard-quick-actions-card{padding:16px!important}
.dashboard-quick-actions-header{margin-bottom:12px}
.dashboard-quick-actions-header h2{margin-top:2px}
.dashboard-quick-actions-grid{display:grid;grid-template-columns:1fr;gap:10px}
.dashboard-quick-action-tile{min-width:0;display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border-soft,var(--border));border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-main);text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease}
.dashboard-quick-action-tile:hover,.dashboard-quick-action-tile:focus-visible{border-color:color-mix(in srgb,var(--color-primario) 28%,var(--border-soft,var(--border)));background:var(--brand-softer);box-shadow:var(--shadow-xs);text-decoration:none;transform:translateY(-1px)}
.dashboard-quick-action-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--component-icon-radius);background:var(--brand-soft);color:var(--color-primario)}
.dashboard-quick-action-copy{min-width:0}
.dashboard-quick-action-copy strong,.dashboard-quick-action-copy small{display:block;min-width:0}
.dashboard-quick-action-copy strong{font-size:.72rem;line-height:1.3}
.dashboard-quick-action-copy small{margin-top:3px;color:var(--text-muted);font-size:.6rem;line-height:1.42}
.dashboard-quick-action-chevron{color:var(--text-subtle)}
@media(max-width:1180px){.today-primary-grid,.dashboard-command-row,.dashboard-lower-grid{grid-template-columns:1fr}.dashboard-attention-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.today-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.today-kpi-grid>.kpi-card{min-height:var(--quantification-mobile-block-size,164px)}.dashboard-command-row .dashboard-command-card{min-height:108px}.dashboard-quick-actions-card{padding:14px!important}}
@media(max-width:760px){.dashboard-command-hero .dashboard-hero-actions{width:100%;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.dashboard-local-context{text-align:left}.dashboard-attention-items{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.dashboard-attention-item{flex:0 0 250px;scroll-snap-align:start}.today-week-bars{gap:5px!important;height:120px!important}.dashboard-month-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-activity-row{grid-template-columns:38px 28px minmax(0,1fr)}.dashboard-activity-row>.status-pill{display:none}}
@media(max-width:680px){.today-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.today-kpi-grid>.kpi-card{min-height:var(--quantification-mobile-block-size,164px)}.today-people-groups{grid-template-columns:1fr}.today-person-list>div{grid-template-columns:34px minmax(0,1fr)}.today-person-list small{grid-column:2}.today-week-bars{height:130px}}
@media(hover:none) and (pointer:coarse) and (max-width:1024px){.today-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.today-kpi-grid>.kpi-card{min-height:var(--quantification-mobile-block-size,164px)}}

/* =======================================================================
   Dashboard monthly numeralia · DS-2026-095
   The monthly QuantificationCard collection fills its parent surface instead
   of leaving an artificial blank band below the KPI row.
   ======================================================================= */
.dashboard-month-summary{
  display:flex!important;
  flex-direction:column!important;
  min-height:0;
}
.dashboard-month-summary>.card-header{
  flex:0 0 auto;
}
.dashboard-month-summary>.dashboard-month-kpis{
  flex:1 1 auto;
  align-items:stretch!important;
  min-height:0;
}
.dashboard-month-summary>.dashboard-month-kpis>.kpi-card{
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
}
@media(max-width:1180px){
  .dashboard-month-summary>.dashboard-month-kpis>.kpi-card{
    min-height:var(--quantification-block-size,156px)!important;
  }
}
@media(max-width:760px){
  .dashboard-month-summary>.dashboard-month-kpis{
    align-items:stretch!important;
  }
  .dashboard-month-summary>.dashboard-month-kpis>.kpi-card{
    height:auto!important;
    min-height:var(--quantification-mobile-block-size,164px)!important;
  }
}

/* ========================================================================
   DS-2026-098 · Chart Inspector Interaction Authority
   Replaces browser-native SVG focus boxes with a canonical, accessible
   DataViz inspection state. Touch/click persist detail, fine-pointer hover
   previews it, keyboard focus exposes it, and Escape/outside press clears it.
   White Label owns non-semantic series accents; semantic series stay semantic.
   ======================================================================== */
.chart-inspector-host{
  position:relative;
}
[data-chart-motion] [data-chart-mark]{
  outline:none!important;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  transition:filter var(--motion-micro,160ms) ease,opacity var(--motion-micro,160ms) ease,stroke-width var(--motion-micro,160ms) ease;
}
[data-chart-motion] [data-chart-mark]:focus{
  outline:none!important;
}
[data-chart-motion] [data-chart-mark]:focus-visible{
  filter:drop-shadow(0 0 1px var(--surface-card)) drop-shadow(0 0 4px color-mix(in srgb,var(--chart-brand-1) 66%,transparent));
}
[data-chart-motion][data-chart-has-selection="true"] [data-chart-mark]:not(.is-chart-selected){
  filter:saturate(.55) opacity(.42);
}
[data-chart-motion] [data-chart-mark].is-chart-selected{
  filter:saturate(1.08) brightness(1.03) drop-shadow(0 3px 8px color-mix(in srgb,var(--chart-brand-1) 22%,transparent));
}
.analytics-line-point [data-chart-mark].is-chart-selected{
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(1.28);
}
.analytics-donut-chart [data-chart-mark].is-chart-selected{
  stroke-width:26px;
}

.chart-inspector{
  --chart-inspector-accent:var(--chart-brand-1);
  position:absolute;
  z-index:8;
  top:var(--chart-inspector-top,88px);
  width:min(238px,calc(100% - 28px));
  min-width:188px;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--border-default) 78%,transparent);
  border-radius:var(--radius-lg,14px);
  background:color-mix(in srgb,var(--surface-card) 94%,transparent);
  color:var(--text-main);
  box-shadow:0 10px 28px rgba(15,23,42,.12),inset 0 1px 0 color-mix(in srgb,var(--text-main) 4%,transparent);
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity var(--motion-micro,160ms) ease,transform var(--motion-micro,160ms) ease;
}
.chart-inspector[hidden]{display:none!important}
.chart-inspector.is-visible{
  opacity:1;
  transform:translateY(0);
}
.chart-inspector[data-side="left"]{
  left:14px;
  right:auto;
}
.chart-inspector[data-side="right"]{
  right:14px;
  left:auto;
}
.chart-inspector-head{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  margin-bottom:7px;
}
.chart-inspector-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:var(--radius-pill);
  background:var(--chart-inspector-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--chart-inspector-accent) 13%,transparent);
}
.chart-inspector-label{
  overflow:hidden;
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
  font-weight:500;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chart-inspector-main{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.chart-inspector-metric{
  min-width:0;
  color:var(--text-main);
  font-size:var(--type-caption,.72rem);
  font-weight:500;
  line-height:1.3;
}
.chart-inspector-value{
  flex:0 0 auto;
  color:var(--text-main);
  font-size:1rem;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
  letter-spacing:-.02em;
}
.chart-inspector-context{
  margin-top:6px;
  color:var(--text-muted);
  font-size:.66rem;
  line-height:1.35;
}
.chart-inspector-context-2{
  margin-top:2px;
  color:var(--text-subtle,var(--text-muted));
}
html[data-theme="dark"] .chart-inspector{
  background:color-mix(in srgb,var(--surface-elevated) 94%,transparent);
  box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
}
@media(max-width:560px){
  .chart-inspector{
    width:min(218px,calc(100% - 20px));
    min-width:170px;
    padding:10px 11px;
  }
  .chart-inspector[data-side="left"]{left:10px}
  .chart-inspector[data-side="right"]{right:10px}
}
@media(prefers-reduced-motion:reduce){
  [data-chart-motion] [data-chart-mark],
  .chart-inspector{
    transition:none!important;
  }
}
@media print{
  .chart-inspector{display:none!important}
}

/* DS-2026-098 · line-point touch target refinement */
.analytics-line-mark{
  transform-box:fill-box;
  transform-origin:center;
}
.analytics-line-hit-target{
  fill:transparent!important;
  stroke:none!important;
}
.analytics-line-point-core{
  fill:var(--surface-card);
  stroke:var(--chart-brand-1);
  stroke-width:3;
  pointer-events:none;
}
.analytics-line-point [data-chart-mark].is-chart-selected .analytics-line-point-core{
  stroke-width:3.5;
}

/* ========================================================================
   DS-2026-099 · Input Modality + Analytics Control Bar Authority
   Pointer/touch interaction must never expose browser-native selection/focus
   rectangles. Keyboard users retain the governed focus-visible contract.
   Analytics period controls live before charts and share one aligned toolbar.
   ======================================================================== */

/* Native tap/select paint is not part of the Floow visual language. The
   actual active/selected state continues to be owned by each canonical
   component (buttons, tabs, Chart Inspector, etc.). */
:where(
  a,
  button,
  summary,
  [role="button"],
  [role="menuitem"],
  [role="tab"],
  [role="option"],
  [role="switch"],
  [role="checkbox"],
  [data-chart-mark],
  [tabindex]:not([tabindex="-1"])
){
  -webkit-tap-highlight-color:transparent!important;
}
:where(
  button,
  summary,
  [role="button"],
  [role="menuitem"],
  [role="tab"],
  [role="option"],
  [role="switch"],
  [role="checkbox"],
  [data-chart-mark]
){
  -webkit-user-select:none;
  user-select:none;
}

/* Some Chromium/Samsung tablet builds classify a tap-created focus as
   :focus-visible. Input-modality ownership prevents that synthetic pointer
   focus from painting the global purple ring, while the next keyboard event
   immediately restores canonical keyboard focus visibility. */
:root[data-input-modality="pointer"] :where(
  a,
  button,
  summary,
  [role="button"],
  [role="menuitem"],
  [role="tab"],
  [role="option"],
  [role="switch"],
  [role="checkbox"],
  [data-chart-mark],
  [tabindex]:not(input):not(select):not(textarea):not([tabindex="-1"])
):focus,
:root[data-input-modality="pointer"] :where(
  a,
  button,
  summary,
  [role="button"],
  [role="menuitem"],
  [role="tab"],
  [role="option"],
  [role="switch"],
  [role="checkbox"],
  [data-chart-mark],
  [tabindex]:not(input):not(select):not(textarea):not([tabindex="-1"])
):focus-visible{
  outline:none!important;
  box-shadow:none!important;
}

/* SVG marks use Chart Inspector as the visible focus/selection replacement.
   Clear both outline AND the global focus box-shadow; the latter was the
   remaining rectangular orange/purple selection visible in tablet runtime. */
[data-chart-motion] [data-chart-mark]:focus,
[data-chart-motion] [data-chart-mark]:focus-visible{
  outline:none!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
[data-chart-motion] [data-chart-mark]:focus-visible{
  filter:drop-shadow(0 0 1px var(--surface-card)) drop-shadow(0 0 4px color-mix(in srgb,var(--chart-brand-1) 66%,transparent));
}

/* PeriodSelector top control bar. Removes the legacy divider inherited from
   app.css and keeps range + quick actions on one visual level. */
.analytics-period-selector.analytics-period-selector--top{
  display:grid;
  grid-template-columns:minmax(250px,1fr) auto;
  align-items:center;
  gap:var(--space-4);
  margin:0 0 var(--space-4);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
}
.analytics-period-selector--top .analytics-period-summary{
  margin:0;
  min-width:0;
}
.analytics-period-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-2);
  min-width:0;
}
.analytics-period-selector--top .analytics-period-presets{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  flex-wrap:nowrap;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.analytics-period-selector--top :is(.analytics-period-presets>a,.analytics-period-custom>summary){
  min-height:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.analytics-period-selector--top .analytics-period-presets>a[aria-current="true"]{
  border-color:color-mix(in srgb,var(--color-primario) 24%,var(--border-subtle));
  background:var(--brand-softer);
  color:var(--color-primario);
}
.analytics-period-selector--top .analytics-period-custom{
  width:auto;
  flex:0 0 auto;
}
.analytics-period-selector--top .analytics-period-custom>summary{
  width:auto;
}
.analytics-period-selector--top .analytics-period-custom::before,
.analytics-period-selector--top .analytics-period-custom::after,
.analytics-period-selector--top .analytics-period-presets::before,
.analytics-period-selector--top .analytics-period-presets::after{
  content:none!important;
  display:none!important;
}

/* ChartCard geometry is intentionally consistent on analytic desktop/tablet.
   The donut remains full width because it has chart + status legend, but its
   vertical block size now belongs to the same family as sibling ChartCards. */
.analytics-primary-grid>.analytics-chart-panel,
.analytics-people-grid>.analytics-chart-panel{
  min-height:340px;
}
.analytics-donut-panel{
  grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);
  column-gap:var(--space-6);
  align-items:center;
}
.analytics-donut-panel .analytics-chart-heading{
  align-self:start;
}
.analytics-donut-chart{
  width:224px!important;
  height:224px!important;
  max-width:100%;
}
.analytics-status-legend{
  align-self:center;
}

@media(max-width:980px){
  .analytics-period-selector.analytics-period-selector--top{
    grid-template-columns:1fr;
  }
  .analytics-period-controls{
    justify-content:space-between;
  }
  .analytics-primary-grid>.analytics-chart-panel,
  .analytics-people-grid>.analytics-chart-panel{
    min-height:320px;
  }
  .analytics-donut-panel{
    grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);
  }
}
@media(max-width:767px){
  .analytics-period-selector.analytics-period-selector--top{
    align-items:stretch;
    padding:var(--space-3);
  }
  .analytics-period-controls{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:var(--space-2);
  }
  .analytics-period-selector--top .analytics-period-presets{
    justify-content:flex-start;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .analytics-period-selector--top .analytics-period-presets::-webkit-scrollbar{display:none}
  .analytics-period-selector--top .analytics-period-presets>a{scroll-snap-align:start}
  .analytics-period-selector--top .analytics-period-custom,
  .analytics-period-selector--top .analytics-period-custom>summary{
    width:auto;
  }
  .analytics-period-selector--top .analytics-period-form{
    position:absolute;
    right:0;
    width:min(560px,calc(100vw - 32px));
    grid-template-columns:1fr;
    margin-top:var(--space-2);
    box-shadow:var(--shadow-lg);
  }
  .analytics-primary-grid>.analytics-chart-panel,
  .analytics-people-grid>.analytics-chart-panel{
    min-height:0;
  }
  .analytics-donut-panel{
    grid-template-columns:1fr;
    row-gap:var(--space-3);
  }
  .analytics-donut-chart{
    width:208px!important;
    height:208px!important;
  }
}
@media(max-width:420px){
  .analytics-period-controls{
    grid-template-columns:1fr;
  }
  .analytics-period-selector--top .analytics-period-custom,
  .analytics-period-selector--top .analytics-period-custom>summary{
    width:100%;
  }
}

/* DS-2026-100 · Analytics Executive Foundation
   Period context precedes every metric, QuantificationCard may host a compact
   White Label sparkline, and InsightCard exposes evidence without creating a
   second dashboard/component family. */
.analytics-period-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.analytics-period-copy>strong{
  color:var(--text-main);
  font-size:var(--type-body,.84rem);
  font-variant-numeric:tabular-nums;
}
.analytics-period-compare{
  display:block;
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
  line-height:1.35;
}
.analytics-period-selector--top .analytics-period-controls{
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:end;
  gap:var(--space-2);
}
.analytics-data-freshness{
  grid-column:1/-1;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  color:var(--text-muted);
  font-size:var(--type-caption,.7rem);
  line-height:1.2;
  white-space:nowrap;
}
.analytics-data-freshness svg{opacity:.72}

.analytics-kpi-card{
  min-width:0;
  min-height:132px!important;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto 1fr;
  align-content:start;
  column-gap:var(--space-3);
  row-gap:var(--space-2);
}
.analytics-kpi-card>.kpi-card-icon{
  grid-column:1/-1;
  margin:0;
}
.analytics-kpi-copy{
  grid-column:1/-1;
  min-width:0;
}
.analytics-kpi-card .kpi-card-value{
  font-variant-numeric:tabular-nums;
}
.analytics-kpi-footer{
  grid-column:1/-1;
  align-self:end;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:var(--space-2);
}
.analytics-kpi-footer .kpi-card-subtitle{
  min-width:0;
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-caption,.68rem);
  line-height:1.35;
}
.analytics-kpi-sparkline{
  width:96px;
  height:34px;
  display:block;
  overflow:visible;
  color:var(--chart-brand-1);
}
.analytics-kpi-sparkline-line{
  fill:none;
  stroke:var(--chart-brand-1);
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:0;
}
.analytics-kpi-sparkline-area{pointer-events:none}

/* Snapshot-only microvisual is part of the canonical QuantificationCard, not a
   mobile-only exception. SVG rect/circle shapes default to black when no fill
   is declared, so White Label ownership must be global across every viewport. */
.analytics-kpi-snapshotbar-track{
  fill:color-mix(in srgb,var(--text-muted) 16%,transparent);
}
.analytics-kpi-snapshotbar-fill,
.analytics-kpi-snapshotbar-marker{
  fill:currentColor;
}

/* Executive Analytics uses the same QuantificationCard anatomy as the rest of
   Flōow. The legacy 150px StatCard clamp no longer fits icon + metric + context
   + microvisual + authorized action, so the canonical owner restores the complete
   anatomy and symmetric card breathing. */
.analytics-kpi-grid--executive > .analytics-kpi-card.quantification-card{
  height:240px!important;
  min-height:240px!important;
  max-height:240px!important;
  padding:var(--space-5,20px)!important;
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  overflow:hidden!important;
  box-sizing:border-box;
}
.analytics-kpi-grid--executive > .analytics-kpi-card.quantification-card > .kpi-card-icon{
  flex:0 0 auto;
  margin:0 0 var(--space-3,12px);
}
.analytics-kpi-grid--executive > .analytics-kpi-card.quantification-card .analytics-kpi-copy{
  flex:0 0 auto;
}
.analytics-kpi-grid--executive > .analytics-kpi-card.quantification-card .analytics-kpi-footer{
  flex:0 0 auto;
  width:100%;
  min-height:82px;
  margin-top:auto;
  padding-top:var(--space-3,12px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "context visual"
    "action action";
  align-items:end;
  gap:var(--space-1,4px) var(--space-2,8px);
  box-sizing:border-box;
}
.analytics-kpi-grid--executive > .analytics-kpi-card.quantification-card .analytics-kpi-footer .kpi-card-subtitle{
  grid-area:context;
}
.analytics-kpi-grid--executive > .analytics-kpi-card.quantification-card .analytics-kpi-sparkline{
  grid-area:visual;
}
.analytics-kpi-grid--executive > .analytics-kpi-card.quantification-card .analytics-kpi-drilldown{
  grid-area:action;
  justify-self:start;
  margin-left:0;
}

/* Certified QuantificationCard variant: Dashboard microtrend.
   One structural owner: Design System Authority. The footer remains inside the
   card with symmetric breathing room; flat series are centered by the renderer. */
.analytics-kpi-card--dashboard{
  min-height:208px!important;
  height:auto!important;
  padding:var(--space-5,20px)!important;
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  overflow:hidden;
  box-sizing:border-box;
}
.analytics-kpi-card--dashboard>.kpi-card-icon{
  flex:0 0 auto;
  margin:0 0 var(--space-3,12px);
}
.analytics-kpi-card--dashboard .analytics-kpi-copy{
  flex:0 0 auto;
  min-width:0;
}
.analytics-kpi-card--dashboard .analytics-kpi-footer{
  flex:0 0 auto;
  width:100%;
  min-height:46px;
  margin-top:auto;
  padding-top:var(--space-3,12px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 124px;
  align-items:end;
  column-gap:var(--space-4,16px);
  overflow:hidden;
  box-sizing:border-box;
}
.analytics-kpi-card--dashboard .analytics-kpi-footer .kpi-card-subtitle{
  min-height:0!important;
  margin:0!important;
  padding:0 0 3px!important;
  align-self:end;
  -webkit-line-clamp:2;
}
.analytics-kpi-card--dashboard .analytics-kpi-sparkline{
  width:124px;
  height:42px;
  max-width:100%;
  align-self:end;
  justify-self:end;
  overflow:visible;
  color:var(--chart-brand-1,var(--color-primario));
  opacity:1;
  visibility:visible;
}
.analytics-kpi-card--dashboard .analytics-kpi-sparkline-line{
  stroke:var(--chart-brand-1,var(--color-primario));
  stroke-width:2.35;
}
@media(max-width:680px){
  .analytics-kpi-card--dashboard{
    min-height:216px!important;
    padding:var(--space-4,16px)!important;
  }
  .analytics-kpi-card--dashboard>.kpi-card-icon{margin-bottom:var(--space-2,8px)}
  .quantification-collection:not(.is-mobile-card-rail) > .analytics-kpi-card--dashboard.quantification-card{height:216px!important;min-height:216px!important;max-height:216px!important}
  .analytics-kpi-card--dashboard .analytics-kpi-footer{
    min-height:58px;
    padding-top:var(--space-2,8px);
    grid-template-columns:1fr;
    grid-template-rows:auto 28px;
    row-gap:4px;
    column-gap:0;
  }
  .analytics-kpi-card--dashboard .analytics-kpi-footer .kpi-card-subtitle{width:100%;padding-bottom:0!important}
  .analytics-kpi-card--dashboard .analytics-kpi-sparkline{width:100%;height:28px;justify-self:stretch}
}

.analytics-insight-grid{
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.analytics-insight-card{
  min-height:132px;
  align-items:start;
}
.analytics-insight-copy{min-width:0}
.analytics-insight-copy small{
  display:block;
  margin-top:8px;
  color:var(--text-secondary);
  font-size:var(--type-caption,.68rem);
  line-height:1.4;
  font-weight:500;
}
.analytics-insight-card em{
  align-self:start;
  padding:5px 8px;
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  font-size:var(--type-caption,.7rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
}

/* Composition charts share one compact visual rhythm; empty plot space is not
   used merely to equal the taller executive chart row. */
.analytics-people-grid>.analytics-chart-panel:not(.analytics-donut-panel){
  min-height:286px;
}
.analytics-people-grid .analytics-chart-scroll--wide{
  min-height:176px;
}
.analytics-donut-panel{
  min-height:304px;
}
.analytics-donut-chart{
  width:240px!important;
  height:240px!important;
}

@media(max-width:980px){
  .analytics-period-selector--top .analytics-period-controls{
    justify-content:start;
  }
  .analytics-data-freshness{justify-content:flex-start}
  .analytics-people-grid>.analytics-chart-panel:not(.analytics-donut-panel){
    min-height:270px;
  }
}
@media(max-width:767px){
  .analytics-period-selector--top .analytics-period-controls{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
  }
  .analytics-data-freshness{
    grid-column:1/-1;
    justify-content:flex-start;
  }
  .analytics-kpi-card{
    min-height:126px!important;
  }
  .analytics-kpi-footer{
    grid-template-columns:1fr;
  }
  .analytics-kpi-sparkline{
    width:82px;
    height:30px;
  }
  .analytics-insight-grid{
    display:flex;
  }
  .analytics-insight-card{
    min-height:144px;
  }
  .analytics-people-grid>.analytics-chart-panel:not(.analytics-donut-panel),
  .analytics-donut-panel{
    min-height:0;
  }
  .analytics-donut-chart{
    width:216px!important;
    height:216px!important;
  }
}
@media(max-width:420px){
  .analytics-period-selector--top .analytics-period-controls{
    grid-template-columns:1fr;
  }
  .analytics-data-freshness{grid-column:auto}
  .analytics-period-compare{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .analytics-kpi-sparkline-line{
    transition:none!important;
    animation:none!important;
  }
}

/* ========================================================================
   DS-2026-101 · Analytics Drill-down Authority
   Every actionable analytic metric can expose the authorized records that
   compose it. Chart Inspector owns the lightweight explanation; the canonical
   RHMotionModal owns deeper evidence. No sensitive field is exposed by default.
   ======================================================================== */
.chart-inspector{
  pointer-events:auto;
}
.chart-inspector-live{min-width:0}
.chart-inspector-action{
  width:100%;
  min-height:32px;
  margin-top:9px;
  padding:7px 8px 0;
  border:0;
  border-top:1px solid color-mix(in srgb,var(--border-default) 72%,transparent);
  background:transparent;
  color:var(--chart-inspector-accent,var(--color-primario));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font:inherit;
  font-size:.7rem;
  font-weight:700;
  cursor:pointer;
}
.chart-inspector-action[hidden]{display:none!important}
.chart-inspector-action:focus-visible{
  outline:2px solid color-mix(in srgb,var(--chart-inspector-accent,var(--color-primario)) 65%,transparent);
  outline-offset:2px;
  border-radius:var(--radius-sm,8px);
}
.analytics-kpi-footer{
  position:relative;
  flex-wrap:wrap;
}
.analytics-kpi-drilldown,
.analytics-insight-action{
  border:0;
  background:transparent;
  color:var(--color-primario);
  font:inherit;
  font-size:var(--type-caption,.72rem);
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 0;
  min-height:28px;
}
.analytics-kpi-drilldown{
  margin-left:auto;
}
.analytics-insight-action{
  margin-top:7px;
}
.analytics-kpi-drilldown:hover,
.analytics-insight-action:hover{color:var(--brand-strong,var(--color-primario))}
.analytics-kpi-drilldown:focus-visible,
.analytics-insight-action:focus-visible{
  outline:2px solid color-mix(in srgb,var(--color-primario) 55%,transparent);
  outline-offset:3px;
  border-radius:var(--radius-sm,8px);
}

.analytics-drilldown-dialog{
  width:min(920px,calc(100vw - 32px));
  max-height:min(780px,calc(100vh - 32px));
}
.analytics-drilldown-body{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  min-height:260px;
}
.analytics-drilldown-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-2);
}
.analytics-drilldown-summary>div{
  min-width:0;
  padding:var(--space-3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-subtle,var(--surface-soft));
}
.analytics-drilldown-summary strong{
  display:block;
  margin-top:4px;
  color:var(--text-main);
  font-size:.92rem;
  font-weight:700;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.analytics-drilldown-feedback{
  padding:var(--space-5) var(--space-3);
  text-align:center;
  color:var(--text-muted);
}
.analytics-drilldown-feedback.is-error{
  color:var(--semantic-danger);
}
.analytics-drilldown-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.analytics-drilldown-record{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3);
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
}
.analytics-drilldown-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--brand-softer);
  color:var(--color-primario);
  font-size:.72rem;
  font-weight:700;
}
.analytics-drilldown-record-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.analytics-drilldown-record-main>strong{
  color:var(--text-main);
  font-size:.9rem;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.analytics-drilldown-record-main>span{
  color:var(--text-muted);
  font-size:.74rem;
  line-height:1.3;
}
.analytics-drilldown-record-meta{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:4px;
}
.analytics-drilldown-record-meta .status-pill{
  min-height:22px;
  padding:3px 7px;
  font-size:.65rem;
}
.analytics-drilldown-date{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 7px;
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  color:var(--text-muted);
  font-size:.65rem;
  font-weight:500;
  line-height:1;
}
.analytics-drilldown-more{
  display:flex;
  justify-content:center;
  padding-top:4px;
}
.analytics-drilldown-footnote{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:auto;
  font-size:.72rem;
}
.analytics-drilldown-modal.is-loading .analytics-drilldown-list{
  opacity:.58;
  pointer-events:none;
}
html[data-theme="dark"] .analytics-drilldown-summary>div,
html[data-theme="dark"] .analytics-drilldown-record{
  border-color:color-mix(in srgb,var(--border-default) 76%,transparent);
}
@media(max-width:700px){
  .analytics-drilldown-dialog{
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
  }
  .analytics-drilldown-summary{
    grid-template-columns:1fr;
  }
  .analytics-drilldown-record{
    grid-template-columns:38px minmax(0,1fr);
    align-items:start;
  }
  .analytics-drilldown-avatar{width:36px;height:36px}
  .analytics-drilldown-open{
    grid-column:2;
    justify-self:start;
    margin-top:3px;
  }
  .analytics-drilldown-footnote{display:none}
  .analytics-kpi-drilldown{margin-left:0}
}
@media print{
  .analytics-kpi-drilldown,
  .analytics-insight-action,
  .analytics-drilldown-modal{display:none!important}
}

/* ========================================================================
   DS-2026-102 · Metrics Registry + Segmentation Engine
   Analytics Explorer reuses ChartCard geometry and canonical FormControls.
   Metric/dimension availability is permission-driven and rendered server-side;
   White Label continues to own non-semantic chart series.
   ======================================================================== */
.analytics-segmentation-surface{
  margin-top:var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  min-width:0;
}
.analytics-segmentation-header{
  margin:0;
}
.analytics-segmentation-header .status-pill{
  align-self:center;
  flex:0 0 auto;
}
.analytics-segmentation-toolbar{
  display:grid;
  grid-template-columns:minmax(190px,.9fr) 32px minmax(190px,.9fr) minmax(220px,1.2fr);
  align-items:end;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-soft);
}
.analytics-segmentation-control{
  min-width:0;
}
.analytics-segmentation-control label{
  display:block;
  margin-bottom:6px;
  color:var(--text-secondary);
  font-size:var(--type-caption,.72rem);
  font-weight:700;
}
.analytics-segmentation-control select{
  width:100%;
  min-width:0;
}
.analytics-segmentation-connector{
  width:32px;
  height:40px;
  display:grid;
  place-items:center;
  align-self:end;
  color:var(--text-muted);
}
.analytics-segmentation-context{
  min-width:0;
  min-height:40px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  text-align:right;
}
.analytics-segmentation-context strong{
  color:var(--text-main);
  font-size:.92rem;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.analytics-segmentation-context small{
  color:var(--text-muted);
  font-size:var(--type-caption,.68rem);
  line-height:1.2;
}
.analytics-segmentation-card{
  min-height:318px;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.analytics-segmentation-copy{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  min-width:0;
}
.analytics-segmentation-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-lg);
  background:var(--brand-softer);
  color:var(--color-primario);
}
.analytics-segmentation-copy>div{
  min-width:0;
}
.analytics-segmentation-copy strong{
  display:block;
  color:var(--text-main);
  font-size:1rem;
  line-height:1.25;
}
.analytics-segmentation-copy p{
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:.78rem;
  line-height:1.45;
}
.analytics-segmentation-chart{
  min-height:190px;
  display:flex;
  align-items:center;
  transition:opacity .18s ease;
}
.analytics-segmentation-chart>svg{
  width:100%;
  max-width:100%;
}
.analytics-segmentation-surface.is-loading .analytics-segmentation-chart{
  opacity:.42;
  pointer-events:none;
}
.analytics-segmentation-feedback{
  padding:8px 10px;
  border-radius:var(--radius-md);
  background:var(--surface-soft);
  color:var(--text-muted);
  font-size:.75rem;
  line-height:1.35;
}
.analytics-segmentation-feedback.is-error{
  color:var(--semantic-danger);
}
.analytics-segmentation-footnote{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin-top:auto;
  padding-top:var(--space-2);
  border-top:1px solid var(--border-subtle);
  color:var(--text-muted);
  font-size:var(--type-caption,.68rem);
  line-height:1.4;
}
.analytics-segmentation-footnote svg{
  flex:0 0 auto;
  margin-top:1px;
}
@media(max-width:980px){
  .analytics-segmentation-toolbar{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .analytics-segmentation-connector{display:none}
  .analytics-segmentation-context{
    grid-column:1/-1;
    align-items:flex-start;
    text-align:left;
    min-height:0;
    padding-top:2px;
  }
}
@media(max-width:640px){
  .analytics-segmentation-toolbar{
    grid-template-columns:1fr;
    padding:var(--space-3);
  }
  .analytics-segmentation-context{grid-column:auto}
  .analytics-segmentation-card{min-height:0}
  .analytics-segmentation-chart{min-height:170px}
  .analytics-segmentation-header .status-pill{display:none}
}
@media(prefers-reduced-motion:reduce){
  .analytics-segmentation-chart{transition:none!important}
}
@media print{
  .analytics-segmentation-toolbar,
  .analytics-segmentation-feedback,
  .analytics-segmentation-footnote{display:none!important}
}

/* ========================================================================
   DS-2026-103 · Analytics Intelligence
   InsightCard evolves from a headline into an explainable decision surface:
   observation -> measured explanation -> evidence -> authorized action.
   No inferred causality and no parallel card/chart family.
   ======================================================================== */
.analytics-intelligence-header{
  align-items:flex-start;
}
.analytics-intelligence-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-2);
  flex-wrap:wrap;
  min-width:0;
}
.analytics-intelligence-meta small{
  color:var(--text-muted);
  font-size:var(--type-caption,.7rem);
  white-space:nowrap;
}
.analytics-intelligence-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
}
.analytics-intelligence-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-3);
  min-height:0;
  padding:var(--space-4);
}
.analytics-intelligence-card-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:var(--space-3);
  min-width:0;
}
.analytics-intelligence-card-title{
  min-width:0;
}
.analytics-intelligence-card-title .status-pill{
  margin-bottom:7px;
}
.analytics-intelligence-card-title>strong{
  font-size:var(--type-body,.86rem);
  line-height:1.28;
}
.analytics-intelligence-card-head>em{
  align-self:start;
  min-width:max-content;
  padding:6px 9px;
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  color:var(--text-main);
  font-style:normal;
  font-size:var(--type-caption,.7rem);
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.analytics-intelligence-copy{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  min-width:0;
}
.analytics-intelligence-copy>p{
  margin:0;
  color:var(--text-secondary);
  font-size:var(--type-caption,.74rem);
  line-height:1.5;
}
.analytics-intelligence-explanation{
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
}
.analytics-intelligence-explanation>span{
  display:block;
  margin-bottom:4px;
  color:var(--text-muted);
  font-size:var(--type-caption,.66rem);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.analytics-intelligence-explanation>p{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-caption,.72rem);
  font-weight:500;
  line-height:1.45;
}
.analytics-intelligence-evidence{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:0;
  padding:0;
  border-block:1px solid var(--border-subtle);
}
.analytics-intelligence-evidence>div{
  min-width:0;
  padding:10px 12px;
}
.analytics-intelligence-evidence>div+div{
  border-left:1px solid var(--border-subtle);
}
.analytics-intelligence-evidence dt{
  margin:0 0 3px;
  color:var(--text-muted);
  font-size:var(--type-caption,.64rem);
  font-weight:500;
}
.analytics-intelligence-evidence dd{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-caption,.74rem);
  font-weight:700;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.analytics-intelligence-actions{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:2px;
}
.analytics-intelligence-actions .analytics-insight-action{
  margin:0;
}
.analytics-insight-explore{
  text-decoration:none;
}
.analytics-intelligence-method{
  margin:0;
}
.analytics-intelligence-method p{
  max-width:86ch;
}
@media(max-width:980px){
  .analytics-intelligence-grid{
    grid-template-columns:1fr;
  }
  .analytics-intelligence-header{
    align-items:flex-start;
  }
  .analytics-intelligence-meta{
    justify-content:flex-start;
  }
}
@media(max-width:767px){
  .analytics-intelligence-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .analytics-intelligence-grid::-webkit-scrollbar{display:none}
  .analytics-intelligence-card{
    flex:0 0 min(88vw,350px);
    scroll-snap-align:start;
  }
  .analytics-intelligence-evidence{
    grid-template-columns:1fr;
  }
  .analytics-intelligence-evidence>div+div{
    border-left:0;
    border-top:1px solid var(--border-subtle);
  }
  .analytics-intelligence-method{
    display:none;
  }
}
@media(max-width:420px){
  .analytics-intelligence-card{
    flex-basis:min(90vw,330px);
  }
  .analytics-intelligence-card-head{
    grid-template-columns:auto minmax(0,1fr);
  }
  .analytics-intelligence-card-head>em{
    grid-column:2;
    justify-self:start;
  }
  .analytics-intelligence-meta small{
    white-space:normal;
  }
}

/* ========================================================================
   DS-2026-104 · Analytics Explorer 2.0
   Progressive metric → dimension → segment exploration with bounded
   multi-dimensional filters, comparable periods and chart/table parity.
   ======================================================================== */
.chart-inspector-actions{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  margin-top:var(--space-2);
}
.chart-inspector-actions .chart-inspector-action{
  margin:0;
}
.chart-inspector-filter-action{
  color:var(--text-secondary);
}
.analytics-explorer-v2{
  scroll-margin-top:96px;
}
.analytics-explorer-header-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-2);
  flex-wrap:wrap;
  color:var(--text-muted);
  font-size:var(--type-caption,.68rem);
}
.analytics-explorer-header-meta>span:last-child{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.analytics-explorer-pathbar,
.analytics-explorer-modebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  min-width:0;
}
.analytics-explorer-pathbar{
  padding:0 var(--space-1);
}
.analytics-explorer-path{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  flex-wrap:wrap;
}
.analytics-explorer-path-root,
.analytics-explorer-path-current{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  color:var(--text-main);
  font-size:var(--type-caption,.72rem);
  font-weight:700;
}
.analytics-explorer-path-current{
  color:var(--text-secondary);
}
.analytics-explorer-path-arrow{
  color:var(--text-muted);
  font-size:.9rem;
}
.analytics-explorer-filter-chip{
  display:inline-grid;
  grid-template-columns:minmax(0,auto) auto;
  grid-template-areas:"meta close" "value close";
  align-items:center;
  column-gap:7px;
  min-height:34px;
  padding:5px 8px 5px 10px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  color:var(--text-main);
  cursor:pointer;
  text-align:left;
}
.analytics-explorer-filter-chip small{
  grid-area:meta;
  color:var(--text-muted);
  font-size:.58rem;
  font-weight:700;
  line-height:1.05;
}
.analytics-explorer-filter-chip strong{
  grid-area:value;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.68rem;
  line-height:1.1;
}
.analytics-explorer-filter-chip svg,
.analytics-explorer-filter-chip>span:last-child{
  grid-area:close;
  color:var(--text-muted);
}
.analytics-explorer-clear{
  flex:0 0 auto;
}
.analytics-explorer-modebar{
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
}
.analytics-explorer-view-switch{
  display:flex;
  align-items:center;
  gap:6px;
}
.analytics-explorer-view-switch .btn{
  min-height:34px;
}
.analytics-explorer-view-switch .btn.is-active{
  border-color:color-mix(in srgb,var(--brand-primary) 34%,var(--border-subtle));
  background:color-mix(in srgb,var(--brand-primary) 9%,var(--surface-card));
  color:var(--text-main);
}
.analytics-explorer-comparison{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-3);
  flex-wrap:wrap;
  color:var(--text-muted);
  font-size:var(--type-caption,.66rem);
}
.analytics-comparison-key{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-secondary);
  font-weight:700;
}
.analytics-comparison-key i{
  display:inline-block;
  width:18px;
  height:5px;
  border-radius:var(--radius-pill);
  background:var(--chart-brand-1);
}
.analytics-comparison-key .analytics-comparison-previous,
.analytics-comparison-previous{
  background:var(--chart-brand-2);
  opacity:.46;
}
.analytics-explorer-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,280px);
  gap:var(--space-4);
  align-items:stretch;
}
.analytics-explorer-layout .analytics-segmentation-card{
  min-width:0;
}
.analytics-explorer-contributors{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
}
.analytics-explorer-contributors-head h4{
  margin:4px 0 5px;
  color:var(--text-main);
  font-size:var(--type-body,.9rem);
}
.analytics-explorer-contributors-head p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-caption,.69rem);
  line-height:1.45;
}
.analytics-explorer-contributors-list{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:var(--space-3);
}
.analytics-explorer-contributor{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-2);
  min-width:0;
  padding:11px 0;
  border-top:1px solid var(--border-subtle);
}
.analytics-explorer-contributor>span{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--surface-soft);
  color:var(--text-muted);
  font-size:.65rem;
  font-weight:700;
}
.analytics-explorer-contributor>div{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:2px;
}
.analytics-explorer-contributor strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-main);
  font-size:.72rem;
}
.analytics-explorer-contributor small{
  color:var(--text-muted);
  font-size:.64rem;
}
.analytics-explorer-contributor em{
  color:var(--text-secondary);
  font-size:.7rem;
  font-style:normal;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.analytics-explorer-table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
}
.analytics-explorer-table{
  width:100%;
  min-width:680px;
  margin:0;
}
.analytics-explorer-table th,
.analytics-explorer-table td{
  vertical-align:middle;
}
.analytics-explorer-table-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:var(--space-2);
  white-space:nowrap;
}
.analytics-explorer-filter-action{
  min-height:32px;
  padding:5px 7px;
  border:0;
  background:transparent;
  color:var(--brand-primary);
  font-size:.68rem;
  font-weight:700;
  cursor:pointer;
}
.analytics-delta{
  color:var(--text-secondary);
  font-size:.7rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.analytics-delta.is-positive{color:var(--semantic-success)}
.analytics-delta.is-negative{color:var(--semantic-danger)}
.analytics-horizontal-bar-chart--comparison .analytics-horizontal-previous{
  opacity:.42;
  pointer-events:none;
}
.analytics-horizontal-bar-chart--comparison .analytics-horizontal-value{
  opacity:.9;
}
@media(max-width:980px){
  .analytics-explorer-layout{grid-template-columns:1fr}
  .analytics-explorer-contributors{padding:var(--space-3)}
  .analytics-explorer-contributors-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
  .analytics-explorer-contributor{grid-template-columns:26px minmax(0,1fr);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:10px}
  .analytics-explorer-contributor em{grid-column:2}
}
@media(max-width:720px){
  .analytics-explorer-pathbar,
  .analytics-explorer-modebar{align-items:flex-start;flex-direction:column}
  .analytics-explorer-comparison{justify-content:flex-start}
  .analytics-explorer-contributors-list{grid-template-columns:1fr}
  .analytics-explorer-header-meta{justify-content:flex-start}
  .analytics-explorer-filter-chip strong{max-width:145px}
}
@media(max-width:420px){
  .analytics-explorer-view-switch{width:100%}
  .analytics-explorer-view-switch .btn{flex:1 1 0;justify-content:center}
  .analytics-explorer-modebar{padding:var(--space-2)}
  .analytics-explorer-comparison{gap:var(--space-2)}
}
@media print{
  .analytics-explorer-pathbar,
  .analytics-explorer-modebar,
  .analytics-explorer-contributors,
  .analytics-explorer-table-actions{display:none!important}
}

/* ========================================================================
   DS-2026-105 · Analytics Saved Views + Personalization
   Persistent Explorer configurations without storing analytical results.
   ======================================================================== */
.analytics-saved-views-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3) var(--space-4);
  min-width:0;
  padding:12px 14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-soft);
}
.analytics-saved-views-current{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  min-width:0;
}
.analytics-saved-views-icon{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:1px solid color-mix(in srgb,var(--brand-primary) 18%,var(--border-subtle));
  border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--brand-primary) 8%,var(--surface-card));
  color:var(--brand-primary);
}
.analytics-saved-views-current>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.analytics-saved-views-current strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-main);
  font-size:.78rem;
}
.analytics-saved-views-current small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-muted);
  font-size:var(--type-caption,.66rem);
}
.analytics-saved-views-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-2);
  min-width:0;
  flex-wrap:wrap;
}
.analytics-saved-views-controls select{
  width:auto;
  min-width:210px;
  max-width:300px;
  min-height:36px;
}
.analytics-saved-views-controls .btn{
  min-height:36px;
}
.analytics-saved-views-feedback{
  grid-column:1/-1;
  padding:8px 10px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--semantic-info) 8%,var(--surface-card));
  color:var(--text-secondary);
  font-size:.7rem;
}
.analytics-saved-views-feedback.is-error,
.analytics-saved-view-form-feedback.is-error{
  background:color-mix(in srgb,var(--semantic-danger) 8%,var(--surface-card));
  color:var(--semantic-danger);
}
.analytics-saved-view-notice{
  margin:0;
}
.analytics-saved-view-dialog{
  width:min(720px,calc(100% - 28px));
}
.analytics-saved-view-form{
  min-width:0;
}
.analytics-saved-view-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
}
.analytics-saved-view-description-field{
  grid-column:1/-1;
}
.analytics-saved-view-form textarea{
  min-height:92px;
  resize:vertical;
}
.analytics-saved-view-form .form-grupo small{
  display:block;
  margin-top:6px;
  color:var(--text-muted);
  font-size:.65rem;
  line-height:1.4;
}
.analytics-saved-view-default-control{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:var(--space-3);
  padding:12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
  cursor:pointer;
}
.analytics-saved-view-default-control input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:var(--brand-primary);
}
.analytics-saved-view-default-control span{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.analytics-saved-view-default-control strong{
  color:var(--text-main);
  font-size:.76rem;
}
.analytics-saved-view-default-control small{
  color:var(--text-muted);
  font-size:.66rem;
  line-height:1.4;
}
.analytics-saved-view-form-feedback{
  margin-top:var(--space-3);
  padding:8px 10px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--semantic-info) 8%,var(--surface-card));
  color:var(--text-secondary);
  font-size:.7rem;
}
.analytics-saved-view-security-note{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:auto;
}
.analytics-saved-view-delete-dialog{
  width:min(560px,calc(100% - 28px));
}
.analytics-saved-view-delete-context{
  margin:0;
}
@media(max-width:980px){
  .analytics-saved-views-bar{grid-template-columns:1fr}
  .analytics-saved-views-controls{justify-content:flex-start}
  .analytics-saved-views-feedback{grid-column:auto}
}
@media(max-width:720px){
  .analytics-saved-views-bar{padding:var(--space-3)}
  .analytics-saved-views-current{align-items:flex-start}
  .analytics-saved-views-current .status-pill{margin-left:auto}
  .analytics-saved-views-current small{white-space:normal}
  .analytics-saved-views-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .analytics-saved-views-controls select{grid-column:1/-1;width:100%;max-width:none}
  .analytics-saved-views-controls .btn{width:100%;justify-content:center}
  .analytics-saved-view-form-grid{grid-template-columns:1fr}
  .analytics-saved-view-description-field{grid-column:auto}
  .analytics-saved-view-dialog .app-modal-footer{align-items:stretch;flex-direction:column}
  .analytics-saved-view-security-note{margin-right:0}
  .analytics-saved-view-dialog .app-modal-footer .btn{width:100%;justify-content:center}
}
@media(max-width:420px){
  .analytics-saved-views-controls{grid-template-columns:1fr}
  .analytics-saved-views-controls select{grid-column:auto}
  .analytics-saved-views-current{display:grid;grid-template-columns:38px minmax(0,1fr)}
  .analytics-saved-views-current .status-pill{grid-column:1/-1;justify-self:start;margin-left:0}
}
@media print{
  .analytics-saved-views-bar,
  .analytics-saved-view-notice,
  .analytics-saved-view-modal,
  .analytics-saved-view-delete-modal{display:none!important}
}

/* ========================================================================
   DS-2026-107 · WorkplaceMapSurface Governance Consolidation
   Organization supplies workplace/geofence data and behavior. The Design
   System Authority owns map surface geometry, responsive rhythm, controls,
   directory rows and the certified Modal integration.
   ======================================================================== */
.workplace-map-surface,
.workplace-map-editor{
  display:grid;
  gap:var(--space-3);
  grid-column:1/-1;
  width:100%;
  min-width:0;
}
.workplace-map-search{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-2);
  align-items:end;
  width:100%;
  min-width:0;
}
.workplace-map-search label,
.workplace-identity-grid,
.organization-catalog-grid [data-workplace-form] label,
.organization-catalog-grid [data-workplace-form] input,
.organization-catalog-grid [data-workplace-form] select{min-width:0}
.workplace-map-shell{
  position:relative;
  width:100%;
  height:clamp(320px,34vw,390px);
  min-height:320px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-soft);
}
.workplace-map{width:100%;height:100%;min-width:0}
.workplace-map-status{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-height:20px;
  color:var(--text-secondary);
  font-size:var(--type-caption,.72rem);
}
.workplace-map-status[data-state="success"]{color:var(--semantic-success)}
.workplace-map-status[data-state="danger"]{color:var(--semantic-danger)}
.workplace-map-status[data-state="warning"]{color:var(--semantic-warning)}
.workplace-map-status[data-state="progress"]{color:var(--brand-primary)}
.workplace-radius-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-3);
  align-items:center;
  min-width:0;
}
.workplace-radius-row label{min-width:0;font-weight:700}
.workplace-radius-value{min-width:78px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.workplace-radius-hints{
  display:flex;
  justify-content:space-between;
  gap:var(--space-2);
  color:var(--text-muted);
  font-size:var(--type-caption,.66rem);
}
.workplace-timezone-summary{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-width:0;
  padding:var(--space-3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
}
.workplace-timezone-summary span{min-width:0}
.workplace-timezone-summary strong{display:block;font-size:.78rem}
.workplace-timezone-summary small{
  display:block;
  margin-top:2px;
  overflow-wrap:anywhere;
  color:var(--text-secondary);
  font-size:var(--type-caption,.66rem);
}
.workplace-map-credit{justify-self:end;color:var(--text-muted);font-size:.62rem;line-height:1;opacity:.72}
.workplace-identity-grid{grid-column:1/-1;width:100%}
.workplace-advanced{
  display:block;
  grid-column:1/-1;
  width:100%;
  min-width:0;
  max-width:100%;
  margin:0;
}
.workplace-advanced summary{
  display:list-item;
  width:auto;
  max-width:100%;
  cursor:pointer;
  color:var(--text-secondary);
  font-size:var(--type-caption,.72rem);
  line-height:1.4;
  white-space:normal;
}
.workplace-advanced[open]{padding-top:var(--space-1)}
.workplace-advanced>label,
.workplace-advanced>.grid{width:100%;min-width:0;margin-top:var(--space-2)}
.workplace-security-note{
  display:flex;
  align-items:flex-start;
  grid-column:1/-1;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--brand-primary) 6%,transparent);
  color:var(--text-secondary);
  font-size:var(--type-caption,.68rem);
  line-height:1.4;
}
.workplace-security-note svg{flex:0 0 auto;margin-top:1px;color:var(--brand-primary)}
.workplace-security-note strong{color:var(--text-main)}
.workplace-map-marker{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  transform:rotate(-45deg);
  border:3px solid var(--surface-card);
  border-radius:50% 50% 50% var(--radius-sm);
  background:var(--brand-primary);
  box-shadow:var(--shadow-md);
}
.workplace-map-marker::after{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--surface-card);
}
.workplace-map-shell .maplibregl-marker{cursor:grab}
.workplace-map-shell .maplibregl-marker:active{cursor:grabbing}
.workplace-map-shell .maplibregl-ctrl-group{
  overflow:hidden;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.workplace-map-shell .maplibregl-ctrl-group button{width:34px;height:34px;background-color:var(--surface-card)}
.workplace-map-shell .maplibregl-ctrl-attrib{display:none!important}
html[data-theme="dark"] .workplace-map-shell .maplibregl-ctrl-icon{filter:invert(1)}

/* Map range is a certified FormControl variant. Pointer feedback never paints
   the browser's rectangular selection halo; keyboard focus remains on thumb. */
.workplace-radius-range{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  height:24px;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  accent-color:var(--brand-primary);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.workplace-radius-range:focus,
.workplace-radius-range:active,
.workplace-radius-range:hover,
.workplace-radius-range:focus:not(:focus-visible){outline:0;box-shadow:none;background:transparent}
.workplace-radius-range::-moz-focus-outer{border:0}
.workplace-radius-range::-webkit-slider-runnable-track{
  height:6px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--brand-primary) 0 var(--workplace-range-progress,8%),var(--surface-soft) var(--workplace-range-progress,8%) 100%);
  box-shadow:none;
}
.workplace-radius-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  margin-top:-8px;
  border:0;
  border-radius:50%;
  background:var(--brand-primary);
  box-shadow:var(--shadow-xs);
}
.workplace-radius-range::-moz-range-track{
  height:6px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  box-shadow:none;
}
.workplace-radius-range::-moz-range-progress{height:6px;border:0;border-radius:var(--radius-pill);background:var(--brand-primary)}
.workplace-radius-range::-moz-range-thumb{
  width:20px;
  height:20px;
  border:0;
  border-radius:50%;
  background:var(--brand-primary);
  box-shadow:var(--shadow-xs);
}
.workplace-radius-range:focus-visible::-webkit-slider-thumb,
.workplace-radius-range:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 3px var(--surface-card),0 0 0 5px var(--brand-primary);
}

.workplace-search-results{
  display:grid;
  gap:var(--space-2);
  max-height:290px;
  overflow:auto;
  padding:var(--space-2);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  box-shadow:var(--shadow-md);
}
.workplace-search-results[hidden]{display:none}
.workplace-search-result{
  appearance:none;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:var(--space-2);
  width:100%;
  padding:var(--space-2);
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--text-main);
  text-align:left;
  cursor:pointer;
}
.workplace-search-result:hover,
.workplace-search-result:focus-visible{outline:none;background:var(--surface-soft)}
.workplace-search-result-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--brand-primary) 9%,transparent);
  color:var(--brand-primary);
  font-weight:700;
}
.workplace-search-result strong,
.workplace-search-result small{display:block}
.workplace-search-result strong{font-size:.78rem}
.workplace-search-result small{margin-top:2px;color:var(--text-secondary);font-size:var(--type-caption,.66rem);line-height:1.35}
.workplace-geofence-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:2px}
.workplace-geofence-toggle>div{min-width:0}
.workplace-geofence-toggle strong,
.workplace-geofence-toggle small{display:block}
.workplace-geofence-toggle strong{font-size:.78rem}
.workplace-geofence-toggle small{margin-top:2px;color:var(--text-secondary);font-size:var(--type-caption,.66rem)}
.workplace-switch{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto;cursor:pointer}
.workplace-switch input{position:absolute;opacity:0;pointer-events:none}
.workplace-switch span{
  position:relative;
  width:42px;
  height:24px;
  border-radius:var(--radius-pill);
  background:var(--border-subtle);
  transition:background .18s ease;
}
.workplace-switch span::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
  transition:transform .18s ease;
}
.workplace-switch input:checked+span{background:var(--brand-primary)}
.workplace-switch input:checked+span::after{transform:translateX(18px)}
.workplace-switch input:focus-visible+span{box-shadow:0 0 0 3px var(--surface-card),0 0 0 5px var(--brand-primary)}
.workplace-switch em{color:var(--text-secondary);font-size:var(--type-caption,.66rem);font-style:normal}

/* Workplace directory and create/edit composition are certified variants of
   Card, EmptyState, FormControl and Modal; no module stylesheet owns them. */
.organization-catalog-grid>.linked-master-card:has([data-workplace-form]){order:1;align-self:start}
.organization-catalog-grid>.linked-master-card:not(:has([data-workplace-form])){order:2;align-self:start;display:flex;flex-direction:column;min-height:100%}
.organization-catalog-grid>.linked-master-card>.card-header{min-height:0;margin-bottom:var(--space-3)}
.organization-catalog-grid [data-workplace-form]{gap:var(--space-3)}
.organization-catalog-grid [data-workplace-form]>.grid,
.organization-catalog-grid [data-workplace-form]>.workplace-map-editor,
.organization-catalog-grid [data-workplace-form]>.workplace-advanced,
.organization-catalog-grid [data-workplace-form]>.workplace-security-note,
.organization-catalog-grid [data-workplace-form]>.btn-primario{grid-column:1/-1;width:100%}
.organization-catalog-grid [data-workplace-form]>.grid{gap:var(--space-3)}
.organization-catalog-grid [data-workplace-form]>.btn-primario{min-height:46px}
.organization-catalog-grid [data-workplace-current]{width:100%;justify-content:center}
.organization-catalog-grid>.linked-master-card:not(:has([data-workplace-form]))>[data-workplace-empty]{
  flex:1;
  min-height:clamp(280px,36vw,560px);
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:0;
}
.organization-catalog-grid>.linked-master-card:not(:has([data-workplace-form]))>[data-workplace-empty]>p{max-width:440px;margin-inline:auto}
.workplace-directory-list{gap:var(--space-2)}
.workplace-directory-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3);
}
.workplace-directory-copy{display:grid;gap:var(--space-1);min-width:0}
.workplace-directory-copy strong,
.workplace-directory-copy small{display:block}
.workplace-directory-copy small{color:var(--text-secondary);line-height:1.35}
.workplace-view-btn{width:36px;min-width:36px;padding-inline:0;justify-content:center}
.workplace-detail-card{width:min(900px,calc(100vw - 32px));overflow:auto}
.workplace-detail-form{display:grid;gap:var(--space-3)}
.workplace-map-shell--modal{height:clamp(300px,34vw,360px);min-height:300px}
.workplace-detail-modal .modal-header{position:relative;z-index:1;background:transparent}

@media(max-width:720px){
  .workplace-map-search,
  .workplace-radius-row,
  .workplace-advanced>.grid,
  .workplace-identity-grid{grid-template-columns:1fr}
  .workplace-radius-value,
  .workplace-map-credit{justify-self:start}
  .workplace-geofence-toggle{align-items:flex-start}
  .workplace-switch em{display:none}
  .workplace-directory-row{grid-template-columns:auto minmax(0,1fr) auto}
  .workplace-directory-row>form{grid-column:2/-1}
  .workplace-directory-row>.badge{grid-column:2}
  .workplace-view-btn{grid-column:3;grid-row:1/3}
  .workplace-detail-card{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .workplace-radius-range{scroll-behavior:auto}
  .workplace-switch span,
  .workplace-switch span::after{transition:none}
}


/* ========================================================================
   DS-2026-108 · Analytics Monitoring + Alerts
   Monitoring reuses canonical surfaces, controls, StatusPill and RHMotionModal.
   ======================================================================== */
.analytics-monitoring-surface{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  min-width:0;
  padding:14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
}
.analytics-monitoring-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  min-width:0;
}
.analytics-monitoring-copy{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  min-width:0;
}
.analytics-monitoring-copy>div{
  min-width:0;
}
.analytics-monitoring-copy h4{
  margin:2px 0 3px;
  color:var(--text-main);
  font-size:.92rem;
  line-height:1.2;
}
.analytics-monitoring-copy p{
  margin:0;
  max-width:760px;
  color:var(--text-muted);
  font-size:.7rem;
  line-height:1.45;
}
.analytics-monitoring-icon{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:1px solid color-mix(in srgb,var(--brand-primary) 18%,var(--border-subtle));
  border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--brand-primary) 8%,var(--surface-card));
  color:var(--brand-primary);
}
.analytics-monitoring-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.analytics-monitoring-cadence{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-muted);
  font-size:.65rem;
  white-space:nowrap;
}
.analytics-alert-feedback{
  padding:8px 10px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--semantic-info) 8%,var(--surface-soft));
  color:var(--text-secondary);
  font-size:.7rem;
}
.analytics-alert-feedback.is-error{
  background:color-mix(in srgb,var(--semantic-danger) 8%,var(--surface-card));
  color:var(--semantic-danger);
}
.analytics-alert-list{
  display:grid;
  gap:8px;
  min-width:0;
}
.analytics-alert-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3);
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
}
.analytics-alert-state{
  display:flex;
  align-items:center;
}
.analytics-alert-main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.analytics-alert-main strong{
  overflow:hidden;
  color:var(--text-main);
  font-size:.76rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.analytics-alert-main span,
.analytics-alert-main small{
  color:var(--text-muted);
  font-size:.65rem;
  line-height:1.4;
}
.analytics-alert-main .analytics-alert-warning{
  color:var(--semantic-warning);
}
.analytics-alert-item-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}
.analytics-alert-delete-trigger{
  min-width:36px;
  color:var(--semantic-danger);
}
.analytics-alert-empty{
  min-height:150px;
  padding:var(--space-4);
}
.analytics-monitoring-unavailable{
  margin:0;
}
.analytics-alert-dialog{
  width:min(720px,calc(100% - 28px));
}
.analytics-alert-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  margin-top:var(--space-3);
}
.analytics-alert-context{
  margin:0;
}
.analytics-alert-context h3{
  margin:2px 0 3px;
}
.analytics-alert-form [hidden],
.analytics-monitoring-surface [hidden]{
  display:none!important;
}
@media(max-width:980px){
  .analytics-monitoring-head{align-items:flex-start;flex-direction:column}
  .analytics-monitoring-actions{justify-content:flex-start;width:100%}
  .analytics-alert-item{grid-template-columns:auto minmax(0,1fr)}
  .analytics-alert-item-actions{grid-column:1/-1;justify-content:flex-start;padding-left:0}
}
@media(max-width:720px){
  .analytics-monitoring-surface{padding:var(--space-3)}
  .analytics-monitoring-actions{display:grid;grid-template-columns:1fr}
  .analytics-monitoring-actions .btn{width:100%;justify-content:center}
  .analytics-monitoring-cadence{white-space:normal}
  .analytics-alert-item{grid-template-columns:1fr;align-items:flex-start;padding:var(--space-3)}
  .analytics-alert-state{justify-content:flex-start}
  .analytics-alert-main strong{white-space:normal}
  .analytics-alert-item-actions{grid-column:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .analytics-alert-item-actions .btn{width:100%;justify-content:center}
  .analytics-alert-form-grid{grid-template-columns:1fr}
  .analytics-alert-dialog .app-modal-footer{align-items:stretch;flex-direction:column}
  .analytics-alert-dialog .app-modal-footer .btn{width:100%;justify-content:center}
}
@media(max-width:420px){
  .analytics-alert-item-actions{grid-template-columns:1fr}
}
@media print{
  .analytics-monitoring-surface,
  .analytics-alert-modal,
  .analytics-alert-delete-modal{display:none!important}
}

/* ========================================================================
   DS-2026-109 · Executive Analytics Authority
   Executive Analytics reuses PeriodSelector, QuantificationCard, ChartCard,
   InsightCard, StatusPill and Analytics Explorer. The executive variant owns
   prioritization and density only; modules still own data and authorization.
   ======================================================================== */
.analytics-kpi-grid--executive{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-3);
}
.analytics-executive-stage{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.82fr);
  gap:var(--space-4);
  align-items:stretch;
}
.analytics-executive-trend{
  min-height:408px;
  display:flex;
  flex-direction:column;
}
.analytics-executive-trend .analytics-chart-scroll{
  flex:1;
  min-height:228px;
}
.analytics-executive-chart-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
}
.analytics-line-path--previous{
  stroke:var(--text-muted);
  stroke-width:2;
  stroke-dasharray:6 7;
  opacity:.34;
}
.analytics-executive-legend{
  margin-top:auto;
}
.analytics-executive-legend .is-previous{
  background:var(--text-muted);
  opacity:.42;
}
.analytics-executive-brief{
  min-width:0;
  min-height:408px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
  overflow:hidden;
}
.analytics-executive-priorities,
.analytics-executive-contributors{
  padding:var(--space-4);
}
.analytics-executive-contributors{
  margin-top:auto;
  border-top:1px solid var(--border-subtle);
}
.analytics-executive-brief-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.analytics-executive-brief-head>div{min-width:0}
.analytics-executive-brief-head h3{
  margin:2px 0 0;
  color:var(--text-main);
  font-size:var(--type-title-sm,1rem);
  line-height:1.2;
}
.analytics-executive-brief-head p{
  margin:5px 0 0;
  color:var(--text-muted);
  font-size:var(--type-caption,.72rem);
  line-height:1.45;
}
.analytics-executive-priority-list,
.analytics-executive-contributor-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.analytics-executive-priority{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px var(--space-2);
  align-items:start;
  padding:var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
}
.analytics-executive-priority-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--surface-card);
  color:var(--text-secondary);
}
.analytics-executive-priority.is-warning .analytics-executive-priority-icon{color:var(--semantic-warning)}
.analytics-executive-priority.is-danger .analytics-executive-priority-icon{color:var(--semantic-danger)}
.analytics-executive-priority.is-success .analytics-executive-priority-icon{color:var(--semantic-success)}
.analytics-executive-priority-copy{min-width:0}
.analytics-executive-priority-copy strong{
  display:block;
  color:var(--text-main);
  font-size:var(--type-body,.82rem);
  line-height:1.3;
}
.analytics-executive-priority-copy p{
  margin:3px 0 0;
  color:var(--text-muted);
  font-size:var(--type-caption,.68rem);
  line-height:1.4;
}
.analytics-executive-priority>em{
  font-style:normal;
  font-weight:700;
  color:var(--text-main);
  font-size:var(--type-caption,.7rem);
  font-variant-numeric:tabular-nums;
}
.analytics-executive-priority-actions{
  grid-column:2/-1;
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.analytics-executive-priority-actions :is(button,a),
.analytics-executive-explore-link{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:var(--brand-strong,var(--color-primario));
  font:inherit;
  font-size:var(--type-caption,.7rem);
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
.analytics-executive-priority-actions :is(button,a):focus-visible,
.analytics-executive-explore-link:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
.analytics-executive-calm{
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
  padding:var(--space-3);
  border:1px solid color-mix(in srgb,var(--semantic-success) 22%,var(--border-subtle));
  border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--semantic-success) 7%,var(--surface-card));
}
.analytics-executive-calm>span{color:var(--semantic-success)}
.analytics-executive-calm strong{display:block;color:var(--text-main)}
.analytics-executive-calm p{margin:3px 0 0;color:var(--text-muted);font-size:var(--type-caption,.7rem);line-height:1.4}
.analytics-executive-contributors-head{margin-bottom:var(--space-2)}
.analytics-executive-contributor{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-2);
  align-items:center;
}
.analytics-executive-rank{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  color:var(--text-secondary);
  font-size:var(--type-caption,.68rem);
  font-weight:700;
}
.analytics-executive-contributor-copy{min-width:0}
.analytics-executive-contributor-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-main);
  font-size:var(--type-body,.78rem);
}
.analytics-executive-contributor-copy small{display:block;margin-top:2px;color:var(--text-muted);font-size:var(--type-caption,.66rem)}
.analytics-executive-contributor-copy progress{
  display:block;
  width:100%;
  height:4px;
  margin-top:6px;
  overflow:hidden;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  accent-color:var(--chart-brand-1);
}
.analytics-executive-contributor-copy progress::-webkit-progress-bar{background:var(--surface-soft);border-radius:var(--radius-pill)}
.analytics-executive-contributor-copy progress::-webkit-progress-value{background:var(--chart-brand-1);border-radius:var(--radius-pill)}
.analytics-executive-contributor-copy progress::-moz-progress-bar{background:var(--chart-brand-1);border-radius:var(--radius-pill)}
.analytics-executive-contributor>em{
  font-style:normal;
  color:var(--text-main);
  font-size:var(--type-caption,.7rem);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.analytics-executive-explore-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:var(--space-3);
}
.analytics-executive-changes .analytics-intelligence-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(min-width:861px) and (max-width:1180px){
  .analytics-kpi-grid--executive{grid-template-columns:repeat(3,minmax(0,1fr))}
  .analytics-executive-stage{grid-template-columns:1fr}
  .analytics-executive-brief{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .analytics-executive-contributors{margin-top:0;border-top:0;border-left:1px solid var(--border-subtle)}
}
@media(max-width:860px){
  .analytics-executive-stage{grid-template-columns:1fr}
  .analytics-executive-trend,
  .analytics-executive-brief{min-height:0}
  .analytics-executive-chart-heading{align-items:flex-start;flex-wrap:wrap}
  .analytics-executive-brief{display:block}
  .analytics-executive-contributors{margin-top:0}
  .analytics-executive-changes .analytics-intelligence-grid{display:flex}
}
@media(max-width:520px){
  .analytics-executive-priorities,
  .analytics-executive-contributors{padding:var(--space-3)}
  .analytics-executive-priority{grid-template-columns:auto minmax(0,1fr)}
  .analytics-executive-priority>em{grid-column:2}
  .analytics-executive-priority-actions{grid-column:2}
  .analytics-executive-brief-head{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .analytics-line-path--previous{transition:none!important;animation:none!important}
}

/* ========================================================================== 
   AnalyticsReportSurface · DS-2026-110 · 2.9.78
   Certified analytics-specific composition. Data/permissions live in Analytics;
   geometry, states and responsive behavior remain governed here.
   ========================================================================== */
.analytics-report-surface{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  scroll-margin-top:96px;
}
.analytics-report-header-state{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:var(--space-2);
}
.analytics-report-security-note{margin:0}
.analytics-report-primary-grid,
.analytics-report-secondary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
  align-items:stretch;
}
.analytics-report-export-card,
.analytics-report-schedule-card,
.analytics-report-schedules,
.analytics-report-audit{
  min-width:0;
  padding:var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
  box-shadow:none;
}
.analytics-report-card-header,
.analytics-report-list-header{
  margin:0 0 var(--space-4);
  padding:0;
  min-height:0;
  align-items:flex-start;
}
.analytics-report-card-header>svg,
.analytics-report-list-header>svg{
  flex:0 0 auto;
  color:var(--brand-strong,var(--color-primario));
}
.analytics-report-card-header h3,
.analytics-report-list-header h3{margin:2px 0 0}
.analytics-report-card-header p,
.analytics-report-list-header p{margin-top:5px}
.analytics-report-export-form,
.analytics-report-schedule-form{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.analytics-report-format-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-2);
}
.analytics-report-format{
  appearance:none;
  min-width:0;
  min-height:112px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  padding:var(--space-3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
  color:var(--text-main);
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease;
}
.analytics-report-format>span{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--chart-brand-1) 10%,var(--surface-card));
  color:var(--chart-brand-1);
}
.analytics-report-format strong{font-size:var(--type-body,.82rem);line-height:1.25}
.analytics-report-format small{color:var(--text-muted);font-size:var(--type-caption,.68rem);line-height:1.35}
@media(hover:hover) and (pointer:fine){
  .analytics-report-format:hover{
    border-color:color-mix(in srgb,var(--chart-brand-1) 38%,var(--border-subtle));
    background:color-mix(in srgb,var(--chart-brand-1) 4%,var(--surface-soft));
    transform:translateY(-1px);
  }
}
.analytics-report-format:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}
.analytics-report-schedule-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
}
.analytics-report-name-field{grid-column:span 2}
.analytics-report-recipients{
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.analytics-report-recipients legend{
  margin:0 0 var(--space-2);
  padding:0;
  color:var(--text-main);
  font-size:var(--type-body,.78rem);
  font-weight:700;
}
.analytics-report-recipients legend small{color:var(--text-muted);font-weight:500}
.analytics-report-recipient-list{
  max-height:224px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-2);
  padding:2px;
  overscroll-behavior:contain;
}
.analytics-report-recipient{
  min-width:0;
  min-height:52px;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-soft);
  cursor:pointer;
}
.analytics-report-recipient input{flex:0 0 auto}
.analytics-report-recipient span{min-width:0}
.analytics-report-recipient strong,
.analytics-report-recipient small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.analytics-report-recipient strong{color:var(--text-main);font-size:var(--type-caption,.72rem)}
.analytics-report-recipient small{margin-top:2px;color:var(--text-muted);font-size:var(--type-caption,.64rem)}
.analytics-report-form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding-top:var(--space-2);
}
.analytics-report-count{
  min-width:40px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  color:var(--text-secondary);
  font-size:var(--type-caption,.68rem);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.analytics-report-schedule-list,
.analytics-report-audit-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.analytics-report-schedule-item{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-soft);
}
.analytics-report-schedule-copy{min-width:0}
.analytics-report-schedule-copy>strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-main);
  font-size:var(--type-body,.78rem);
}
.analytics-report-schedule-copy>span,
.analytics-report-schedule-copy>small{
  display:block;
  margin-top:3px;
  color:var(--text-muted);
  font-size:var(--type-caption,.66rem);
  line-height:1.4;
}
.analytics-report-schedule-copy>small .status-pill{vertical-align:middle}
.analytics-report-schedule-actions{
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.analytics-report-schedule-actions form{margin:0}
.analytics-report-audit-item{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-3);
  align-items:center;
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--border-subtle);
}
.analytics-report-audit-item:last-child{border-bottom:0}
.analytics-report-audit-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--surface-soft);
  color:var(--text-secondary);
}
.analytics-report-audit-item>div{min-width:0}
.analytics-report-audit-item strong,
.analytics-report-audit-item span,
.analytics-report-audit-item small{display:block}
.analytics-report-audit-item strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-main);
  font-size:var(--type-body,.78rem);
}
.analytics-report-audit-item span{margin-top:3px;color:var(--text-secondary);font-size:var(--type-caption,.68rem)}
.analytics-report-audit-item small{
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-muted);
  font-size:.62rem;
}
@media(max-width:1080px){
  .analytics-report-primary-grid,
  .analytics-report-secondary-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .analytics-report-export-card,
  .analytics-report-schedule-card,
  .analytics-report-schedules,
  .analytics-report-audit{padding:var(--space-3)}
  .analytics-report-format-grid{grid-template-columns:1fr}
  .analytics-report-format{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center}
  .analytics-report-format>span{grid-row:1/3}
  .analytics-report-schedule-fields{grid-template-columns:1fr}
  .analytics-report-name-field{grid-column:auto}
  .analytics-report-recipient-list{grid-template-columns:1fr}
  .analytics-report-form-actions{align-items:stretch;flex-direction:column}
  .analytics-report-form-actions .btn{width:100%}
  .analytics-report-schedule-item{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .analytics-report-schedule-status{grid-column:1/2}
  .analytics-report-schedule-copy{grid-column:1/2}
  .analytics-report-schedule-actions{grid-column:2;grid-row:1/3;align-self:center;flex-direction:column}
}
@media(max-width:480px){
  .analytics-report-header-state{justify-content:flex-start}
  .analytics-report-audit-item{grid-template-columns:auto minmax(0,1fr)}
  .analytics-report-audit-item>.status-pill{grid-column:2;justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .analytics-report-format{transition:none!important;transform:none!important}
}
.analytics-report-schedule-copy>small.analytics-report-warning{color:var(--semantic-warning)}


/* ========================================================================
   DashboardCompositionSurface · DS-2026-111 · 2.9.79
   Dashboard hierarchy correction: command and quick actions are compact
   horizontal surfaces; operational KPI precede critical attention; monthly
   evolution belongs to the monthly numeralia card. White Label controls
   accents only; geometry remains canonical.
   ======================================================================== */
.dashboard-command-row{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:var(--space-3,12px)!important;
  margin-top:var(--space-4,16px)!important;
  align-items:stretch!important;
}
.dashboard-command-row .dashboard-command-card{
  width:100%!important;
  height:auto!important;
  min-height:64px!important;
  padding:10px 14px!important;
  align-items:center!important;
  border-radius:var(--radius-lg)!important;
}
.dashboard-command-row .dashboard-command-card .command-hint-icon{
  width:40px!important;height:40px!important;flex-basis:40px!important;
}
.dashboard-command-row .dashboard-command-card strong{font-size:.82rem!important}
.dashboard-command-row .dashboard-command-card small{margin-top:2px!important;font-size:.66rem!important}
.dashboard-quick-actions-card{padding:14px 16px!important}
.dashboard-quick-actions-header{display:flex!important;align-items:center!important;margin-bottom:10px!important}
.dashboard-quick-actions-header p{margin-top:2px!important}
.dashboard-quick-actions-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
.dashboard-quick-action-tile{min-height:58px!important;padding:8px 10px!important}
.dashboard-quick-action-icon{width:36px!important;height:36px!important}
.dashboard-priority-stack{
  display:grid;
  gap:var(--space-4,16px);
  margin-top:var(--space-4,16px);
  clear:both;
}
.dashboard-priority-stack>.dashboard-spotlight,
.dashboard-priority-stack>.dashboard-attention-center{margin:0!important;position:relative!important;inset:auto!important;transform:none!important}
.dashboard-lower-grid{align-items:stretch!important}
.dashboard-month-summary{min-height:0!important}
.dashboard-month-summary>.dashboard-month-kpis{
  flex:0 0 auto!important;
  align-items:stretch!important;
}
.dashboard-month-summary>.dashboard-month-kpis>.kpi-card{
  min-height:120px!important;
  height:auto!important;
}
.dashboard-month-summary>.dashboard-month-chart{
  flex:1 1 auto;
  min-height:210px;
  margin-top:16px!important;
  padding-top:16px!important;
}
.dashboard-month-summary .dashboard-month-bars{height:150px}
@media(max-width:1180px){
  .dashboard-quick-actions-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .dashboard-lower-grid{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .dashboard-command-row .dashboard-command-card{min-height:60px!important;padding:9px 12px!important}
  .dashboard-quick-actions-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px}
  .dashboard-quick-action-tile{flex:0 0 min(82vw,300px);scroll-snap-align:start}
  .dashboard-month-summary>.dashboard-month-chart{min-height:190px}
}

/* =======================================================================
   DS-2026-115 · Dashboard KPI Mobile Paging Authority
   Root cause fixed: card paging JS previously reparented exactly four KPI
   cards after first paint because generic >3 rail logic ignored the certified
   page size. The legacy geometry also targeted .dashboard-stats-grid while
   the active Dashboard uses .today-kpi-grid, causing a 2x2 first frame to
   collapse into four narrow cards after DOMContentLoaded.

   Contract:
   - Exactly one page (<= data-mobile-page-size) stays server-rendered: no
     reparenting, no layout shift, no alternate "old" card frame on refresh.
   - More than one page uses the canonical 2x2 page-of-4 horizontal rail.
   - Paging geometry is selected by the semantic data-mobile-page-size
     contract, never by a legacy module class.
   - Dashboard QuantificationCard microtrends remain fully visible in-card.
   ======================================================================= */
.dashboard-mobile-card-page{display:contents}
@media (max-width:860px){
  .card-collection[data-mobile-page-size="4"].is-mobile-paged-card-rail{
    display:flex!important;
    grid-template-columns:none!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:1px 0 8px!important;
    gap:var(--card-collection-gap,12px)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:0!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
  }
  .card-collection[data-mobile-page-size="4"].is-mobile-paged-card-rail::-webkit-scrollbar{display:none!important}
  .card-collection[data-mobile-page-size="4"].is-mobile-paged-card-rail > .dashboard-mobile-card-page{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:var(--card-collection-gap,12px)!important;
    flex:0 0 100%!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    margin:0!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }
  .card-collection[data-mobile-page-size="4"].is-mobile-paged-card-rail > .dashboard-mobile-card-page > .kpi-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    scroll-snap-align:none!important;
    overflow:hidden;
  }

  /* One-page Dashboard KPI collections are a stable 2x2 grid. The card owns
     enough vertical space for icon, value, label, context and microtrend. */
  .today-kpi-grid.quantification-collection:not(.is-mobile-card-rail){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:216px!important;
    gap:var(--card-collection-gap,12px)!important;
    overflow:visible!important;
  }
  .today-kpi-grid.quantification-collection:not(.is-mobile-card-rail) > .analytics-kpi-card--dashboard.quantification-card{
    height:216px!important;
    min-height:216px!important;
    max-height:216px!important;
    min-width:0!important;
    padding:16px!important;
    overflow:hidden!important;
  }

  /* Multi-page future Dashboard collections use the exact same card anatomy. */
  .today-kpi-grid.is-mobile-paged-card-rail > .dashboard-mobile-card-page > .analytics-kpi-card--dashboard{
    height:216px!important;
    min-height:216px!important;
    max-height:216px!important;
    padding:16px!important;
  }
}
@media (max-width:480px){
  .today-kpi-grid.quantification-collection:not(.is-mobile-card-rail),
  .today-kpi-grid.is-mobile-paged-card-rail > .dashboard-mobile-card-page{
    gap:10px!important;
  }
  .analytics-kpi-card--dashboard .analytics-kpi-copy{min-width:0}
  .analytics-kpi-card--dashboard .kpi-card-label{
    min-height:0!important;
    -webkit-line-clamp:2!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .analytics-kpi-card--dashboard .analytics-kpi-footer{
    min-height:66px!important;
    padding-top:8px!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(20px,auto) 30px!important;
    row-gap:4px!important;
  }
  .analytics-kpi-card--dashboard .analytics-kpi-footer .kpi-card-subtitle{
    width:100%!important;
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    -webkit-line-clamp:1!important;
  }
  .analytics-kpi-card--dashboard .analytics-kpi-sparkline{
    display:block!important;
    width:100%!important;
    height:30px!important;
    min-height:30px!important;
    justify-self:stretch!important;
    align-self:end!important;
    overflow:visible!important;
  }
}



/* ========================================================================
   DS-2026-116 · Mobile Analytics KPI Microvisual Authority
   Analytics executive KPI cards use the canonical QuantificationCard rail on
   mobile. The card itself owns enough height for icon, value, label, context
   and a visible microvisual; legacy app.css may not clamp it to 106px.

   Dashboard keeps its certified 2x2 pages-of-4 composition. Both surfaces
   share the same QuantificationCard anatomy and White Label chart tokens;
   responsive composition may differ because their information density differs.
   ======================================================================== */
@media(max-width:860px){
  .analytics-kpi-grid.is-mobile-card-rail > .analytics-kpi-card.quantification-card:not(.analytics-kpi-card--dashboard){
    height:240px!important;
    min-height:240px!important;
    max-height:240px!important;
    padding:18px!important;
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    overflow:hidden!important;
    box-sizing:border-box;
  }
  .analytics-kpi-grid.is-mobile-card-rail > .analytics-kpi-card:not(.analytics-kpi-card--dashboard) > .kpi-card-icon{
    flex:0 0 auto;
    margin:0 0 12px!important;
  }
  .analytics-kpi-grid.is-mobile-card-rail > .analytics-kpi-card:not(.analytics-kpi-card--dashboard) .analytics-kpi-copy{
    flex:0 0 auto;
    min-width:0;
  }
  .analytics-kpi-grid.is-mobile-card-rail > .analytics-kpi-card:not(.analytics-kpi-card--dashboard) .kpi-card-label{
    min-height:0!important;
    -webkit-line-clamp:2!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .analytics-kpi-grid.is-mobile-card-rail > .analytics-kpi-card:not(.analytics-kpi-card--dashboard) .analytics-kpi-footer{
    flex:0 0 auto;
    width:100%;
    min-height:82px;
    margin-top:auto;
    padding-top:10px;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 112px!important;
    grid-template-areas:
      "context visual"
      "action action"!important;
    align-items:end!important;
    gap:4px 12px!important;
    overflow:hidden;
    box-sizing:border-box;
  }
  .analytics-kpi-grid.is-mobile-card-rail > .analytics-kpi-card:not(.analytics-kpi-card--dashboard) .analytics-kpi-footer .kpi-card-subtitle{
    min-width:0;
    margin:0!important;
    padding:0 0 3px!important;
    align-self:end;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  .analytics-kpi-grid.is-mobile-card-rail > .analytics-kpi-card:not(.analytics-kpi-card--dashboard) .analytics-kpi-sparkline{
    display:block!important;
    width:112px!important;
    height:40px!important;
    min-height:40px!important;
    max-width:100%;
    justify-self:end!important;
    align-self:end!important;
    overflow:visible!important;
    color:var(--chart-brand-1,var(--color-primario));
    opacity:1;
    visibility:visible;
  }
}
@media(max-width:390px){
  .analytics-kpi-grid.is-mobile-card-rail > .analytics-kpi-card.quantification-card:not(.analytics-kpi-card--dashboard){
    height:240px!important;
    min-height:240px!important;
    max-height:240px!important;
    padding:16px!important;
  }
  .analytics-kpi-grid.is-mobile-card-rail > .analytics-kpi-card:not(.analytics-kpi-card--dashboard) .analytics-kpi-footer{
    grid-template-columns:minmax(0,1fr) 100px!important;
    column-gap:10px!important;
  }
  .analytics-kpi-grid.is-mobile-card-rail > .analytics-kpi-card:not(.analytics-kpi-card--dashboard) .analytics-kpi-sparkline{
    width:100px!important;
    height:36px!important;
    min-height:36px!important;
  }
}
/* DS-2026-119 · Touch-target completion for Analytics internal actions.
   Desktop keeps compact density; coarse pointers consume the global 44px
   interaction target without creating a second control family. */
@media (pointer:coarse){
  .analytics-explorer-filter-chip,
  .analytics-explorer-filter-action,
  .analytics-explorer-view-switch .btn,
  .analytics-executive-priority-actions :is(button,a),
  .analytics-executive-explore-link{
    min-height:var(--interaction-touch-min)!important;
    touch-action:manipulation;
  }
  .analytics-executive-priority-actions :is(button,a),
  .analytics-executive-explore-link{
    display:inline-flex;
    align-items:center;
    padding-inline:var(--space-1);
  }
}


/* ========================================================================
   DS-2026-120 · Analytics Data Surface + Touch Completion
   Final Analytics audit closes the remaining interaction targets that stayed
   compact on coarse pointers after Explorer/Reports consolidation. Desktop
   density is unchanged; touch devices consume the global interaction token.
   DataTable/SectionHeader ownership is adopted in markup, never recreated here.
   ======================================================================== */
@media (pointer:coarse){
  .analytics-period-selector--top :is(.analytics-period-presets>a,.analytics-period-custom>summary),
  .analytics-kpi-drilldown,
  .analytics-insight-action,
  .analytics-saved-views-controls :is(select,.btn),
  .analytics-monitoring-actions .btn,
  .analytics-alert-item-actions .btn,
  .analytics-explorer-clear,
  .analytics-explorer-table-actions .btn,
  .analytics-report-form-actions .btn,
  .analytics-report-schedule-actions .btn,
  .report-builder-summary-actions .btn,
  .report-preset-actions .btn{
    min-height:var(--interaction-touch-min)!important;
    touch-action:manipulation;
  }
  .analytics-alert-delete-trigger,
  .analytics-report-schedule-actions .btn[aria-label]{
    min-width:var(--interaction-touch-min)!important;
  }
}

/* ========================================================================
   DS-2026-121 · Analytics Executive KPI Content Resilience
   Executive QuantificationCards keep a governed minimum block size, but their
   desktop/tablet grid must never clip real content just to preserve a legacy
   fixed height. CSS Grid equalizes cards inside each row naturally, while the
   certified mobile rail keeps its dedicated fixed composition below 861px.
   ======================================================================== */
@media (min-width:861px){
  .analytics-kpi-grid--executive{
    align-items:stretch;
  }
  .analytics-kpi-grid--executive > .analytics-kpi-card.quantification-card{
    height:auto!important;
    min-height:240px!important;
    max-height:none!important;
    align-self:stretch!important;
  }
}