.operation-header {
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  display: block;
  padding: 0 var(--page-gutter);
  position: relative;
  z-index: 25;
}

html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .operation-header { background: var(--chrome); }
html[data-theme="dark"] .operation-sidebar:not(.people-action-rail):not(.document-action-rail):not(.payroll-action-rail),html[data-theme="dark"] .ui-card,html[data-theme="dark"] .people-quick-tools,html[data-theme="dark"] .org-switch-menu,html[data-theme="dark"] .header-tasks-menu,html[data-theme="dark"] .portal-topbar,html[data-theme="dark"] .portal-page { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .header-search,html[data-theme="dark"] .operation-sidebar-toggle button,html[data-theme="dark"] .org-switch-trigger,html[data-theme="dark"] .header-tasks-trigger { border-color: var(--border); color: var(--text-muted); }
html[data-theme="dark"] .org-switch-menu,html[data-theme="dark"] .header-tasks-menu { box-shadow: 0 18px 40px rgb(0 0 0 / 40%); }
html[data-theme="dark"] .header-tasks-menu :is(h2,h3,strong),html[data-theme="dark"] .header-task-row strong,html[data-theme="dark"] .org-switch-menu button,html[data-theme="dark"] .workspace-home-greeting h1 { color: var(--text); }
html[data-theme="dark"] .header-tasks-summary,html[data-theme="dark"] .header-task-icon,html[data-theme="dark"] .header-tasks-section h3 b { background: var(--surface-subtle); border-color: var(--border); }
html[data-theme="dark"] .header-tasks-summary strong,html[data-theme="dark"] .header-task-row > svg { color: var(--text); }
html[data-theme="dark"] .header-tasks-summary span,html[data-theme="dark"] .header-task-row small,html[data-theme="dark"] .header-tasks-head small,html[data-theme="dark"] .header-tasks-section h3,html[data-theme="dark"] .header-tasks-menu footer { color: var(--text-muted); }
html[data-theme="dark"] .header-account-logout:hover { background: #321d20; }
.operation-header-row { align-items: center; display: flex; gap: 12px; justify-content: space-between; min-height: 48px; }
.operation-header-identity { align-items: center; display: flex; gap: 11px; min-width: 0; }
.brand { align-items: center; display: flex; gap: 8px; font-weight: 500; }
.operation-header .brand-wordmark { font-size:20px; font-weight:500; line-height:1.35; letter-spacing:-0.5px; color:var(--text); white-space:nowrap; }
.operation-header .brand-flow {
  --dot-1: var(--primary);
  --dot-2: #22d3ee;
  --dot-3: #8b5cf6;
  /* Ritmo de la animacion, en un sitio. Un 30% mas lento que el original
     (1,4s / 3,2s), que se leia acelerado. Las dos duraciones no son multiplos
     entre si a proposito: asi el conjunto no vuelve al mismo fotograma cada
     poco y no se percibe el bucle. */
  --dot-bounce: 2.9s;
  --dot-color: 6.4s;
  /* Corrimiento desde el inicio de «ow». Con el conjunto reducido, 11px
     centra sus 12,4px de ancho sobre la «w» en vez de repartirlo entre las
     dos letras. */
  --dot-shift: 0;
  /* Altura del salto. Los fotogramas la multiplican por el seno, asi que basta
     tocar este valor para reescalar el rebote entero. */
  --dot-rise: 1.8px;

  position: relative;
}
.operation-header .brand-dots {
  position: absolute;
  /* Anclado al borde superior del tramo «ow» y desplazado hasta la «w». */
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  margin-bottom: -4px;
}
.operation-header .brand-dots i {
  display: block;
  width: 3.5px;
  height: 3.5px;
  border-radius: 999px;
  background: var(--dot-1);
  /* Dos animaciones a la vez y de distinta duracion: el rebote es corto y el
     color largo, asi el conjunto no se repite de forma evidente. */
  animation:
    brand-dot-bounce var(--dot-bounce) linear infinite,
    brand-dot-color var(--dot-color) linear infinite;
  will-change: transform, background-color, opacity;
}
/* El desfase es lo que produce la onda: sin el, los tres saltarian a la vez.
   Se escala con las duraciones —un tercio del ciclo de color cada uno— para que
   al frenar la animacion la onda conserve la misma forma. */
.operation-header .brand-dots i:nth-child(2) {
  animation-delay: 0.24s, -2.13s;
}
.operation-header .brand-dots i:nth-child(3) {
  animation-delay: 0.49s, -4.27s;
}
/* Oscilacion sinusoidal recorrida en avance **lineal**.
   Antes iba con `cubic-bezier` de entrada y salida suave, que se aplica entre
   cada par de fotogramas: la velocidad caia a cero cuatro veces por ciclo y el
   punto parecia detenerse. Con la curva metida en los propios fotogramas y el
   avance lineal, la velocidad solo se anula en los extremos, que es donde un
   rebote real cambia de sentido. */
@keyframes brand-dot-bounce {
  0% {
    transform: translateY(0);
  }
  4.1667% {
    transform: translateY(calc(var(--dot-rise) * -0.2588));
  }
  8.3333% {
    transform: translateY(calc(var(--dot-rise) * -0.5000));
  }
  12.5% {
    transform: translateY(calc(var(--dot-rise) * -0.7071));
  }
  16.6667% {
    transform: translateY(calc(var(--dot-rise) * -0.8660));
  }
  20.8333% {
    transform: translateY(calc(var(--dot-rise) * -0.9659));
  }
  25% {
    transform: translateY(calc(var(--dot-rise) * -1.0000));
  }
  29.1667% {
    transform: translateY(calc(var(--dot-rise) * -0.9659));
  }
  33.3333% {
    transform: translateY(calc(var(--dot-rise) * -0.8660));
  }
  37.5% {
    transform: translateY(calc(var(--dot-rise) * -0.7071));
  }
  41.6667% {
    transform: translateY(calc(var(--dot-rise) * -0.5000));
  }
  45.8333% {
    transform: translateY(calc(var(--dot-rise) * -0.2588));
  }
  50% {
    transform: translateY(0);
  }
  54.1667% {
    transform: translateY(calc(var(--dot-rise) * 0.2588));
  }
  58.3333% {
    transform: translateY(calc(var(--dot-rise) * 0.5000));
  }
  62.5% {
    transform: translateY(calc(var(--dot-rise) * 0.7071));
  }
  66.6667% {
    transform: translateY(calc(var(--dot-rise) * 0.8660));
  }
  70.8333% {
    transform: translateY(calc(var(--dot-rise) * 0.9659));
  }
  75% {
    transform: translateY(calc(var(--dot-rise) * 1.0000));
  }
  79.1667% {
    transform: translateY(calc(var(--dot-rise) * 0.9659));
  }
  83.3333% {
    transform: translateY(calc(var(--dot-rise) * 0.8660));
  }
  87.5% {
    transform: translateY(calc(var(--dot-rise) * 0.7071));
  }
  91.6667% {
    transform: translateY(calc(var(--dot-rise) * 0.5000));
  }
  95.8333% {
    transform: translateY(calc(var(--dot-rise) * 0.2588));
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes brand-dot-color {
  0%,
  100% {
    background: var(--dot-1);
  }
  33% {
    background: var(--dot-2);
  }
  66% {
    background: var(--dot-3);
  }
}

.brand img { background: transparent; border: 0; border-radius: 0; height: 28px; object-fit: contain; width: 28px; }
.operation-sidebar-toggle button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  flex-shrink: 0;
  height: 36px;
  padding: 0;
  place-items: center;
  width: 36px;
  transition: background .14s ease,color .14s ease;
}
.operation-sidebar-toggle { display: flex; flex-shrink: 0; }
.operation-sidebar-toggle button svg { width: 18px; height: 18px; stroke-width: 1.7; }
.operation-sidebar-toggle button:hover,.operation-sidebar-toggle button.is-open { background: var(--surface-subtle); color: var(--text); }
.operation-sidebar-toggle button:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 2px; }
.operation-header-divider { background: var(--border); height: 20px; width: 1px; }
.operation-header-current { color: var(--text-muted); font-size: var(--type-ui); font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-header-actions { align-items: center; display: flex; gap: 6px; margin-left: auto; min-width: 0; }
.operation-header-second { align-items: center; border-top: 0; display: flex; gap: 12px; min-height: 38px; }
.operation-header-tabs { display: flex; gap: 15px; overflow: auto; scrollbar-width: none; }
.operation-header-second .operation-header-tabs { min-width: 0; }
.header-company-settings { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 10px; width: 64px; height: 38px; margin-left: auto; color: var(--text-muted); border-radius: 6px; }
.header-company-settings:hover { background: var(--surface-accent); color: var(--primary-hover); }
.header-company-settings:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.operation-header-tabs a {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  font-size: var(--type-ui);
  font-weight: 400;
  gap: 6px;
  min-height: 38px;
  padding: 0 2px;
  position: relative;
  white-space: nowrap;
}
.operation-header-tabs a::after {
  background: transparent;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}
.operation-header-tabs a.is-active { color: var(--text); font-weight: 700; }
.operation-header-tabs a.is-active::after { background: var(--nav-active); }
.people-quick-tools {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: 0 3px 10px rgb(15 23 42 / 10%);
  display: flex;
  gap: 0;
  margin: 6px 0 8px;
  min-height: 48px;
  padding: 6px 10px;
  position: relative;
}
.people-quick-tools--empty { min-height: 48px; }
.docs-quick-tools { gap: 0; }
.docs-quick-tools-tab {
  align-items: center;
  border-radius: var(--radius-ui);
  color: var(--text-muted);
  display: inline-flex;
  font-size: var(--type-ui);
  font-weight: 400;
  gap: 8px;
  min-height: 36px;
  padding: 0 11px;
  white-space: nowrap;
}
.docs-quick-tools-tab:hover { background: var(--surface-subtle); color: var(--primary-hover); }
.docs-quick-tools-tab.is-active { background: var(--surface-accent); color: var(--primary-hover); font-weight: 700; }
.docs-quick-tools-tab svg { color: var(--primary); }
.attendance-quick-tools { overflow-x: auto; scrollbar-width: thin; }
.attendance-quick-tools-tab {
  align-items: center;
  border-radius: var(--radius-ui);
  color: var(--text-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--type-meta);
  font-weight: 400;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  white-space: nowrap;
}
.attendance-quick-tools-tab:hover { background: var(--surface-subtle); color: var(--primary-hover); }
.attendance-quick-tools-tab.is-active { background: var(--surface-accent); color: var(--primary-hover); font-weight: 700; }
.attendance-quick-tools-tab svg { color: var(--primary); }
.attendance-quick-tools-label { color: var(--text-faint); flex: 0 0 auto; font-size: 10px; font-weight: 750; padding: 0 2px; text-transform: uppercase; white-space: nowrap; }
.people-navigation-quick-tools { overflow-x: auto; scrollbar-width: thin; }
.people-navigation-tab {
  align-items: center;
  border-radius: var(--radius-ui);
  color: var(--text-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--type-meta);
  font-weight: 400;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  white-space: nowrap;
}
.people-navigation-tab:hover { background: var(--surface-subtle); color: var(--primary-hover); }
.people-navigation-tab.is-active { background: var(--surface-accent); color: var(--primary-hover); font-weight: 700; }
.people-navigation-tab svg { color: var(--primary); }
.people-navigation-label { color: var(--text-faint); flex: 0 0 auto; font-size: 10px; font-weight: 750; padding: 0 2px; text-transform: uppercase; white-space: nowrap; }
.people-navigation-quick-tools + .people-quick-tools { margin-top: -2px; }
.people-quick-tools-add {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-ui);
  color: var(--text);
  display: inline-flex;
  font-size: var(--type-ui);
  font-weight: 650;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
}
.people-quick-tools-add { margin-right: 12px; }
.people-quick-tools-add:hover { background: var(--surface-subtle); color: var(--primary-hover); }
.people-quick-tools-add svg { color: var(--primary); }
.people-quick-tools-divider { background: var(--border); height: 28px; width: 1px; }
.people-quick-tools-divider.is-trailing { margin-left: 8px; }
.people-quick-tools-divider.is-command { margin: 0 8px; }
.people-quick-tools-shortcuts { align-items: center; display: flex; gap: 0; margin-left: 5px; }
.people-quick-tools-period { color: var(--text-muted); font-size: var(--type-meta); margin-left: auto; padding: 0 6px 0 16px; white-space: nowrap; }
.people-quick-tools-period strong { color: var(--text); font-weight: 700; }
.people-quick-tools-icon {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-ui);
  color: var(--text-muted);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}
.people-quick-tools-icon:hover { background: var(--surface-subtle); color: var(--primary-hover); }
.people-quick-tools-command {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-ui);
  color: var(--text);
  display: inline-flex;
  font-size: var(--type-ui);
  font-weight: 650;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
}
.people-quick-tools-command svg { color: var(--primary); }
.people-quick-tools-command:hover { background: var(--surface-subtle); color: var(--primary-hover); }
.people-quick-tools-command.is-filter { border: 1px solid var(--border-strong); }
.people-quick-tools-alert {
  align-items: center;
  background: #195293;
  border: 0;
  border-radius: var(--radius-ui);
  color: white;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  margin-left: 2px;
  padding: 0;
  width: 36px;
}
.people-quick-tools-alert:hover { background: #124279; }
.people-quick-tools-more {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-ui);
  color: var(--text-muted);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}
.people-quick-tools-more:hover { background: var(--surface-subtle); color: var(--primary-hover); }
.people-settings-menu { position: relative; }
.people-settings-menu summary {
  align-items: center;
  border-radius: var(--radius-ui);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  gap: 5px;
  height: 36px;
  justify-content: center;
  list-style: none;
  width: 43px;
}
.people-settings-menu summary::-webkit-details-marker { display: none; }
.people-settings-menu summary:hover,
.people-settings-menu[open] summary { background: var(--surface-subtle); color: var(--primary-hover); }
.people-settings-menu[open] summary svg:last-child { transform: rotate(180deg); }
.people-settings-options {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: 0 8px 20px rgb(15 23 42 / 14%);
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 35;
}
.people-settings-options button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-ui);
  color: var(--text);
  font: inherit;
  min-height: 34px;
  padding: 0 10px;
  text-align: left;
}
.people-settings-options button:hover { background: var(--surface-subtle); color: var(--primary-hover); }
.people-simulation-menu { position: relative; }
.people-simulation-menu summary {
  align-items: center;
  border-radius: var(--radius-ui);
  color: var(--primary);
  cursor: pointer;
  display: flex;
  gap: 3px;
  height: 36px;
  justify-content: center;
  list-style: none;
  width: 44px;
}
.people-simulation-menu summary::-webkit-details-marker { display: none; }
.people-simulation-menu summary:hover,
.people-simulation-menu[open] summary { background: var(--surface-subtle); color: var(--primary-hover); }
.people-simulation-menu[open] summary svg:last-child { transform: rotate(180deg); }
.people-simulation-options {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: 0 8px 20px rgb(15 23 42 / 14%);
  display: grid;
  gap: 2px;
  left: 0;
  min-width: 178px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 7px);
  z-index: 35;
}
.people-simulation-options p {
  color: #075aa1;
  font-size: 20px;
  line-height: 1.2;
  margin: 7px 10px 2px;
}
.people-simulation-options button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-ui);
  color: var(--text);
  font: inherit;
  min-height: 34px;
  padding: 0 10px;
  text-align: left;
}
.people-simulation-options button:hover { background: var(--surface-subtle); color: var(--primary-hover); }
.workspace-home-body {
  --home-modules-w: 224px;
  --home-center-w: 780px;
  --home-profile-w: 290px;
  --home-gap-modules: 33px;
  --home-gap-profile: 50px;
  --home-gutter: var(--page-gutter);
  display: grid;
  align-items: start;
  grid-template-columns: var(--home-modules-w) var(--home-gap-modules) minmax(0,var(--home-center-w)) var(--home-gap-profile) var(--home-profile-w);
  padding: 24px var(--home-gutter) 32px;
  row-gap: 14px;
}
.workspace-home-main { align-content: start; display: grid; gap: 20px; grid-column: 3; min-width: 0; }
.operation-frame {
  background: var(--bg);
  display: grid;
  gap: 24px;
  grid-template-columns: 240px minmax(0,1fr);
  margin: 0 auto;
  max-width: 1600px;
  padding: 24px var(--page-gutter);
}
.operation-frame.is-full-width {
  grid-template-columns: minmax(0,1fr);
  max-width: 1320px;
}
.operation-frame.is-full-width .operation-content { max-width: 100%; }
.operation-frame.is-people-directory {
  gap: 0;
  grid-template-columns: 56px minmax(0,1fr);
  max-width: none;
  padding: 14px var(--page-gutter) 32px;
}
.operation-frame.is-people-directory .operation-content { min-width: 0; padding-left: 14px; }
.people-action-rail { align-self: stretch; min-width: 0; }
.people-action-rail nav { align-items: center; display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; position: sticky; top: 88px; }
.people-action-rail a,.people-action-rail button { align-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--text-muted); cursor: pointer; display: inline-flex; height: 40px; justify-content: center; padding: 0; text-decoration: none; transition: background .15s,color .15s; width: 42px; }
.people-action-rail a:hover,.people-action-rail a:focus-visible,.people-action-rail button:hover,.people-action-rail button:focus-visible { background: var(--surface-accent); color: var(--primary-hover); outline: 0; }
.people-action-rail a:focus-visible,.people-action-rail button:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb,var(--primary) 45%,transparent); }
.people-action-rail-divider { background: var(--border); display: block; height: 1px; margin: 3px 4px; width: 32px; }
.people-action-rail a.is-active { background: rgb(110 118 129 / 12%); color: var(--text-muted); border: 0; box-shadow: none; }
.people-rail-more { position: relative; }
.people-rail-more>summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 40px; cursor: pointer; color: var(--text-muted); border-radius: 6px; }
.people-rail-more>summary::-webkit-details-marker { display: none; }
.people-rail-more>summary:hover,.people-rail-more[open]>summary { background: var(--surface-accent); color: var(--primary-hover); }
.people-rail-more>summary:focus-visible { outline: 2px solid var(--primary); }
.people-rail-more>div { position: absolute; z-index: 30; left: 48px; bottom: 0; width: 230px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); }
.people-rail-more>div>a { width: 100%; height: auto; min-height: 40px; padding: 10px; justify-content: flex-start; font-size: 13px; }
.attendance-action-rail nav:has(.people-rail-more[open]) { overflow: visible; }
@media(max-width:650px) { .attendance-action-rail .people-rail-more>div { left: 48px; right: auto; top: auto; bottom: 0; } }
@media(max-width:650px) { .people-action-rail:has(.people-rail-more[open]) { overflow: visible; } .people-rail-more>div { left: auto; right: 0; top: 44px; bottom: auto; width: min(230px,calc(100vw - 32px)); } .header-company-settings { width: 48px; gap: 5px; } }
.operation-frame.is-people-docs {
  gap: 0;
  grid-template-columns: 82px minmax(0,1fr);
  max-width: none;
  padding: 14px var(--page-gutter) 32px;
}
.operation-frame.is-people-docs .operation-content { min-width: 0; }
.document-action-rail { align-self: stretch; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 20px 0 0 0; overflow: hidden; }
.document-action-rail nav { display: grid; grid-template-rows: repeat(4, minmax(150px, 1fr)); min-height: 100%; }
.document-action-rail a { align-items: center; color: var(--text-muted); display: flex; font-size: 12px; font-weight: 700; justify-content: center; letter-spacing: 0; padding: 16px 0; text-align: center; text-decoration: none; writing-mode: vertical-rl; transform: rotate(180deg); }
.document-action-rail a + a { border-top: 1px solid var(--border); }
.document-action-rail a:hover { background: var(--surface); color: var(--primary-hover); }
.document-action-rail a.is-active { background: color-mix(in srgb,var(--surface-accent) 52%,var(--surface)); color: var(--text); }
html[data-theme="dark"] .document-action-rail a.is-active { color: var(--text); }
.operation-frame.is-people-attendance { gap: 0; grid-template-columns: 56px minmax(0,1fr); max-width: none; padding: 14px var(--page-gutter) 32px; }
.operation-frame.is-people-attendance .operation-content { min-width: 0; padding-left: 14px; }
.people-attendance-sidebar { align-self: start; display: grid; gap: 20px; padding: 8px 0; position: sticky; top: 82px; }
.people-attendance-sidebar section { display: grid; gap: 6px; }
.people-attendance-sidebar p { color: var(--text-faint); font-size: 10px; font-weight: 800; letter-spacing: .06em; margin: 0; padding: 0 10px; text-transform: uppercase; }
.people-attendance-sidebar nav { display: grid; gap: 2px; }
.people-attendance-sidebar a { align-items: center; border-radius: 6px; color: var(--text-muted); display: flex; font-size: 13px; font-weight: 600; gap: 9px; min-height: 36px; padding: 0 10px; text-decoration: none; }
.people-attendance-sidebar a svg { color: var(--text-faint); flex: 0 0 auto; }
.people-attendance-sidebar a:hover { background: var(--surface-subtle); color: var(--primary-hover); }
.people-attendance-sidebar a.is-active { background: var(--surface-accent); color: var(--primary-hover); font-weight: 750; }
.people-attendance-sidebar a.is-active svg { color: var(--primary); }
.operation-frame.is-people-profile { max-width: none; padding: 14px var(--page-gutter) 32px; }
.operation-frame.is-people-document { max-width: none; padding: 18px var(--page-gutter) 36px; }
.operation-frame.is-migration-workspace { max-width: 1440px; padding: 20px var(--page-gutter) 38px; }
.operation-frame.is-control-center { max-width: 1320px; padding: 24px var(--page-gutter) 40px; }
.migration-workspace { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; gap: 22px; }
.payroll-workspace { display: grid; gap: 22px; }.payroll-heading { align-items: end; display: flex; justify-content: space-between; }.payroll-heading h1 { color: #17343a; font-size: 30px; margin: 3px 0 0; }.payroll-heading p:not(.eyebrow) { color: #526b75; margin: 8px 0 0; }.payroll-heading label { color: #526b75; display: grid; font-size: 12px; font-weight: 800; gap: 6px; }.payroll-heading input { min-height: 39px; }.payroll-metrics,.payroll-result-totals { display: grid; gap: 14px; grid-template-columns: repeat(3,minmax(0,1fr)); }.payroll-metrics article,.payroll-result-totals article { background: #fff; border: 1px solid #d6e1e5; border-radius: 8px; padding: 17px; }.payroll-metrics small,.payroll-result-totals small { color: var(--text-muted); display: block; }.payroll-metrics strong,.payroll-result-totals strong { color: #17343a; display: block; font-size: 23px; margin-top: 6px; }.payroll-panel { background: #fff; border: 1px solid #d6e1e5; border-radius: 8px; padding: 24px; }.payroll-panel header { align-items: start; display: flex; justify-content: space-between; margin-bottom: 20px; }.payroll-panel h2,.payroll-panel h3 { color: #17343a; margin: 0; }.payroll-panel header p { color: #526b75; margin: 6px 0 0; }.payroll-master-fields { display: grid; gap: 14px; grid-template-columns: repeat(4,minmax(0,1fr)); }.payroll-master-fields label,.payroll-trial-form label { color: #526b75; display: grid; font-size: 12px; font-weight: 800; gap: 6px; }.payroll-concepts { border-top: 1px solid #e1e8eb; margin-top: 22px; padding-top: 19px; }.payroll-concepts > div { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 13px; }.payroll-concepts article { align-items: center; background: #f7faf9; border: 1px solid #e1e8eb; border-radius: 6px; display: grid; gap: 8px; grid-template-columns: auto 1fr auto; padding: 11px; }.payroll-concepts strong { color: #087f76; font-size: 12px; }.payroll-concepts span { color: #17343a; font-weight: 700; }.payroll-concepts small { color: var(--text-muted); font-size: 11px; }.payroll-panel footer { align-items: center; border-top: 1px solid #e1e8eb; display: flex; justify-content: space-between; margin-top: 22px; padding-top: 18px; }.payroll-panel footer small { color: #526b75; }.payroll-trial-layout { display: grid; gap: 18px; grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); }.payroll-trial-form { align-content: start; display: grid; gap: 15px; }.payroll-trial-form button { justify-self: start; }.payroll-result-empty { color: var(--text-muted); padding: 60px 10px; text-align: center; }.payroll-result-totals { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 18px; }.payroll-result table { border-collapse: collapse; width: 100%; }.payroll-result th { background: #f4f7f8; color: #526b75; font-size: 12px; text-align: left; }.payroll-result th,.payroll-result td { border-bottom: 1px solid #e1e8eb; padding: 10px; }.payroll-result td:last-child { font-weight: 800; text-align: right; }.payroll-result footer { color: #526b75; justify-content: flex-start; gap: 5px; }
.migration-tabs { border-bottom: 1px solid #d6e1e5; display: flex; gap: 8px; }.migration-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #526b75; cursor: pointer; font: inherit; font-weight: 700; padding: 9px 12px; }.migration-tabs button.is-active { border-bottom-color: var(--primary); color: #17343a; }.migration-tabs b { background: #edf3f4; border-radius: 10px; font-size: 11px; margin-left: 4px; padding: 2px 6px; }.migration-import-history { background: #fff; border: 1px solid #d6e1e5; border-radius: var(--radius-panel); }.migration-import-history > header { align-items: start; border-bottom: 1px solid #e1e8eb; display: flex; justify-content: space-between; padding: 24px 28px; }.migration-import-history h2 { color: #17343a; font-size: 22px; margin: 4px 0; }.migration-import-history p { color: #526b75; margin: 0; }.migration-import-history > header > span { color: #526b75; font-size: 13px; font-weight: 700; }.migration-history-list { display: grid; }.migration-history-list article { align-items: center; border-bottom: 1px solid #e1e8eb; display: grid; gap: 20px; grid-template-columns: minmax(220px, 1fr) auto auto auto; padding: 18px 28px; }.migration-history-list article:last-child { border-bottom: 0; }.migration-history-list strong,.migration-history-list small { display: block; }.migration-history-list strong { color: #17343a; }.migration-history-list small { color: var(--text-muted); margin-top: 4px; }.migration-history-list dl { display: flex; gap: 18px; margin: 0; }.migration-history-list dt { color: var(--text-muted); font-size: 11px; }.migration-history-list dd { color: #17343a; font-weight: 800; margin: 2px 0 0; }.migration-history-status { background: #eff7f5; border-radius: 999px; color: #0b756a; font-size: 12px; font-weight: 800; padding: 6px 9px; white-space: nowrap; }.migration-history-status.is-reverted,.migration-history-status.is-partially-reverted { background: #f3f5f6; color: #526b75; }.migration-history-status.is-blocked { background: #fff0ef; color: #bb2a1d; }.migration-history-empty { color: var(--text-muted); padding: 34px 28px; text-align: center; }
.migration-heading { align-items: start; display: flex; gap: 24px; justify-content: space-between; }.migration-heading .eyebrow,.migration-panel-intro .eyebrow,.migration-modal .eyebrow { color: var(--primary-hover); font-size: 11px; font-weight: 800; letter-spacing: .07em; margin: 0 0 8px; }.migration-heading h1 { color: #132d37; font-size: 30px; line-height: 1.15; margin: 0; }.migration-heading p:not(.eyebrow),.migration-panel-intro > p:last-child { color: #526b75; font-size: 16px; margin: 9px 0 0; }.migration-security { align-items: center; background: #eff7f5; border: 1px solid #c9e3dd; border-radius: var(--radius-ui); color: #0b665f; display: inline-flex; flex: 0 0 auto; font-size: 13px; font-weight: 700; gap: 8px; padding: 10px 12px; }
.migration-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); list-style: none; margin: 0; padding: 0; }.migration-steps li { min-width: 0; overflow-wrap: anywhere; align-items: center; border-bottom: 2px solid #d9e3e7; color: var(--text-muted); display: flex; font-size: 13px; font-weight: 700; gap: 9px; padding-bottom: 12px; }.migration-steps b { flex-shrink: 0; align-items: center; background: #eef2f3; border-radius: 50%; display: inline-flex; height: 27px; justify-content: center; width: 27px; }.migration-steps li.is-current { border-color: var(--primary); color: #17343a; }.migration-steps li.is-current b,.migration-steps li.is-complete b { background: var(--primary); color: white; }.migration-steps li.is-complete { border-color: #9ccfc7; color: #326860; }
.migration-panel { background: #fff; border: 1px solid #d6e1e5; border-radius: var(--radius-panel); display: none; padding: 30px; }.migration-panel.is-current { display: grid; grid-template-columns:minmax(0,1fr); min-width:0; gap: 24px; }.migration-panel-intro h2 { color: #17343a; font-size: 23px; margin: 0; }.migration-panel-intro > p:last-child { font-size: 14px; }.migration-source-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }.migration-source { background: #fff; border: 1px solid #d6e1e5; border-radius: 8px; color: #526b75; display: grid; min-height: 176px; padding: 19px; position: relative; text-align: left; transition: border-color .15s, box-shadow .15s; }.migration-source:hover,.migration-source.is-selected { border-color: var(--primary); box-shadow: 0 4px 16px #0b665f18; }.migration-source > span { align-items: center; background: #eff6f5; border-radius: 9px; color: var(--primary); display: inline-flex; height: 42px; justify-content: center; width: 42px; }.migration-source strong { align-self: end; color: #17343a; font-size: 16px; margin-top: 15px; }.migration-source small { font-size: 13px; line-height: 1.4; margin-top: 4px; }.migration-source i { align-items: center; background: var(--primary); border-radius: 50%; color: white; display: none; height: 22px; justify-content: center; position: absolute; right: 15px; top: 15px; width: 22px; }.migration-source.is-selected i { display: inline-flex; }.migration-panel-actions { align-items: center; border-top: 1px solid #e1e8eb; display: flex; gap: 10px; justify-content: flex-end; padding-top: 20px; }.migration-panel-actions > span { color: var(--text-muted); font-size: 13px; margin-right: auto; }
.migration-dropzone { align-items: center; background: #fbfcfc; border: 1.5px dashed #a9bdc4; border-radius: 8px; color: #60747b; cursor: pointer; display: grid; justify-items: center; min-height: 220px; padding: 28px; text-align: center; }.migration-dropzone:hover { background: #f4faf9; border-color: var(--primary); }.migration-dropzone input { height: 1px; opacity: 0; position: absolute; width: 1px; }.migration-dropzone > span { align-items: center; background: #e9f5f3; border-radius: 50%; color: var(--primary); display: inline-flex; height: 58px; justify-content: center; width: 58px; }.migration-dropzone strong { color: #17343a; font-size: 16px; margin-top: 13px; }.migration-dropzone small { font-size: 13px; margin-top: 5px; }.migration-detection { align-items: center; background: #eff7f5; border: 1px solid #c9e3dd; border-radius: 8px; color: #376a65; display: flex; gap: 13px; padding: 14px 16px; }.migration-detection > span { color: var(--primary); }.migration-detection div { flex: 1; }.migration-detection strong { color: #17343a; display: block; font-size: 14px; }.migration-detection p { font-size: 13px; margin: 4px 0 0; }.migration-detection b { color: #0b665f; font-size: 13px; }
.migration-company-select { color: #29464f; display: grid; font-size: 13px; font-weight: 700; gap: 7px; max-width: 620px; }.migration-company-select select { width:100%; min-width:0; background: #fff; border: 1px solid #cbdade; border-radius: 7px; color: #17343a; font: inherit; font-size: 15px; font-weight: 600; height: 44px; padding: 0 12px; }.migration-company-select small { color: #60747b; font-size: 12px; font-weight: 400; }.migration-import-mode { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.migration-import-mode label { align-items: start; background: #fbfcfc; border: 1px solid #d5e1e4; border-radius: 8px; cursor: pointer; display: flex; gap: 11px; padding: 14px 16px; }.migration-import-mode input { accent-color: var(--primary); margin-top: 3px; }.migration-import-mode strong,.migration-import-mode small { display: block; }.migration-import-mode strong { color: #17343a; font-size: 14px; }.migration-import-mode small { color: #60747b; font-size: 12px; line-height: 1.4; margin-top: 3px; }.migration-error { background: #fff0ed; border: 1px solid #f0c4bf; border-radius: 7px; color: #a52922; font-size: 13px; margin: 0; padding: 11px 13px; }
.migration-summary-cards { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }.migration-summary-cards article { align-items: center; border: 1px solid #d6e1e5; border-radius: 8px; display: flex; gap: 13px; min-height: 108px; padding: 16px; }.migration-summary-cards article > span { align-items: center; background: #f1f6f7; border: 1px solid #d6e1e5; border-radius: 10px; color: var(--primary); display: inline-flex; height: 42px; justify-content: center; width: 42px; }.migration-summary-cards article:nth-child(2) > span { color: #ac6c11; }.migration-summary-cards article:nth-child(3) > span { background: #fff0ed; color: #c23328; }.migration-summary-cards small,.migration-summary-cards p { color: #60747b; display: block; font-size: 12px; margin: 0; }.migration-summary-cards strong { color: #17343a; display: block; font-size: 26px; line-height: 1.1; margin: 3px 0; }.migration-mapping { border: 1px solid #d6e1e5; border-radius: 8px; overflow: hidden; }.migration-mapping header { align-items: center; background: #f8fafb; border-bottom: 1px solid #dce5e8; display: flex; justify-content: space-between; padding: 14px 17px; }.migration-mapping h3 { color: #17343a; font-size: 15px; margin: 0; }.migration-mapping p { color: #60747b; font-size: 12px; margin: 4px 0 0; }.migration-mapping header > span { color: var(--primary); font-size: 12px; font-weight: 700; }.migration-mapping-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.migration-mapping-list > span { align-items: center; border-bottom: 1px solid #e3eaed; color: #6b7f86; display: grid; font-size: 13px; gap: 8px; grid-template-columns: 1fr 1fr 18px 1.5fr; padding: 14px 17px; }.migration-mapping-list > span:nth-last-child(-n+2) { border-bottom: 0; }.migration-mapping-list > span:nth-child(odd) { border-right: 1px solid #e3eaed; }.migration-mapping-list b,.migration-mapping-list strong { color: #25414a; }.migration-mapping-list i { color: #60747b; font-style: normal; }.migration-complete { align-items: center; display: grid; justify-items: center; margin: 8px auto; max-width: 610px; padding: 24px 0 12px; text-align: center; }.migration-complete > span { align-items: center; background: #e6f5f2; border-radius: 50%; color: var(--primary); display: inline-flex; height: 62px; justify-content: center; width: 62px; }.migration-complete .eyebrow { margin-top: 17px; }.migration-complete h2 { color: #17343a; font-size: 25px; margin: 0; }.migration-complete p:not(.eyebrow) { color: #60747b; font-size: 14px; line-height: 1.55; margin: 9px 0 20px; }.migration-complete > div { align-items: baseline; display: flex; gap: 8px; margin-bottom: 23px; }.migration-complete > div b { color: #17343a; font-size: 21px; }.migration-complete > div span { color: #60747b; font-size: 12px; margin-right: 13px; }.migration-complete small { color: #0b665f; font-size: 13px; margin-top: 12px; }
.migration-company-match { background: #eff7f5; border: 1px solid #c9e3dd; border-radius: 8px; color: #376a65; display: grid; gap: 3px; padding: 13px 16px; }.migration-company-match strong { align-items: center; color: #0b665f; display: flex; font-size: 14px; gap: 7px; }.migration-company-match span,.migration-company-match small { font-size: 13px; }.migration-company-match.is-error { background: #fff0ed; border-color: #efc4bf; color: #93413a; }.migration-company-match.is-error strong { color: #b52e27; }.migration-preview-table { overflow: auto; }.migration-preview-table table { border-collapse: collapse; min-width: 880px; width: 100%; }.migration-preview-table th { background: #f4f7f8; color: #55707a; font-size: 11px; letter-spacing: .04em; padding: 11px 14px; text-align: left; text-transform: uppercase; }.migration-preview-table td { border-top: 1px solid #e0e8eb; color: #425c66; font-size: 13px; padding: 12px 14px; }.people-directory-empty { color: #60747b; padding: 42px !important; text-align: center; }
.migration-modal[hidden] { display: none; }.migration-modal { align-items: center; display: grid; inset: 0; justify-items: center; padding: 24px; position: fixed; z-index: 20; }.migration-modal-backdrop { background: #102d3690; inset: 0; position: absolute; }.migration-modal-card { background: #fff; border-radius: 10px; box-shadow: 0 20px 65px #0c252c4d; display: grid; max-height: calc(100dvh - 48px); max-width: 1260px; overflow: hidden; position: relative; width: 100%; }.migration-modal-card > header { align-items: start; border-bottom: 1px solid #dce5e8; display: flex; justify-content: space-between; padding: 22px 24px; }.migration-modal-card h2 { color: #17343a; font-size: 22px; margin: 0; }.migration-modal-card header p:not(.eyebrow) { color: #60747b; font-size: 13px; margin: 5px 0 0; }.migration-modal-tools { align-items: center; background: #f8fafb; border-bottom: 1px solid #dce5e8; display: flex; gap: 15px; justify-content: space-between; padding: 12px 24px; }.migration-status-filter { display: flex; gap: 5px; }.migration-status-filter button { background: transparent; border: 0; border-radius: var(--radius-ui); color: #60747b; font: inherit; font-size: 12px; padding: 8px 10px; }.migration-status-filter button.is-active { background: #fff; box-shadow: 0 1px 3px #19343a1c; color: #17343a; font-weight: 700; }.migration-status-filter b { font-size: 11px; margin-left: 3px; }.migration-modal-tools label { align-items: center; background: #fff; border: 1px solid #d2dfe4; border-radius: var(--radius-ui); color: #60747b; display: flex; gap: 7px; padding: 0 10px; }.migration-modal-tools input { border: 0; font: inherit; font-size: 13px; height: 36px; outline: 0; width: 245px; }.migration-validation-table { overflow: auto; }.migration-validation-table table { border-collapse: collapse; min-width: 1080px; width: 100%; }.migration-validation-table th { background: #f4f7f8; color: #55707a; font-size: 11px; letter-spacing: .04em; padding: 12px 14px; text-align: left; text-transform: uppercase; }.migration-validation-table td { border-top: 1px solid #e0e8eb; color: #425c66; font-size: 13px; padding: 13px 14px; }.migration-status { border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 700; padding: 5px 8px; }.migration-status.is-ready { background: #e7f4ef; color: #087a70; }.migration-status.is-review { background: #fff4e4; color: #9a5b0c; }.migration-status.is-blocked { background: #fdebea; color: #b52e27; }.migration-modal-card footer { align-items: center; border-top: 1px solid #dce5e8; display: flex; justify-content: space-between; padding: 13px 24px; }.migration-modal-card footer span { color: #60747b; font-size: 12px; }
.employment-document { display: grid; gap: 16px; min-width: 0; }
.employment-document-breadcrumb { align-items: center; color: var(--text-faint); display: flex; flex-wrap: wrap; font-size: var(--type-meta); gap: 8px; }
.employment-document-breadcrumb a { align-items: center; color: var(--text-muted); display: inline-flex; font-weight: 650; gap: 4px; text-decoration: none; }
.employment-document-breadcrumb a:hover { color: var(--primary-hover); }
.employment-document-heading { align-items: start; display: flex; gap: 16px; justify-content: space-between; }
.employment-document-heading .eyebrow { margin: 0 0 5px; }.employment-document-heading h1 { font-size: 22px; line-height: 1.2; margin: 0; }.employment-document-heading p:not(.eyebrow) { color: var(--text-muted); font-size: var(--type-ui); margin: 5px 0 0; }
.employment-document-draft { background: #fff5e5; border: 1px solid #f0d39e; border-radius: 999px; color: #89560a; font-size: var(--type-meta); font-weight: 700; padding: 5px 9px; white-space: nowrap; }
.employment-document-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(254px, 286px) minmax(0, 1fr); }
.employment-document-sidebar { display: grid; gap: 12px; }
.document-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 14px; }.document-panel > header { align-items: center; display: flex; justify-content: space-between; }.document-panel > header b { align-items: center; background: var(--surface-accent); border-radius: 50%; color: var(--primary-hover); display: inline-flex; font-size: 11px; height: 28px; justify-content: center; width: 28px; }
.document-panel-title { color: var(--text); font-size: 11px; font-weight: 750; letter-spacing: .05em; margin: 0 0 10px; text-transform: uppercase; }.document-panel-title b { color: var(--text-faint); float: right; }
.document-template-picker > span,.document-condition-fields label > span { color: var(--text-muted); display: block; font-size: var(--type-meta); font-weight: 650; margin-bottom: 5px; }.document-template-picker select,.document-condition-fields input { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); color: var(--text); font: inherit; font-size: var(--type-meta); min-height: 34px; padding: 0 8px; width: 100%; }.document-template-picker small { color: var(--text-faint); display: block; font-size: 11px; margin-top: 7px; }
.document-data-list { display: grid; gap: 9px; }.document-data-list div { display: grid; gap: 2px; }.document-data-list span { color: var(--text-faint); font-size: 11px; }.document-data-list strong { font-size: var(--type-meta); }.document-panel-note { color: var(--text-faint); display: block; font-size: 11px; line-height: 1.4; margin-top: 12px; }
.document-condition-fields { display: grid; gap: 10px; }.document-clause-panel ol { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }.document-clause-panel li { align-items: center; color: var(--text-muted); display: flex; font-size: var(--type-meta); gap: 8px; }.document-clause-panel li span { color: var(--primary); font-size: 10px; font-weight: 750; width: 18px; }
.document-preview-area { background: #eef2f3; border: 1px solid var(--border); border-radius: var(--radius-panel); min-width: 0; overflow: hidden; }.document-preview-toolbar { align-items: center; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; gap: 12px; justify-content: space-between; min-height: 54px; padding: 8px 12px; }.document-preview-toolbar > div { align-items: center; display: flex; gap: 7px; }.document-preview-toolbar button { background: transparent; border: 0; border-radius: var(--radius-ui); color: var(--text-muted); font: inherit; font-size: var(--type-meta); font-weight: 650; min-height: 34px; padding: 0 9px; }.document-preview-toolbar button:hover,.document-preview-toolbar button.is-active { background: var(--surface-subtle); color: var(--primary-hover); }.document-preview-toolbar button:not(.is-active) svg { vertical-align: middle; }.document-preview-toolbar .document-primary-action { background: var(--primary-solid); color: white; }.document-preview-toolbar .document-primary-action:hover { background: var(--primary-solid-hover); color: white; }
.document-preview-hint { color: var(--text-faint); font-size: 11px; margin: 13px auto 0; max-width: 720px; padding: 0 20px; }.document-paper { background: white; box-shadow: 0 2px 10px rgb(15 23 42 / 12%); margin: 14px auto 20px; max-width: 720px; min-height: 720px; padding: 46px 58px 34px; }.document-paper > header { border-bottom: 1px solid var(--border); display: grid; gap: 4px; padding-bottom: 15px; }.document-paper > header span,.document-paper > header small { color: var(--text-faint); font-size: 11px; }.document-paper > header strong { color: var(--primary-hover); font-size: var(--type-meta); }.document-paper-content h2 { font-family: Georgia, serif; font-size: 17px; line-height: 1.4; margin: 32px 0 26px; text-align: center; }.document-paper-content p { color: #263234; font-family: Georgia, serif; font-size: 14px; line-height: 1.8; margin: 0 0 17px; text-align: justify; }.document-paper mark { background: #e2f4ee; border-bottom: 1px dashed #79b9a8; color: #134b42; padding: 1px 2px; }.document-signatures { display: grid; gap: 50px; grid-template-columns: repeat(2, 1fr); margin-top: 62px; text-align: center; }.document-signatures div { border-top: 1px solid var(--text-faint); padding-top: 7px; }.document-signatures span,.document-signatures strong { display: block; }.document-signatures span { color: var(--text-faint); font-size: 10px; }.document-signatures strong { font-size: 11px; margin-top: 3px; }.document-paper > footer { color: var(--text-faint); font-size: 10px; margin-top: 34px; text-align: center; }
.document-validation { align-items: center; background: #e8f5ed; border-top: 1px solid #b9dcc7; color: #245e40; display: flex; font-size: var(--type-meta); gap: 10px; justify-content: space-between; min-height: 56px; padding: 8px 14px; }.document-validation strong { font-size: var(--type-meta); }.document-validation button { background: transparent; border: 1px solid #9ec5ad; border-radius: var(--radius-ui); color: #245e40; font: inherit; font-size: var(--type-meta); font-weight: 650; min-height: 32px; padding: 0 9px; white-space: nowrap; }
.system-document-fields { max-height:500px; overflow:auto; scrollbar-gutter:stable; margin-bottom:12px; }.system-document-fields details { border-bottom:1px solid var(--border); padding:10px 0; }.system-document-fields summary { cursor:pointer; font-size:var(--type-meta); font-weight:700; }.system-document-fields .document-condition-fields { padding-top:12px; }.system-document-fields textarea { width:100%; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-ui); color:var(--text); font:inherit; font-size:var(--type-meta); padding:8px; resize:vertical; }.system-document-fields input[readonly] { opacity:.72; }.document-paper.is-system-template { width:100%; max-width:none; min-height:0; padding:0; background:#e9edef; box-shadow:none; }.document-paper.is-system-template iframe { width:100%; height:760px; border:0; display:block; }.document-panel [data-system-refresh] { width:100%; }
.system-document-help { color:var(--text-muted); font-size:var(--type-meta); line-height:1.45; margin:4px 0 10px; }.system-field-source { color:var(--primary); display:inline; font-size:11px; font-weight:600; margin-left:4px; }.system-document-fields label:has(.system-field-source) input { border-left:3px solid var(--primary); }
.document-history { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-ui); margin: 14px auto; max-width: 720px; padding: 16px; }.document-history > strong { font-size: var(--type-ui); }.document-history div { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }.document-history span { color: var(--text-faint); font-size: 11px; }.document-history p { font-size: var(--type-meta); margin: 3px 0 0; }
.operation-content { display: grid; gap: 18px; min-width: 0; }
.employee-profile-page { display: grid; gap: 16px; }
.employee-profile-breadcrumb { align-items: center; color: var(--text-faint); display: flex; font-size: var(--type-meta); gap: 8px; }
.employee-profile-breadcrumb a { align-items: center; color: var(--text-muted); display: inline-flex; gap: 3px; }
.employee-profile-breadcrumb a:hover { color: var(--primary-hover); text-decoration: underline; }
.employee-profile-breadcrumb a:first-child { border: 1px solid var(--border); border-radius: var(--radius-ui); height: 30px; justify-content: center; text-decoration: none; width: 30px; }
.employee-profile-breadcrumb strong { color: var(--text); font-weight: 650; }
.employee-profile-workspace { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 590px; overflow: hidden; }
.employee-profile-sidebar { background: var(--surface-subtle); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.employee-profile-sidebar > header { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: 10px; padding: 18px; }
.employee-profile-sidebar > header .employee-profile-avatar { height: 42px; width: 42px; font-size: 14px; }
.employee-profile-sidebar > header strong,.employee-profile-sidebar > header span { display: block; }.employee-profile-sidebar > header strong { color: var(--text); font-size: var(--type-ui); }.employee-profile-sidebar > header span { color: var(--text-muted); font-size: var(--type-meta); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-profile-sidebar-section { padding: 18px 12px; }.employee-profile-sidebar-section > p { color: var(--text-faint); font-size: 12px; font-weight: 800; margin: 0 8px 10px; }
.employee-profile-sidebar footer { border-top: 1px solid var(--border); display: grid; gap: 5px; margin-top: auto; padding: 15px 18px; }.employee-profile-sidebar footer span { color: #236142; font-size: var(--type-meta); font-weight: 700; }.employee-profile-sidebar footer small { color: var(--text-faint); font-size: var(--type-meta); }
.employee-profile-main { min-width: 0; padding: 24px; }.employee-profile-hero { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: 14px; min-height: 96px; padding: 0 0 20px; }
.employee-profile-avatar { align-items: center; background: #e3f5ee; border-radius: 50%; color: var(--primary-hover); display: flex; font-size: 19px; font-weight: 800; height: 58px; justify-content: center; width: 58px; }
.employee-profile-hero .eyebrow { font-size: 10px; margin: 0 0 4px; }.employee-profile-hero h1 { font-size: 22px; margin: 0; }.employee-profile-hero p:not(.eyebrow) { color: var(--text-muted); font-size: var(--type-ui); margin: 4px 0; }.employee-profile-company { color: var(--text-faint); font-size: var(--type-meta); }.employee-profile-status { background: #e8f4ee; border: 1px solid #b7d8c6; border-radius: 999px; color: #236142; font-size: 12px; font-weight: 700; margin-left: auto; padding: 5px 10px; }
.employee-profile-tabs { display: grid; gap: 3px; }.employee-profile-tabs a { align-items: center; border-left: 3px solid transparent; border-radius: 0 var(--radius-ui) var(--radius-ui) 0; color: var(--text-muted); display: flex; font-size: var(--type-ui); gap: 9px; min-height: 38px; padding: 0 10px; }.employee-profile-tabs a:hover { background: var(--surface); color: var(--text); }.employee-profile-tabs a.is-active { background: var(--surface); border-left-color: var(--primary); color: var(--text); font-weight: 400; }
.employee-profile-content { padding-top: 20px; }
.employee-profile-grid { display: grid; gap: 14px; grid-template-columns: repeat(2,minmax(0,1fr)); }.employee-profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 18px; }.employee-profile-card--wide { grid-column: 1 / -1; }.employee-profile-card .eyebrow { font-size: 10px; margin-bottom: 5px; }.employee-profile-card h2 { font-size: 17px; margin: 0 0 16px; }
.employee-profile-facts { display: grid; gap: 13px 22px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; }.employee-profile-facts dt { color: var(--text-faint); font-size: 11px; margin-bottom: 3px; }.employee-profile-facts dd { color: var(--text); font-size: var(--type-ui); font-weight: 600; margin: 0; }
.employee-portal-card > header { align-items: start; display: flex; justify-content: space-between; margin-bottom: 18px; }.employee-portal-card > header p { color: var(--text-muted); font-size: var(--type-ui); margin: 5px 0 0; }.employee-portal-card footer { border-top: 1px solid var(--border); display: flex; gap: 9px; margin-top: 20px; padding-top: 16px; }.employee-portal-card button:disabled { cursor: not-allowed; opacity: .58; }
.employee-portal-empty { align-items: center; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-ui); display: flex; gap: 16px; justify-content: space-between; padding: 16px; }.employee-portal-empty strong { display: block; }.employee-portal-empty p { color: var(--text-muted); font-size: var(--type-meta); margin: 4px 0 0; }.employee-portal-password { background: #fff5e5; border: 1px solid #f0d39e; border-radius: var(--radius-ui); display: grid; gap: 4px; margin-top: 18px; padding: 13px; }.employee-portal-password strong { color: #74480b; }.employee-portal-password span { color: #89560a; font-size: var(--type-meta); }.employee-portal-password code { color: #512f04; font-size: 15px; font-weight: 800; margin-top: 5px; }
.portal-facts { display: grid; gap: 16px; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 20px 0 0; }.portal-facts dt { color: var(--text-faint); font-size: 11px; }.portal-facts dd { font-weight: 650; margin: 4px 0 0; }.portal-card table { border-collapse: collapse; width: 100%; }.portal-card th,.portal-card td { border-top: 1px solid var(--border); padding: 12px 8px; text-align: left; }.portal-card th { color: var(--text-faint); font-size: 11px; }.portal-prepared { min-height: 220px; }.portal-prepared > span { align-items: center; color: var(--primary-hover); display: inline-flex; font-size: var(--type-meta); font-weight: 700; gap: 7px; margin-top: 20px; }
.employee-profile-doc,.employee-profile-list > div { align-items: center; border-top: 1px solid var(--border); display: flex; gap: 10px; padding: 11px 0; }.employee-profile-doc:first-of-type,.employee-profile-list > div:first-child { border-top: 0; }.employee-profile-doc > span { color: var(--primary); }.employee-profile-doc strong,.employee-profile-doc small,.employee-profile-list strong,.employee-profile-list span { display: block; }.employee-profile-doc small,.employee-profile-list span { color: var(--text-faint); font-size: var(--type-meta); margin-top: 3px; }.employee-profile-list > div { display: block; }
.employee-profile-summary { display: grid; gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); }.employee-profile-summary article { background: var(--surface-subtle); border-radius: var(--radius-ui); padding: 13px; }.employee-profile-summary span,.employee-profile-summary small { color: var(--text-faint); display: block; font-size: 11px; }.employee-profile-summary strong { display: block; font-size: 15px; margin: 5px 0; }
.document-library { background: var(--surface); border: 1px solid #cbdde5; border-radius: var(--radius-panel); display: grid; grid-template-columns: 306px minmax(0, 1fr); min-height: calc(100dvh - 170px); overflow: hidden; }
.document-library-sidebar { background: #fbfcfd; border-right: 1px solid #d7e1e6; display: grid; align-content: start; gap: 20px; padding: 24px 12px; }.document-library-search { align-items: center; background: #f2f5f7; border: 1px solid #d4dee4; border-radius: var(--radius-panel); color: #5c7078; display: flex; gap: 9px; height: 54px; padding: 0 13px; }.document-library-search input { background: transparent; border: 0; color: var(--text); font: inherit; min-width: 0; outline: 0; width: 100%; }.document-library-sidebar section > p { color: #455e68; font-size: 11px; font-weight: 800; letter-spacing: .06em; margin: 0 0 8px; padding: 0; text-transform: uppercase; }.document-library-sidebar nav { display: grid; gap: 2px; }.document-library-sidebar nav button { align-items: center; background: transparent; border: 0; border-radius: var(--radius-ui); color: #50636b; display: flex; font: inherit; font-size: var(--type-ui); justify-content: space-between; min-height: 40px; padding: 0 10px; text-align: left; }.document-library-sidebar nav button:hover,.document-library-sidebar nav button.is-active { background: #eef3f5; color: #17343a; font-weight: 700; }.document-library-sidebar nav button b { background: #f0f3f5; border-radius: 999px; font-size: 11px; min-width: 27px; padding: 3px 7px; text-align: center; }.document-library-states button { justify-content: flex-start !important; gap: 9px; }.document-library-states button b { margin-left: auto; }.document-library-states i { background: #c8d2d8; border-radius: 50%; height: 8px; width: 8px; }.document-library-states button:nth-child(1) i { background: #087a70; }.document-library-states button:nth-child(2) i { background: #b87614; }.document-library-states button:nth-child(3) i { background: #c23328; }
.document-library-content { display: grid; align-content: start; gap: 20px; padding: 28px 30px; }.document-library-heading { align-items: start; display: flex; gap: 18px; justify-content: space-between; }.document-library-heading .eyebrow { color: var(--primary-hover); font-size: 11px; font-weight: 800; letter-spacing: .07em; margin: 0 0 9px; }.document-library-heading h1 { color: #132d37; font-size: 34px; line-height: 1.15; margin: 0; }.document-library-heading h1 span { font-weight: 800; }.document-library-heading p:not(.eyebrow) { color: #526b75; font-size: 17px; margin: 10px 0 0; }.document-library-heading > div:last-child { display: flex; gap: 10px; }.document-library-heading .ui-button { min-height: 46px; white-space: nowrap; }
.document-agents { background: var(--surface); border: 1px solid #cbdde5; border-radius: var(--radius-panel); display: grid; gap: 24px; min-height: calc(100dvh - 170px); padding: 30px; }.document-agents-heading { align-items: start; display: flex; gap: 18px; justify-content: space-between; }.document-agents-heading .eyebrow { color: var(--primary-hover); font-size: 11px; font-weight: 800; letter-spacing: .07em; margin: 0 0 9px; }.document-agents-heading h1 { color: #132d37; font-size: 32px; margin: 0; }.document-agents-heading p:not(.eyebrow) { color: #526b75; font-size: 16px; margin: 10px 0 0; max-width: 680px; }.document-agents-heading > span { align-items: center; background: #eef6f5; border: 1px solid #cbe2df; border-radius: 8px; color: var(--primary-hover); display: inline-flex; font-size: 12px; font-weight: 750; gap: 7px; padding: 9px 11px; }.document-agents-empty { align-items: center; background: #f8fafb; border: 1px dashed #c7d7dc; border-radius: 10px; display: grid; gap: 15px; grid-template-columns: auto minmax(0, 1fr); justify-self: stretch; padding: 24px; }.document-agents-empty > span { align-items: center; background: #e6f3f1; border-radius: 9px; color: var(--primary); display: flex; height: 48px; justify-content: center; width: 48px; }.document-agents-empty h2 { color: #17343a; font-size: 17px; margin: 0 0 5px; }.document-agents-empty p { color: #60747b; font-size: 13px; line-height: 1.5; margin: 0; max-width: 650px; }
.document-library-metrics { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }.document-library-metrics article { align-items: center; background: #fff; border: 1px solid #d6e0e5; border-radius: 20px; display: flex; gap: 14px; min-height: 112px; padding: 15px 20px; }.document-library-metrics article > span { align-items: center; background: #f2f6f7; border: 1px solid #d6e0e5; border-radius: 14px; color: #087a70; display: grid; height: 52px; place-items: center; width: 52px; }.document-library-metrics .is-alert { background: #fff0ed; color: #c23328; }.document-library-metrics small,.document-library-metrics p { color: #526b75; display: block; font-size: var(--type-meta); margin: 0; }.document-library-metrics strong { color: #132d37; display: block; font-size: 31px; line-height: 1; margin: 4px 0; }
.document-library-table { border: 1px solid #d6e0e5; border-radius: 20px; overflow: hidden; }.document-library-table > header { align-items: center; background: #fff; border-bottom: 1px solid #d6e0e5; display: flex; gap: 12px; justify-content: space-between; min-height: 74px; padding: 12px 20px; }.document-library-views { border: 1px solid #d4dee4; border-radius: var(--radius-ui); display: flex; overflow: hidden; }.document-library-views button { align-items: center; background: transparent; border: 0; color: #526b75; display: inline-flex; height: 42px; justify-content: center; width: 43px; }.document-library-views button + button { border-left: 1px solid #d4dee4; }.document-library-views button.is-active { background: #f1f5f7; color: #17343a; }.document-library-table > header > label { color: #526b75; font-size: var(--type-meta); margin-right: auto; }.document-library-table > header > span { align-items: center; color: #526b75; display: flex; font-size: var(--type-meta); gap: 8px; }.document-library-table select { background: var(--surface); border: 1px solid #ccd8de; border-radius: var(--radius-ui); color: var(--text); font: inherit; height: 42px; min-width: 178px; padding: 0 9px; }.document-library-scroll { overflow-x: auto; }.document-library-table table { border-collapse: collapse; min-width: 850px; width: 100%; }.document-library-table th { background: #f5f8fa; color: #4f6873; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 13px 17px; text-align: left; text-transform: uppercase; }.document-library-table td { border-top: 1px solid #dfe7eb; color: #49616b; font-size: var(--type-meta); padding: 14px 17px; vertical-align: middle; }.document-library-table td:first-child { align-items: center; display: flex; gap: 12px; }.document-row-icon { align-items: center; background: #f2f6f7; border: 1px solid #d6e0e5; border-radius: 10px; color: var(--primary); display: inline-flex; flex: 0 0 auto; height: 40px; justify-content: center; width: 40px; }.document-library-table td strong,.document-library-table td small { display: block; }.document-library-table td strong { color: #17343a; font-size: var(--type-meta); }.document-library-table td small { color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.docs-workspace {
  background: #f7fafc;
  border: 1px solid #cbdde5;
  border-radius: var(--radius-panel);
  box-shadow: 0 8px 24px rgb(20 55 71 / 5%);
  display: grid;
  gap: 18px;
  min-height: calc(100dvh - 178px);
  padding: 24px;
}
.docs-workspace-heading { align-items: start; display: flex; gap: 16px; justify-content: space-between; }
.docs-workspace-heading .eyebrow { color: #4a6872; font-size: 11px; font-weight: 750; letter-spacing: .06em; margin: 0 0 7px; }
.docs-workspace-heading h1 { color: #17343a; font-size: 22px; line-height: 1.2; margin: 0; }
.docs-workspace-heading p:not(.eyebrow) { color: #61747a; font-size: 14px; line-height: 1.5; margin: 5px 0 0; }
.docs-workspace-heading .ui-button { flex: 0 0 auto; }
.docs-card-grid { align-content: start; display: grid; gap: 14px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.docs-template-card {
  background: var(--surface);
  border: 1px solid #d5e1e5;
  border-radius: var(--radius-panel);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 18px;
  text-align: left;
}
.docs-template-card:hover { border-color: #a9c4c7; box-shadow: 0 5px 14px rgb(20 55 71 / 8%); transform: translateY(-1px); }
.docs-card-eyebrow { color: #537078; font-size: 10px; font-weight: 750; letter-spacing: .06em; }
.docs-template-card h2 { color: #17343a; font-size: 16px; line-height: 1.35; margin: 12px 0 8px; }
.docs-template-card p { color: #63777d; font-size: 13px; line-height: 1.5; margin: 0; }
.docs-card-footer { align-items: center; display: flex; justify-content: space-between; margin-top: auto; padding-top: 18px; }
.docs-card-footer > span { color: #71838a; font-size: 11px; font-weight: 650; }
.docs-card-footer button,.docs-open-link {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--primary-hover);
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
  padding: 4px 0;
}
.docs-card-footer button:hover,.docs-open-link:hover { text-decoration: underline; }
.docs-draft-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.docs-draft-card { cursor: pointer; font: inherit; }
.docs-draft-card small { color: #71838a; display: block; font-size: 11px; margin-top: auto; padding-top: 16px; }
.docs-draft-card .docs-open-link { margin-top: 8px; }
.docs-status { border: 1px solid #c9d9df; border-radius: 999px; color: #46616b; font-size: 11px; font-weight: 700; padding: 4px 8px; width: fit-content; }
.docs-status.is-vigente { background: #e8f4ee; border-color: #b7d8c6; color: #236142; }
.docs-status.is-listo-para-revisar,.docs-status.is-en-revisión { background: #fff6df; border-color: #ead49a; color: #856313; }
.docs-status.is-borrador { background: #edf4f8; border-color: #c9dce5; color: #376078; }
.docs-status.is-draft { background: #edf4f8; border-color: #c9dce5; color: #376078; }.docs-status.is-ready_for_review { background: #fff6df; border-color: #ead49a; color: #856313; }.docs-status.is-active { background: #e8f4ee; border-color: #b7d8c6; color: #236142; }.docs-status.is-expired { background: #fff0ed; border-color: #efc7bf; color: #9d493c; }
.document-create-modal { max-width: 760px; }.document-create-modal form { display: grid; gap: 18px; padding: 20px 24px 24px; }.document-create-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.document-create-grid label { color: #3f5b65; display: grid; font-size: 13px; font-weight: 700; gap: 7px; }.document-create-grid input,.document-create-grid select,.document-create-grid textarea { background: #fff; border: 1px solid #cad8de; border-radius: var(--radius-ui); color: #183640; font: inherit; font-size: 14px; min-height: 42px; outline: 0; padding: 9px 11px; }.document-create-grid textarea { min-height: 78px; resize: vertical; }.document-create-grid input:focus,.document-create-grid select:focus,.document-create-grid textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px #087a7014; }.document-create-wide { grid-column: 1 / -1; }.document-create-modal form footer { display: flex; justify-content: flex-end; gap: 9px; }
.attendance-workspace { display:grid; gap:18px; }.attendance-workspace>header,.attendance-panel>header { align-items:center; display:flex; justify-content:space-between; gap:16px; }.attendance-workspace h1,.attendance-panel h2 { color:#17343a; margin:0; }.attendance-workspace header p:not(.eyebrow) { color:#60747b; margin:6px 0 0; }.attendance-workspace>header label,.attendance-modal label { color:#49616b; display:grid; font-size:12px; font-weight:700; gap:6px; }.attendance-workspace input,.attendance-modal input,.attendance-modal select { border:1px solid #cad8de; border-radius:var(--radius-ui); font:inherit; min-height:40px; padding:0 10px; }.attendance-metrics { display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); }.attendance-metrics article,.attendance-panel { background:#fff; border:1px solid #d6e0e5; border-radius:var(--radius-panel); }.attendance-metrics article { padding:16px; }.attendance-metrics small { color:#60747b; }.attendance-metrics strong { color:#17343a; display:block; font-size:26px; margin-top:5px; }.attendance-panel { overflow:hidden; }.attendance-panel>header { border-bottom:1px solid #dfe7eb; padding:14px 18px; }.attendance-panel h2 { font-size:16px; }.attendance-panel table { border-collapse:collapse; width:100%; }.attendance-panel th,.attendance-panel td { border-top:1px solid #e1e9ec; padding:12px 16px; text-align:left; }.attendance-panel th { background:#f5f8fa; color:#55707a; font-size:11px; text-transform:uppercase; }.attendance-panel>div { color:#526b75; padding:4px 18px 12px; }.attendance-modal { max-width:540px; }.attendance-modal form { display:grid; gap:12px; padding:20px 24px 24px; }.attendance-modal footer { display:flex; gap:8px; justify-content:flex-end; }.attendance-actions { display:flex; gap:8px; }.attendance-import-modal { max-width:920px; }.attendance-import-modal>header { align-items:flex-start; }.attendance-import-modal form { align-items:end; display:flex; gap:12px; padding:18px 24px; }.attendance-import-modal form .attendance-file { display:grid; flex:1; font-size:13px; font-weight:700; gap:6px; }.attendance-import-modal input[type=file] { border:1px solid #cad8de; border-radius:6px; min-height:40px; padding:7px; }.attendance-import-modal footer { display:flex; gap:8px; }.attendance-import-result { border-top:1px solid #dfe7eb; padding:18px 24px 24px; }.attendance-import-summary { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); }.attendance-import-summary article { background:#f6faf9; border:1px solid #d8e6e3; border-radius:6px; padding:12px; }.attendance-import-summary small { color:#60747b; display:block; }.attendance-import-summary strong { color:#17343a; display:block; font-size:22px; margin-top:3px; }.attendance-import-result h3 { color:#17343a; font-size:14px; margin:20px 0 8px; }.attendance-import-groups { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }.attendance-import-groups li { background:#f2f7f7; border-radius:5px; color:#35545c; display:flex; gap:6px; padding:8px 10px; }.attendance-import-guidance { color:#526b75; margin:16px 0; }.attendance-import-table { border:1px solid #d6e0e5; border-radius:6px; max-height:340px; overflow:auto; }.attendance-import-table table { border-collapse:collapse; width:100%; }.attendance-import-table th,.attendance-import-table td { border-bottom:1px solid #e1e9ec; padding:9px 10px; text-align:left; }.attendance-import-table th { background:#f5f8fa; color:#55707a; font-size:11px; text-transform:uppercase; }.attendance-outcome { border-radius:99px; font-size:12px; font-weight:700; padding:4px 8px; }.attendance-outcome.ready { background:#e5f5ef; color:#087e70; }.attendance-outcome.review { background:#fff4dd; color:#9a6100; }.attendance-outcome.blocked_company,.attendance-outcome.blocked_employee,.attendance-outcome.blocked_id { background:#feeceb; color:#b52318; }.attendance-import-footer { align-items:center; display:flex; justify-content:space-between; gap:12px; margin-top:16px; }.attendance-import-footer span { color:#60747b; font-size:12px; }
.docs-status.is-devuelto { background: #fff0ed; border-color: #efc7bf; color: #9d493c; }
.docs-control-summary { display: grid; gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.docs-control-summary article { background: var(--surface); border: 1px solid #d5e1e5; border-radius: var(--radius-panel); padding: 14px 16px; }
.docs-control-summary span,.docs-control-summary small { color: #687b82; display: block; font-size: 12px; }
.docs-control-summary strong { color: #17343a; display: block; font-size: 24px; line-height: 1.1; margin: 5px 0; }
.docs-controlled-table { background: var(--surface); border: 1px solid #d5e1e5; border-radius: var(--radius-panel); overflow: hidden; }
.docs-controlled-table > header { align-items: center; border-bottom: 1px solid #dbe5e8; display: flex; gap: 10px; justify-content: space-between; min-height: 60px; padding: 10px 14px; }
.docs-controlled-table > header > span { color: #687b82; font-size: 12px; margin-left: auto; white-space: nowrap; }
.docs-search { align-items: center; border: 1px solid #c7d6db; border-radius: var(--radius-ui); color: #5f747b; display: flex; gap: 8px; height: 36px; padding: 0 10px; width: min(360px,100%); }
.docs-search input { background: transparent; border: 0; color: var(--text); font: inherit; font-size: 13px; min-width: 0; outline: 0; width: 100%; }
.docs-filter-button { align-items: center; background: var(--surface); border: 1px solid #c7d6db; border-radius: var(--radius-ui); color: #38565f; display: inline-flex; font: inherit; font-size: 13px; font-weight: 650; gap: 6px; height: 36px; padding: 0 10px; }
.docs-table-scroll { overflow-x: auto; }
.docs-controlled-table table { border-collapse: collapse; font-size: 12px; min-width: 900px; width: 100%; }
.docs-controlled-table th { background: #f7fafc; color: #64787f; font-size: 10px; font-weight: 750; letter-spacing: .05em; padding: 11px 14px; text-align: left; text-transform: uppercase; }
.docs-controlled-table td { border-top: 1px solid #e1e9ec; color: #4d656d; padding: 13px 14px; vertical-align: middle; }
.docs-controlled-table td strong { color: #17343a; display: block; font-size: 12px; }
.docs-controlled-table td small { color: var(--text-muted); display: block; font-size: 11px; margin-top: 3px; }
.docs-row-action { align-items: center; background: transparent; border: 0; color: var(--primary-hover); display: inline-flex; padding: 5px; }
.page-header { align-items: end; display: grid; gap: 10px; grid-template-columns: minmax(0,1fr) auto; }
.page-header h1 { font-size: 22px; line-height: 1.2; margin: 0; }
.page-header p { color: var(--text-muted); line-height: 1.55; margin: 4px 0 0; max-width: 850px; }
.page-header-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.content-grid { display: grid; gap: 14px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.content-grid.two { grid-template-columns: 1.4fr .6fr; }
.content-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.control-form-actions { display: flex; gap: 9px; }
.control-center { display: grid; gap: 22px; }.control-center-heading { align-items: start; display: flex; gap: 20px; justify-content: space-between; }.control-center-heading .eyebrow,.control-onboarding .eyebrow,.control-company-detail .eyebrow { color: var(--primary-hover); font-size: 11px; font-weight: 800; letter-spacing: .07em; margin: 0 0 8px; }.control-center-heading h1 { color: #132d37; font-size: 30px; margin: 0; }.control-center-heading p:not(.eyebrow) { color: #526b75; font-size: 16px; margin: 9px 0 0; }.control-center-heading > span { align-items: center; background: #eff7f5; border: 1px solid #c9e3dd; border-radius: var(--radius-ui); color: #0b665f; display: inline-flex; font-size: 13px; font-weight: 700; gap: 8px; padding: 10px 12px; white-space: nowrap; }.control-center-loading { align-items: center; background: #fff; border: 1px solid #d6e1e5; border-radius: var(--radius-panel); color: #60747b; display: flex; gap: 10px; min-height: 90px; padding: 24px; }.control-center-loading svg { color: var(--primary); }
.migration-row-action { background: #fff; border: 1px solid #cbd9de; border-radius: 5px; color: #365862; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 9px; }.migration-row-action:hover { border-color: #0b8279; color: #087a70; }.migration-row-action:disabled { cursor: progress; opacity: .6; }
.payroll-history { display: grid; gap: 18px; }.payroll-history-tools { align-items: end; display: flex; justify-content: space-between; }.payroll-history-tools label { color: #526b75; display: grid; font-size: 12px; font-weight: 800; gap: 6px; min-width: 240px; }.payroll-history-tools span { color: #087f76; font-size: 13px; font-weight: 800; }.payroll-history-table { padding: 0; }.payroll-history-table header { padding: 22px 24px 0; }.payroll-table-scroll { overflow-x: auto; }.payroll-history-table table { border-collapse: collapse; width: 100%; }.payroll-history-table th { background: #f4f7f8; color: #526b75; font-size: 12px; text-align: left; }.payroll-history-table th,.payroll-history-table td { border-top: 1px solid #e1e8eb; padding: 13px 16px; vertical-align: middle; }.payroll-history-table td:nth-child(3),.payroll-history-table td:nth-child(4),.payroll-history-table td:nth-child(5),.payroll-history-table td:nth-child(6) { text-align: right; }.payroll-history-table small { color: var(--text-muted); display: block; font-size: 12px; margin-top: 3px; }.payroll-history-empty { color: var(--text-muted); padding: 34px; text-align: center; }
.payroll-reconciliation { padding: 0; }.payroll-reconciliation > header { padding: 22px 24px 0; }.payroll-reconciliation-form { align-items: end; display: grid; gap: 14px; grid-template-columns: minmax(220px,1fr) minmax(220px,1fr) auto; padding: 20px 24px 0; }.payroll-reconciliation-form label { color: #526b75; display: grid; font-size: 12px; font-weight: 800; gap: 7px; }.payroll-reconciliation-form input { color: #29434b; font: inherit; max-width: 100%; }.payroll-reconciliation-note { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 14px 24px; }.payroll-reconciliation [data-reconcile-message] { color: #087f76; font-size: 13px; font-weight: 700; padding: 0 24px; }.payroll-reconciliation-metrics { margin: 18px 24px 0; }.payroll-reconciliation .payroll-table-scroll { padding: 0 24px 24px; }.payroll-reconciliation .payroll-table-scroll table { border-collapse: collapse; min-width: 800px; width: 100%; }.payroll-reconciliation .payroll-table-scroll th,.payroll-reconciliation .payroll-table-scroll td { border-top: 1px solid #e1e8eb; padding: 11px 10px; text-align: left; vertical-align: top; }.payroll-reconciliation .payroll-table-scroll th { background: #f4f7f8; color: #526b75; font-size: 12px; }.payroll-reconciliation .payroll-table-scroll td small { color: var(--text-muted); display: block; margin-top: 3px; }.payroll-reconciliation-flag { background: #fff4d6; border-radius: 3px; color: #76520a; display: inline-block; font-size: 12px; margin: 0 3px 4px 0; padding: 3px 6px; }
.payroll-concept-review { border-top: 1px solid #e1e8eb; }.payroll-concept-review > header { padding: 18px 24px 8px; }.payroll-concept-review h3 { margin: 0 0 6px; }.payroll-concept-review header p { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 0; }.payroll-concept-review .payroll-table-scroll table { min-width: 780px; }
.payroll-concept-details { border-top: 1px solid #e1e8eb; padding: 14px 24px 0; }.payroll-concept-details > summary { color: #087f76; cursor: pointer; font-weight: 750; padding-bottom: 14px; }.payroll-concept-details .payroll-table-scroll { padding: 0 0 18px; }
@media (max-width: 760px) { .payroll-reconciliation-form { grid-template-columns: 1fr; }.payroll-reconciliation-form button { justify-self: start; }.payroll-reconciliation > header,.payroll-concept-review > header { padding-left: 16px; padding-right: 16px; }.payroll-reconciliation-note { margin-left: 16px; margin-right: 16px; }.payroll-reconciliation .payroll-table-scroll { padding-left: 16px; padding-right: 16px; } }
.payroll-runs { display: grid; gap: 18px; }.payroll-production-notice { align-items: start; background: #f7f2e8; border: 1px solid #e6d5b4; border-radius: 8px; color: #6f531d; display: grid; gap: 4px; padding: 14px 16px; }.payroll-production-notice strong { font-size: 13px; }.payroll-production-notice span { font-size: 13px; line-height: 1.45; }.payroll-runs-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(290px,.8fr) minmax(0,1.2fr); }.payroll-run-form { align-content: start; display: grid; gap: 14px; }.payroll-run-form label { color: #526b75; display: grid; font-size: 12px; font-weight: 800; gap: 6px; }.payroll-run-form button { justify-self: start; }.payroll-run-list { min-height: 250px; }.payroll-run-list > div { display: grid; gap: 10px; }.payroll-run-row { align-items: center; background: #f8fbfb; border: 1px solid #dce7e9; border-radius: 7px; display: grid; gap: 15px; grid-template-columns: minmax(0,1fr) auto; padding: 14px; }.payroll-run-row strong,.payroll-run-row small { display: block; }.payroll-run-row strong { color: #17343a; font-size: 13px; }.payroll-run-row small { color: var(--text-muted); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }.payroll-run-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }.payroll-run-actions .ui-button { font-size: 12px; min-height: 34px; padding: 0 10px; }
.control-center-loading[hidden],.control-onboarding[hidden],.control-dashboard[hidden] { display: none; }
.control-onboarding { background: #fff; border: 1px solid #d6e1e5; border-radius: var(--radius-panel); display: grid; grid-template-columns: 260px minmax(0, 1fr); overflow: hidden; }.control-progress { background: #f4f8f8; border-right: 1px solid #dce6e8; padding: 28px 22px; }.control-progress > p { color: #587078; font-size: 11px; font-weight: 800; letter-spacing: .06em; margin: 0 0 22px; }.control-progress ol { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }.control-progress li { align-items: center; color: #718389; display: flex; gap: 10px; }.control-progress li b { align-items: center; background: #e1e8ea; border-radius: 50%; display: inline-flex; font-size: 12px; height: 28px; justify-content: center; width: 28px; }.control-progress li.is-current { color: #17343a; }.control-progress li.is-current b { background: var(--primary); color: #fff; }.control-progress strong,.control-progress small { display: block; }.control-progress strong { font-size: 13px; }.control-progress small { font-size: 11px; margin-top: 2px; }.control-onboarding-form { display: grid; gap: 23px; max-width: 850px; padding: 30px 34px; }.control-onboarding-form h2 { color: #17343a; font-size: 24px; margin: 0; }.control-onboarding-form > div > p:not(.eyebrow) { color: #60747b; font-size: 14px; margin: 7px 0 0; }.control-onboarding-form form { display: grid; gap: 18px; }.control-form-grid { display: grid; gap: 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.control-onboarding-form label:not(.control-group-toggle) { color: #3f5b65; display: grid; font-size: 13px; font-weight: 700; gap: 7px; }.control-onboarding-form input,.control-invite-form input,.control-invite-form select { background: #fff; border: 1px solid #cad8de; border-radius: var(--radius-ui); color: #183640; font: inherit; font-size: 14px; height: 42px; outline: 0; padding: 0 11px; }.control-onboarding-form input:focus,.control-invite-form input:focus,.control-invite-form select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px #087a7014; }.control-group-toggle { align-items: center; background: #f7fafb; border: 1px solid #d9e4e7; border-radius: 8px; cursor: pointer; display: flex; gap: 10px; padding: 12px; }.control-group-toggle input { accent-color: var(--primary); height: 16px; width: 16px; }.control-group-toggle strong,.control-group-toggle small { display: block; }.control-group-toggle strong { color: #26434d; font-size: 13px; }.control-group-toggle small { color: var(--text-muted); font-size: 12px; margin-top: 3px; }.control-onboarding-form fieldset { border: 0; margin: 0; padding: 0; }.control-onboarding-form legend { color: #3f5b65; font-size: 13px; font-weight: 700; margin-bottom: 9px; }.control-module-options { display: flex; flex-wrap: wrap; gap: 8px; }.control-module-options label { cursor: pointer; position: relative; }.control-module-options input { opacity: 0; position: absolute; }.control-module-options span { background: #f6f9fa; border: 1px solid #d3e0e4; border-radius: 999px; color: #536a73; display: block; font-size: 13px; padding: 8px 11px; }.control-module-options input:checked + span { background: #e2f3ef; border-color: #96d0c6; color: #075f58; font-weight: 700; }.control-form-divider { border-top: 1px solid #e1e8eb; }.control-onboarding-form h3 { color: #26434d; font-size: 16px; margin: 0; }.control-form-help { color: var(--text-muted); font-size: 12px; margin: 4px 0 0; }.control-form-error,.control-invite-form > p { color: #b32d25; font-size: 13px; margin: -5px 0 0; min-height: 16px; }.control-onboarding-form footer { align-items: center; display: flex; gap: 16px; justify-content: space-between; }.control-onboarding-form footer > span { align-items: center; color: #60747b; display: flex; font-size: 12px; gap: 7px; }
.control-dashboard { display: grid; gap: 20px; grid-template-columns: 230px minmax(0, 1fr); }.control-company-list { background: #fff; border: 1px solid #d6e1e5; border-radius: var(--radius-panel); height: fit-content; overflow: hidden; }.control-company-list header { align-items: center; border-bottom: 1px solid #dce6e8; display: flex; justify-content: space-between; padding: 13px; }.control-company-list header p { color: #4a6670; font-size: 11px; font-weight: 800; letter-spacing: .06em; margin: 0; }.control-company-list .ui-button { min-height: 33px; padding: 0 9px; }.control-company-list > div { display: grid; gap: 3px; padding: 8px; }.control-company-list > div button { background: transparent; border: 0; border-radius: 7px; color: #5c7078; font: inherit; padding: 11px; text-align: left; }.control-company-list > div button:hover,.control-company-list > div button.is-active { background: #e9f3f2; color: #153d42; }.control-company-list strong,.control-company-list small { display: block; }.control-company-list strong { font-size: 13px; }.control-company-list small { font-size: 11px; margin-top: 3px; }.control-company-detail { display: grid; gap: 18px; }.control-company-detail-head { align-items: start; display: flex; justify-content: space-between; }.control-company-detail h2 { color: #17343a; font-size: 25px; margin: 0; }.control-company-detail-head p:not(.eyebrow) { color: #60747b; font-size: 13px; margin: 6px 0 0; }.control-status { background: #e4f4ef; border-radius: 999px; color: #087a70; font-size: 12px; font-weight: 700; padding: 6px 10px; }.control-overview { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }.control-overview article,.control-team,.control-access-guide { background: #fff; border: 1px solid #d6e1e5; border-radius: var(--radius-panel); }.control-overview article { min-height: 130px; padding: 17px; }.control-overview small,.control-overview p { color: #60747b; display: block; font-size: 12px; margin: 0; }.control-overview strong { color: #17343a; display: block; font-size: 25px; line-height: 1; margin: 8px 0; }.control-overview article div { display: flex; flex-wrap: wrap; gap: 4px; }.control-overview article div span { background: #edf5f4; border-radius: 999px; color: #176a62; font-size: 10px; padding: 4px 6px; }.control-team > header { border-bottom: 1px solid #dce6e8; padding: 18px 20px; }.control-team h3,.control-access-guide h3 { color: #17343a; font-size: 17px; margin: 0; }.control-team header p:not(.eyebrow),.control-access-guide p:not(.eyebrow) { color: #60747b; font-size: 13px; margin: 5px 0 0; }.control-user-list article { align-items: center; border-bottom: 1px solid #e2e9eb; display: grid; gap: 11px; grid-template-columns: 36px minmax(0, 1fr) 130px 75px; padding: 12px 20px; }.control-user-avatar { align-items: center; background: #e3f2f0; border-radius: 50%; color: #087a70; display: inline-flex; font-size: 11px; font-weight: 800; height: 34px; justify-content: center; width: 34px; }.control-user-list strong,.control-user-list small { display: block; }.control-user-list strong { color: #29454e; font-size: 13px; }.control-user-list small { color: var(--text-muted); font-size: 12px; margin-top: 2px; }.control-role { color: #4a6570; font-size: 12px; }.control-user-state { background: #fff4e5; border-radius: 999px; color: #98600d; font-size: 11px; font-weight: 700; padding: 5px 7px; text-align: center; }.control-user-state.is-active { background: #e4f4ef; color: #087a70; }.control-invite-form { align-items: center; background: #f7fafb; display: grid; gap: 10px; grid-template-columns: 1.35fr 1.25fr .8fr auto; padding: 15px 20px; }.control-invite-form > strong { color: #26434d; font-size: 13px; grid-column: 1 / -1; }.control-invite-form > strong svg { color: var(--primary); margin-right: 6px; vertical-align: -3px; }.control-invite-form > p { grid-column: 1 / -1; }.control-access-guide { align-items: start; display: grid; gap: 13px; grid-template-columns: 1.25fr repeat(4, minmax(0, .75fr)); padding: 18px; }.control-access-guide article { border-left: 1px solid #dfe8eb; padding-left: 13px; }.control-access-guide article b,.control-access-guide article span,.control-access-guide article small { display: block; }.control-access-guide article b { color: #25414a; font-size: 13px; }.control-access-guide article span { color: #60747b; font-size: 12px; line-height: 1.4; margin-top: 5px; }.control-access-guide article small { color: #087a70; font-size: 11px; font-weight: 700; margin-top: 8px; }

.people-action-rail a:has(.evaluation-pending-badge){position:relative}.evaluation-pending-badge{position:absolute;right:1px;top:1px;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;background:var(--warning-surface);color:var(--warning);border:1px solid var(--border);font-size:10px;font-weight:500;padding:0 3px}.evaluation-pending-badge[hidden]{display:none}
.evaluations-tabs .evaluation-pending-badge{position:static;margin-left:5px}

/* Certificate preview preserves the physical A4 page instead of stretching its text. */
.document-paper.is-certificate-template{max-width:100%;padding:20px;background:var(--surface-subtle);overflow-x:auto;box-sizing:border-box}
.document-paper.is-certificate-template iframe{width:794px;min-width:794px;height:1123px;margin:0 auto;background:#fff;box-shadow:0 2px 12px rgb(0 0 0 / 10%)}
@media(max-width:640px){.document-paper.is-certificate-template{padding:12px}.document-paper.is-certificate-template iframe{margin:0}}