* {
  box-sizing: border-box;
}

html {
  /* Escala tipográfica global: 81.25% = 13px de base (antes 16px implícito).
     Reduce ~19% toda la tipografía rem del dashboard (más datos por
     pantalla). La escala pequeña (metadatos) se fija en px absolutos más
     abajo para respetar el piso de accesibilidad de 12px (WCAG). */
  font-size: 81.25%;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  color: var(--ink);
  background: var(--body-bg);
  font-family: "Manrope", sans-serif;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
.window-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  z-index: 10000;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: 0.5rem 1rem;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
  transform: translateY(-120%);
  transition: transform 0.18s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

.login-view {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow: hidden;
  background: #0b1437;
}

.login-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.login-bg-img {
  position: absolute;
  inset: -8%;
  background: url("assets/hero-asap.jpg") center / cover no-repeat;
  animation: kenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}

.login-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, rgba(7, 12, 40, 0.92) 0%, rgba(7, 12, 40, 0.62) 42%, rgba(11, 20, 64, 0.85) 100%);
}

.login-bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
}

@keyframes kenBurns {
  0% { transform: scale(1.08) translate(1.5%, -1%); }
  100% { transform: scale(1.22) translate(-2%, 2%); }
}

.login-shell {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 2rem));
  display: grid;
  gap: 1.25rem;
}

.login-card {
  padding: 2.5rem 2rem 1.75rem;
  display: grid;
  align-content: start;
  gap: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(13, 20, 45, 0.82);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
  animation: fadeUp 0.8s 0.1s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-card-head {
  display: grid;
  justify-items: center;
  padding-bottom: 0.5rem;
}

.login-logo {
  width: 130px;
  height: auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.login-form {
  display: grid;
  gap: 0.7rem;
}

.login-card input[type="text"],
.login-card input[type="password"] {
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 0 0.9rem;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 0.92rem;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.login-card input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.22);
}

.slider-captcha {
  position: relative;
  height: 48px;
}

.slider-captcha .captcha-challenge { display: none; }

.slider-track {
  position: relative;
  height: 100%;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.slider-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  user-select: none;
  pointer-events: none;
  transition: opacity 0.2s;
}

.slider-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.4), rgba(32, 199, 232, 0.5));
  transition: width 0.05s linear;
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px 6px 6px 10px;
  background: linear-gradient(180deg, #1f7a8c, #0c5e72);
  color: #fff;
  cursor: grab;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.2s;
}

.slider-handle:hover { background: linear-gradient(180deg, #2496ad, #0e6e85); }
.slider-handle:active { cursor: grabbing; }

.slider-captcha[data-state="completed"] .slider-handle {
  background: linear-gradient(180deg, var(--status-ok), #145e47);
  border-radius: 10px;
}

.slider-captcha[data-state="completed"] .slider-hint { opacity: 0; }

.slider-captcha[data-state="completed"] .slider-track {
  background: rgba(31, 122, 86, 0.18);
  border-color: rgba(31, 122, 86, 0.4);
}

.slider-success {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  gap: 0.4rem;
  color: #4ade80;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.slider-success.show { display: grid; }

.slider-captcha .captcha-refresh {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  z-index: 3;
  transition: color 0.15s, background 0.15s;
}

.slider-captcha .captcha-refresh:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.slider-captcha[data-state="completed"] .captcha-refresh { display: none; }

.login-submit {
  min-height: 48px;
  margin-top: 0.3rem;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.2s;
  box-shadow: 0 8px 22px rgba(45, 212, 191, 0.28);
}

.login-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(45, 212, 191, 0.40);
}

.login-help {
  justify-self: center;
  margin-top: 0.1rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.login-help:hover {
  color: var(--accent-bright);
  text-decoration: underline;
}

.login-card small {
  display: block;
  min-height: 1.2rem;
  margin-top: 0.1rem;
  color: var(--status-critical);
  font-size: 12.8px;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .login-bg-img { animation: none; transform: scale(1.12); }
  .login-brand, .login-card { animation: none; }
}

.window-side button {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
}

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  overflow: hidden;
}

.workspace-sidebar {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.72rem;
  padding: 1rem 0.85rem;
  border-right: 1px solid var(--line-strong);
  background: var(--surface-alt);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
  padding: 0.35rem 0.25rem 0.8rem;
  border-bottom: 1px solid var(--line);
}

.brand img {
  width: 72px;
  height: auto;
  flex: 0 0 auto;
}

.brand strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: 0.9rem;
  line-height: 1.2;
}

.side-nav {
  display: grid;
  align-content: start;
  gap: 0.25rem;
}

.side-section-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
  margin: 0.15rem 0 0;
  padding: 0.2rem 0.32rem 0.35rem;
  color: var(--future-ink, var(--navy));
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.side-section-title::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--red), var(--accent) 72%);
  box-shadow: 0 0 0 5px rgba(17, 25, 79, 0.10), 0 0 18px rgba(17, 25, 79, 0.22);
}

.side-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  min-width: 0;
  background: linear-gradient(90deg, rgba(37, 99, 170, 0.42), transparent);
}

.side-nav button,
.side-nav a,
.sidebar-logout {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  min-height: 40px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 0.75rem;
  background: transparent;
  color: var(--ink-muted);
  text-align: left;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.side-nav button:hover,
.side-nav a:hover,
.sidebar-logout:hover {
  transform: translateX(2px);
  background: var(--body-bg);
}

.side-nav button.active {
  border-color: var(--line-strong);
  background: var(--head);
  color: var(--navy);
  box-shadow: inset 3px 0 0 var(--red);
}

.sidebar-logout {
  color: var(--red-strong);
}

.workspace-main {
  min-width: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: 72px auto minmax(0, 1fr) 38px;
  gap: 0.75rem;
  padding: 0.75rem;
  overflow: hidden;
}

.app-topbar,
.board-summary,
.board-tools,
.kanban-column,
.status-bar,
.window-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.app-topbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(560px, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.8rem;
}

.app-topbar h1 {
  margin: 0.2rem 0 0;
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.05;
}

.top-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(190px, 230px);
  align-items: center;
  gap: 0.55rem;
}

.un-picker,
.period-picker {
  min-width: 0;
  height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 0.55rem;
  background: var(--surface);
}

.un-picker span,
.period-picker span {
  color: var(--red-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.un-picker select,
.period-picker select {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--navy);
  font-weight: 900;
}

.history-rail {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.history-rail button {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 900;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.history-rail button:hover,
.trend-bar:hover,
.issue-card:hover,
.issue-more:hover {
  transform: translateY(-1px);
}

.history-rail button.active {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.issue-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: 74px 104px minmax(0, 1fr);
  gap: 0.75rem;
  overflow: hidden;
}

.human-shell {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  overflow: hidden;
}

.human-intro,
.un-directory,
.un-brief {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.human-intro {
  padding: 0.9rem 1rem;
}

.human-intro span,
.un-brief header span {
  color: var(--red-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.human-intro h2,
.un-brief h3 {
  margin: 0.2rem 0 0.35rem;
  color: var(--navy);
  font-family: "Sora", sans-serif;
  line-height: 1.05;
}

.human-intro h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.4rem);
}

.human-intro p,
.un-brief p {
  margin: 0;
  color: var(--ink-muted);
  font-weight: 800;
  line-height: 1.4;
}

.human-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 0.75rem;
  overflow: hidden;
}

.un-directory {
  min-height: 0;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  overflow: hidden;
}

.un-directory header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.8rem;
  border-bottom: 1px solid var(--line);
}

.un-directory header strong {
  color: var(--navy);
  font-weight: 900;
}

.un-directory header span {
  min-width: 28px;
  min-height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--soft);
  color: var(--navy);
  font-weight: 900;
}

.un-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 0.65rem;
  overflow: hidden;
}

.un-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0.18rem 0.55rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem;
  background: var(--surface);
  text-align: left;
}

.un-row strong {
  grid-row: 1 / 3;
  color: var(--navy);
  font-family: "Sora", sans-serif;
}

.un-row span {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.un-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.un-row.active {
  border-color: var(--navy);
  box-shadow: inset 4px 0 0 var(--red);
}

.un-brief {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(76px, 0.7fr);
  gap: 0.8rem;
  padding: 1rem;
  overflow: hidden;
}

.un-brief h3 {
  font-size: clamp(1.7rem, 3.2vw, 3rem);
}

.human-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.human-metrics span {
  min-height: 70px;
  display: grid;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem;
  background: var(--surface-alt);
}

.human-metrics strong {
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: 1.35rem;
}

.human-metrics small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.focus-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.focus-facts span {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem;
  background: var(--surface);
}

.focus-facts small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.focus-facts strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.human-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.human-next button {
  min-height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--navy);
  font-weight: 900;
}

.module-panel {
  display: none;
}

.module-panel.active {
  display: grid;
}

.source-module {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  overflow: hidden;
}

#moduleRrhh.source-module {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.source-module > header {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: var(--surface);
}

.source-module > header span {
  color: var(--red-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.source-module h2 {
  margin: 0.2rem 0 0.45rem;
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1;
}

.source-module p {
  max-width: 980px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.45;
}

.source-table {
  min-height: 0;
  display: grid;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.source-table div {
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.05rem;
  border-bottom: 1px solid var(--line);
}

.source-table div:last-child {
  border-bottom: 0;
}

.source-table strong {
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 900;
}

.source-table span {
  color: var(--ink-muted);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.35;
}

.rrhh-map div {
  min-height: 62px;
}

.rrhh-hero {
  min-height: 118px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: var(--surface);
}

.rrhh-hero span,
.rrhh-panel header span {
  color: var(--red-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rrhh-hero h2 {
  margin: 0.18rem 0 0.35rem;
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.8rem, 3vw, 3.4rem);
  line-height: 1;
}

.rrhh-hero p {
  margin: 0;
  color: var(--ink-muted);
  font-weight: 850;
  line-height: 1.4;
}

.rrhh-hero > strong {
  min-width: 132px;
  min-height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--soft);
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: 1rem;
}

.rrhh-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.rrhh-kpis article {
  min-height: 112px;
  display: grid;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem;
  background: var(--surface);
}

.rrhh-kpis article:nth-child(1) {
  background: linear-gradient(180deg, rgba(37, 99, 170, 0.10), var(--surface));
  box-shadow: inset 0 4px 0 var(--accent-blue);
}

.rrhh-kpis article:nth-child(2) {
  background: linear-gradient(180deg, rgba(30, 42, 110, 0.06), var(--surface));
  box-shadow: inset 0 4px 0 var(--accent-teal);
}

.rrhh-kpis article:nth-child(3) {
  background: linear-gradient(180deg, rgba(169, 101, 0, 0.10), var(--surface));
  box-shadow: inset 0 4px 0 var(--status-warn);
}

.rrhh-kpis article:nth-child(4) {
  background: linear-gradient(180deg, rgba(31, 122, 86, 0.10), var(--surface));
  box-shadow: inset 0 4px 0 var(--status-ok);
}

.rrhh-kpis span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rrhh-kpis strong {
  margin-top: 0.25rem;
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.45rem, 2.6vw, 2.35rem);
}

.rrhh-kpis small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-weight: 850;
}

.rrhh-exec-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(480px, 1.18fr);
  gap: 0.75rem;
  overflow: hidden;
}

.rrhh-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem;
  background: var(--surface);
  overflow: hidden;
}

.rrhh-focus {
  grid-template-rows: auto auto 1fr;
}

.rrhh-panel header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.rrhh-panel header strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rrhh-focus p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 1.05rem;
  font-weight: 850;
  line-height: 1.45;
}

.rrhh-bars {
  display: grid;
  align-content: end;
  gap: 0.75rem;
}

.rrhh-bars div {
  display: grid;
  gap: 0.35rem;
}

.rrhh-bars span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.rrhh-bars span[role="meter"] {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.rrhh-bars span[role="meter"] > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red) var(--w), transparent var(--w));
}

.rrhh-bars i {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red) var(--w), var(--line) var(--w));
}

.rrhh-ranking {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.45rem;
  overflow: hidden;
}

.detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.5rem;
  overflow: auto;
}

.rrhh-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0.18rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.72rem 0.78rem;
  background: var(--surface);
  text-align: left;
  box-shadow: 0 10px 24px rgba(15, 36, 68, 0.06);
}

.rrhh-row strong {
  grid-row: auto;
  color: var(--muted);
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rrhh-row span {
  color: var(--ink-strong);
  font-family: "Sora", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.22;
  white-space: normal;
}

.rrhh-row em,
.rrhh-row small {
  color: var(--muted);
  font-style: normal;
  font-weight: 850;
}

.rrhh-row small {
  justify-self: end;
}

.rrhh-row.missing {
  box-shadow: inset 4px 0 0 var(--line-strong), 0 10px 24px rgba(15, 36, 68, 0.04);
}

.rrhh-row.mapped {
  box-shadow: inset 4px 0 0 var(--status-ok), 0 10px 24px rgba(15, 36, 68, 0.06);
}

.board-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
}

.board-summary p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
  font-weight: 800;
}

.summary-metrics {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.summary-metrics span {
  display: grid;
  min-width: 88px;
  min-height: 46px;
  align-content: center;
  border-left: 1px solid var(--line);
  padding-left: 0.75rem;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.summary-metrics strong {
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: 1.05rem;
}

.board-tools {
  min-height: 0;
  padding: 0.65rem 0.75rem;
}

.trend-line {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: end;
}

.trend-bar {
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  transition: transform 0.16s ease;
}

.trend-bar i {
  display: block;
  width: 100%;
  height: var(--h);
  min-height: 9px;
  border-radius: 4px 4px 2px 2px;
  background: var(--line-strong);
  transition: background 0.16s ease;
}

.trend-bar.active i {
  background: var(--red);
}

.trend-bar.active span {
  color: var(--navy);
}

.kanban-board {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  overflow: hidden;
}

.kanban-column {
  min-height: 0;
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface-alt);
}

.kanban-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--line);
}

.kanban-column > header span {
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kanban-column > header strong {
  min-width: 30px;
  min-height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--soft);
  color: var(--navy);
  font-size: 12px;
}

.issue-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 0.65rem;
  overflow: hidden;
}

.issue-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(34px, auto) minmax(24px, auto);
  gap: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.62rem;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  overflow: hidden;
}

.issue-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 10px 28px rgba(17, 25, 79, 0.08);
}

.issue-card.critical {
  border-left: 4px solid var(--red);
}

.issue-card.watch {
  border-left: 4px solid var(--amber);
}

.issue-card.onTrack {
  border-left: 4px solid var(--green);
}

.issue-topline,
.issue-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.issue-topline strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
}

.issue-topline em {
  border-radius: 999px;
  padding: 0.16rem 0.42rem;
  background: var(--soft);
  color: var(--ink-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.issue-title {
  display: -webkit-box;
  min-height: 2.1em;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.issue-client {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.issue-grid span {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.3rem;
  background: var(--surface);
}

.issue-grid b {
  display: block;
  overflow: hidden;
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-grid small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.issue-footer span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-footer mark {
  max-width: 48%;
  overflow: hidden;
  border-radius: 999px;
  padding: 0.13rem 0.34rem;
  background: var(--status-critical-soft);
  color: var(--red-strong);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-more {
  min-height: 34px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 900;
  transition: transform 0.16s ease, background 0.16s ease;
}

.issue-more:hover {
  background: var(--surface);
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0 0.75rem;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.module-window {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: 1rem;
}

.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 24;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.welcome-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(37, 99, 170, 0.16), transparent 28%),
    rgba(8, 16, 46, 0.42);
  backdrop-filter: blur(8px);
}

.welcome-card {
  position: relative;
  width: min(720px, calc(100vw - 2rem));
  display: grid;
  gap: 0.9rem;
  padding: 1.25rem;
  border: 1px solid rgba(37, 99, 170, 0.18);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,249,255,0.96));
  box-shadow: 0 26px 80px rgba(8, 16, 46, 0.18);
  animation: welcomeIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.welcome-kicker {
  color: var(--accent-teal);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.welcome-card h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.02;
}

.welcome-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 1rem;
  font-weight: 750;
}

.welcome-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.welcome-actions button,
.welcome-dismiss {
  min-height: 54px;
  border-radius: 16px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.welcome-actions button {
  border: 1px solid rgba(37, 99, 170, 0.16);
  background: linear-gradient(135deg, rgba(37, 99, 170, 0.1), rgba(242, 183, 5, 0.14));
  color: var(--future-ink, var(--navy));
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.welcome-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 170, 0.34);
  box-shadow: 0 16px 34px rgba(17, 32, 51, 0.08);
}

.welcome-dismiss {
  border: 0;
  background: transparent;
  color: var(--muted);
}

.welcome-opt-out {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.welcome-opt-out input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

@keyframes welcomeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.module-window[aria-hidden="false"] {
  display: grid;
}

.module-window[aria-hidden="false"] .window-card {
  animation: windowIn 0.18s ease-out;
}

@keyframes windowIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.window-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 46, 0.42);
}

.window-card {
  position: relative;
  width: min(820px, calc(100vw - 2rem));
  height: min(520px, calc(100vh - 2rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.window-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-alt);
}

.window-card h3 {
  margin: 0.25rem 0 0;
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: 1.25rem;
}

.window-card header button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--navy);
  font-size: 1.45rem;
  line-height: 1;
}

.window-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 1rem;
  padding: 1rem;
}

.window-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 0.7rem;
}

.window-main strong {
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.92;
}

.window-main p {
  max-width: 560px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.bar-list {
  display: grid;
  gap: 0.5rem;
}

.bar-list div {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 0.6rem;
}

.bar-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.bar-list i {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red) var(--w), var(--line) var(--w));
}

.window-side {
  display: grid;
  align-content: space-between;
  gap: 1rem;
}

#windowFacts {
  display: grid;
  gap: 0.5rem;
}

#windowFacts span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.65rem;
  color: var(--navy);
  background: var(--soft);
  font-weight: 900;
}

body.window-open .app-shell {
  filter: saturate(0.92);
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 214px minmax(0, 1fr);
  }

  .workspace-main {
    grid-template-rows: 104px auto minmax(0, 1fr) 38px;
  }

  .app-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .issue-shell {
    grid-template-rows: 92px 86px minmax(0, 1fr);
  }

  .board-summary {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .summary-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .summary-metrics span {
    min-width: 0;
    min-height: 34px;
    padding-left: 0.5rem;
  }

  .issue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .issue-grid span {
    padding: 0.2rem;
  }

  .issue-grid b {
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .workspace-sidebar {
    padding-inline: 0.45rem;
  }

  .brand {
    justify-content: center;
  }

  .brand div,
  .side-section-title,
  .side-nav button,
  .side-nav a,
  .sidebar-logout {
    font-size: 0;
  }

  .brand img {
    width: 52px;
  }

  .side-nav button,
  .side-nav a,
  .sidebar-logout {
    min-height: 44px;
    padding: 0;
  }

  .side-nav button::first-letter,
  .side-nav a::first-letter,
  .sidebar-logout::first-letter {
    font-size: 0.9rem;
  }

  .kanban-board {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .kanban-column {
    grid-template-rows: 38px minmax(0, 1fr);
  }

  .issue-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
  }

  .issue-list .issue-card:nth-of-type(n+3),
  .issue-more {
    display: none;
  }

  .window-body {
    grid-template-columns: 1fr;
  }

  .window-side {
    border-top: 1px solid var(--line);
    padding-top: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.app-shell {
  position: relative;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0 264px, transparent 264px),
    linear-gradient(90deg, transparent 0 calc(100% - 154px), rgba(242, 183, 5, 0.72) calc(100% - 154px)),
    linear-gradient(0deg, rgba(245, 247, 248, 0.88), rgba(245, 247, 248, 0.88)),
    url("assets/hero-asap.jpg") center / cover no-repeat;
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 30px 30px 42px 30px;
  border: 3px solid var(--ink-strong);
  pointer-events: none;
  z-index: 0;
}

.app-shell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 154px;
  bottom: 0;
  width: 2px;
  background: var(--ink-strong);
  pointer-events: none;
  z-index: 0;
}

.workspace-sidebar,
.workspace-main {
  position: relative;
  z-index: 1;
}

.workspace-sidebar {
  border-right: 2px solid var(--ink-strong);
  background: rgba(248, 249, 247, 0.96);
}

.brand {
  border-bottom-color: rgba(7, 25, 35, 0.22);
}

.brand strong,
.app-topbar h1,
.human-intro h2,
.un-brief h3,
.source-module h2,
.rrhh-hero h2,
.human-metrics strong,
.rrhh-kpis strong,
.kpi-tile strong {
  color: var(--ink-strong);
  font-family: "Sora", "Manrope", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.side-nav button,
.side-nav a,
.sidebar-logout,
.history-rail button,
.human-next button {
  border-radius: 2px;
}

.side-nav button.active {
  border-color: var(--ink-strong);
  background: var(--kpi-yellow);
  color: var(--ink-strong);
  box-shadow: inset 5px 0 0 var(--ink-strong);
}

.app-topbar,
.human-intro,
.un-directory,
.un-brief,
.source-module > header,
.source-table,
.rrhh-hero,
.rrhh-kpis article,
.rrhh-panel,
.status-bar,
.window-card {
  border: 2px solid var(--ink-strong);
  border-radius: 2px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(7, 25, 35, 0.10);
}

.workspace-main {
  /* 4 filas: topbar · tira Insights IA (alto automático) · módulo · footer.
     Sin la fila `auto` la tira absorbe el 1fr y aplasta el módulo bajo el fold. */
  grid-template-rows: 78px auto minmax(0, 1fr) 38px;
  padding: 1rem 1.95rem 0.75rem 1rem;
}

.app-topbar {
  background:
    linear-gradient(90deg, rgba(7, 25, 35, 0.86), rgba(7, 25, 35, 0.58)),
    url("assets/hero-asap.jpg") center 44% / cover no-repeat;
  color: #fff;
}

.app-topbar h1,
.app-topbar #sourceBadge {
  color: #fff;
}

#sourceBadge,
.human-intro span,
.un-brief header span,
.source-module > header span,
.rrhh-hero span,
.rrhh-panel header span,
.login-card p,
.brand span,
.window-card header span {
  color: var(--kpi-yellow);
}

.un-picker,
.history-rail button {
  border: 2px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.88);
}

.history-rail button.active {
  border-color: var(--kpi-yellow);
  background: var(--kpi-yellow);
  color: var(--ink-strong);
}

.human-intro {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 25, 35, 0.72), rgba(7, 25, 35, 0.26)),
    url("assets/hero-asap.jpg") center / cover no-repeat;
  color: #fff;
}

.human-intro::after,
.source-module > header::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 128px;
  background: var(--kpi-yellow);
  opacity: 0.92;
  pointer-events: none;
}

.human-intro h2,
.human-intro p {
  position: relative;
  z-index: 1;
  color: #fff;
}

.human-workspace {
  grid-template-columns: 330px minmax(0, 1fr);
}

.un-row,
.human-metrics span,
.focus-facts span,
.rrhh-row,
.kpi-tile {
  border: 2px solid var(--ink-strong);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 0 rgba(7, 25, 35, 0.03);
}

.un-row {
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.un-row:hover,
.kpi-tile:hover,
.human-next button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 28px rgba(7, 25, 35, 0.14);
}

.un-row.active {
  border-color: var(--ink-strong);
  background: linear-gradient(90deg, rgba(242, 183, 5, 0.2), rgba(255, 255, 255, 0.98));
  box-shadow: inset 7px 0 0 var(--kpi-yellow);
}

.human-metrics span {
  min-height: 92px;
  background:
    linear-gradient(180deg, rgba(242, 183, 5, 0.08), transparent 52%),
    rgba(255, 255, 255, 0.96);
}

.human-metrics strong {
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 0.95;
}

.human-metrics small,
.focus-facts small,
.kpi-tile span,
.rrhh-kpis span {
  color: var(--ink-muted);
}

.focus-facts {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.focus-facts span {
  min-height: 74px;
}

.focus-facts strong {
  color: var(--ink-strong);
}

.human-next button {
  border: 2px solid var(--ink-strong);
  background: var(--kpi-yellow);
  color: var(--ink-strong);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.trend-line {
  border-top: 2px solid rgba(7, 25, 35, 0.12);
  padding-top: 0.65rem;
}

.trend-bar i {
  border-radius: 2px 2px 0 0;
  background: rgba(7, 25, 35, 0.24);
}

.trend-bar.active i {
  background: var(--kpi-yellow);
  box-shadow: 0 0 0 2px var(--ink-strong) inset;
}

.source-module > header {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  background:
    linear-gradient(90deg, rgba(7, 25, 35, 0.78), rgba(7, 25, 35, 0.46)),
    url("assets/hero-asap.jpg") center / cover no-repeat;
}

.source-module > header h2,
.source-module > header p,
.source-module > header span {
  position: relative;
  z-index: 1;
}

.source-module > header h2,
.source-module > header p {
  color: #fff;
}

.kpi-cost-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(156px, 1fr);
  gap: 0.75rem;
  overflow: hidden;
}

.kpi-tile {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.35rem;
  padding: 1rem;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.kpi-tile::before {
  content: "";
  width: 54px;
  height: 54px;
  border: 3px solid var(--ink-strong);
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
  background:
    linear-gradient(135deg, transparent 44%, var(--ink-strong) 45% 55%, transparent 56%),
    linear-gradient(45deg, transparent 44%, var(--kpi-yellow) 45% 55%, transparent 56%);
}

.kpi-tile span {
  color: var(--kpi-yellow);
  font-size: 1.12rem;
  font-weight: 900;
  text-transform: uppercase;
}

.kpi-tile strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-strong);
  font-size: clamp(1.45rem, 2.55vw, 2.35rem);
  line-height: 0.95;
  text-overflow: ellipsis;
  white-space: normal;
}

.kpi-tile small {
  max-width: 100%;
  min-height: 2.5em;
  color: var(--ink-strong);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.25;
}

.kpi-tile.accent {
  background: linear-gradient(180deg, rgba(242, 183, 5, 0.18), rgba(255, 255, 255, 0.98));
}

.kpi-tile.info {
  background: linear-gradient(180deg, rgba(37, 99, 170, 0.12), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 4px 0 var(--accent-blue);
}

.kpi-tile.people {
  background: linear-gradient(180deg, rgba(30, 42, 110, 0.07), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 4px 0 var(--accent-teal);
}

.kpi-tile.finance {
  background: linear-gradient(180deg, rgba(31, 122, 86, 0.12), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 4px 0 var(--status-ok);
}

.kpi-tile.warn small,
.kpi-tile.warn strong {
  color: var(--red-strong);
}

.kpi-tile.warn[data-health="ok"] strong,
.kpi-tile.warn[data-health="ok"] small {
  color: var(--status-ok);
}

.kpi-tile.warn[data-health="warn"] strong,
.kpi-tile.warn[data-health="warn"] small {
  color: var(--status-warn);
}

.kpi-tile.warn[data-health="critical"] strong,
.kpi-tile.warn[data-health="critical"] small {
  color: var(--status-critical);
}

.rrhh-bars span[role="meter"] > i {
  border-radius: 2px;
  background: linear-gradient(90deg, var(--kpi-yellow) var(--w), var(--line) var(--w));
}

.rrhh-bars i {
  border-radius: 2px;
  background: linear-gradient(90deg, var(--kpi-yellow) var(--w), var(--line) var(--w));
}

.rrhh-bars [data-level="ok"] > i,
.rrhh-bars span[data-level="ok"] > i {
  background: linear-gradient(90deg, var(--status-ok) var(--w), var(--line) var(--w));
}

.rrhh-bars [data-level="warn"] > i,
.rrhh-bars span[data-level="warn"] > i {
  background: linear-gradient(90deg, var(--status-warn) var(--w), var(--line) var(--w));
}

.rrhh-bars [data-level="critical"] > i,
.rrhh-bars span[data-level="critical"] > i {
  background: linear-gradient(90deg, var(--status-critical) var(--w), var(--line) var(--w));
}

.rrhh-row.missing {
  box-shadow: inset 7px 0 0 var(--red);
}

.rrhh-row.mapped {
  box-shadow: inset 7px 0 0 var(--green);
}

.status-bar {
  color: #fff;
  background: rgba(7, 25, 35, 0.86);
}

.module-panel.active {
  animation: kpiPanelIn 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes kpiPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1200px) {
  .focus-facts,
  .kpi-cost-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .human-workspace {
    grid-template-columns: 290px minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .workspace-main {
    padding-right: 1rem;
  }

  .app-shell::after {
    right: 92px;
  }

  .human-workspace,
  .rrhh-exec-grid {
    grid-template-columns: 1fr;
  }

  .un-directory {
    display: none;
  }

  .focus-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Audit remediation: responsive hardening, contrast and touch targets */
.login-title {
  margin: 0.35rem 0 1.4rem;
  color: var(--navy);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 0.92;
  text-transform: uppercase;
}

.app-topbar,
.human-intro,
.source-module > header {
  isolation: isolate;
}

.app-topbar::before,
.human-intro::before,
.source-module > header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 25, 35, 0.92), rgba(7, 25, 35, 0.68));
  pointer-events: none;
  z-index: 0;
}

.app-topbar > *,
.human-intro > *,
.source-module > header > * {
  position: relative;
  z-index: 1;
}

.app-topbar #sourceBadge,
.human-intro span,
.source-module > header span,
.rrhh-hero span,
.rrhh-panel header span,
.brand span,
.login-card p {
  color: var(--accent-dark);
}

.app-topbar #sourceBadge,
.human-intro span,
.source-module > header span {
  color: var(--accent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.side-nav button,
.side-nav a,
.sidebar-logout,
.history-rail button,
.human-next button,
.trend-bar,
.issue-more {
  min-height: 44px;
}

.un-picker {
  min-height: 48px;
  height: auto;
}

.un-picker select,
.period-picker select {
  min-height: 44px;
  font-size: 0.95rem;
  line-height: 1.2;
}

.history-rail {
  grid-template-columns: repeat(7, minmax(74px, 1fr));
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.history-rail button {
  min-width: 74px;
  min-height: 44px;
  padding-inline: 0.35rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.trend-line {
  grid-template-columns: repeat(7, minmax(64px, 1fr));
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.trend-bar {
  min-width: 64px;
  min-height: 52px;
}

.trend-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.human-metrics span,
.focus-facts span,
.kpi-tile,
.rrhh-row {
  min-width: 0;
}

.human-metrics strong,
.focus-facts strong,
.kpi-tile strong,
.rrhh-row span,
.rrhh-row em,
.rrhh-row small {
  overflow-wrap: anywhere;
}

.focus-facts strong,
.rrhh-row span {
  white-space: normal;
}

.rrhh-bars i {
  min-height: 16px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .workspace-sidebar {
    padding-inline: 0.5rem;
  }

  .workspace-main {
    height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0.75rem;
    overflow: hidden;
  }

  .app-topbar {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    min-height: 150px;
    padding: 0.8rem;
  }

  .top-actions {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .source-module,
  .human-shell {
    overflow: auto;
    padding-right: 0.1rem;
  }

  .human-workspace,
  .rrhh-exec-grid {
    grid-template-columns: 1fr;
  }

  .un-directory {
    display: block;
    max-height: 5rem;
    overflow-y: auto;
    border-inline: 0;
    border-radius: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
  }
  .un-directory header {
    display: none;
  }
  .un-list {
    display: flex;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
  }
  .un-list .un-row {
    flex: 0 0 auto;
    width: auto;
    min-width: 8rem;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 12px;
  }
  .un-list .un-row strong {
    font-size: 12.5px;
  }
  .un-list .un-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 7rem;
  }

  .human-metrics,
  .rrhh-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .focus-facts,
  .kpi-cost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrhh-row {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .rrhh-row em,
  .rrhh-row small {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .app-shell {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .app-shell::before,
  .app-shell::after {
    display: none;
  }

  .workspace-sidebar {
    border-right-width: 1px;
    overflow: hidden;
  }

  .workspace-main {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .app-topbar {
    min-height: 168px;
  }

  .app-topbar h1 {
    font-size: clamp(1.45rem, 8vw, 2.05rem);
  }

  .side-nav button,
  .side-nav a,
  .sidebar-logout {
    min-height: 48px;
  }

  .side-section-title {
    justify-content: center;
    padding-inline: 0;
  }

  .side-section-title::after {
    display: none;
  }

  .brand img {
    width: 46px;
  }

  .brand div {
    display: none;
  }

  .history-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
  }

  .history-rail button {
    min-width: 0;
    font-size: 12px;
  }

  .trend-line {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
  }

  .trend-bar {
    min-width: 0;
  }

  .trend-bar span {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.05;
  }

  .human-intro,
  .source-module > header,
  .rrhh-hero {
    min-height: auto;
    padding: 0.8rem;
  }

  .human-intro h2,
  .source-module h2,
  .rrhh-hero h2 {
    font-size: clamp(1.55rem, 9vw, 2.15rem);
  }

  .human-metrics,
  .focus-facts,
  .rrhh-kpis,
  .kpi-cost-grid {
    grid-template-columns: 1fr;
  }

  .human-metrics span,
  .focus-facts span,
  .rrhh-kpis article,
  .kpi-tile {
    min-height: 72px;
  }

  .human-next {
    grid-template-columns: 1fr;
  }

  .rrhh-row {
    min-height: 76px;
    grid-template-columns: 1fr;
  }

  .rrhh-row em,
  .rrhh-row small {
    grid-column: auto;
  }

  .status-bar {
    min-height: 44px;
    overflow: hidden;
  }
}

/* Informe Gerencial board inspired by the source PowerBI layout */
#moduleControl {
  grid-template-rows: minmax(0, 1fr);
}

#moduleControl .human-intro,
#moduleControl .human-workspace {
  display: none;
}

.gerencial-board {
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 2fr);
  grid-template-rows: 78px minmax(0, 1fr);
  gap: 0.45rem 0.7rem;
  overflow: hidden;
  color: #2f3135;
  --ease-control: cubic-bezier(0.22, 1, 0.36, 1);
}

.gerencial-board > :not(.neural-web) {
  position: relative;
  z-index: 1;
}

.neural-web {
  display: none;
}

.neural-link {
  fill: none;
  stroke: rgba(37, 99, 170, 0.28);
  stroke-width: 1.4;
  stroke-dasharray: 10 18;
  stroke-linecap: round;
}

.neural-link.l2,
.neural-link.l4 {
  stroke: rgba(242, 183, 5, 0.24);
  animation-duration: 9s;
  animation-direction: reverse;
}

.neural-node {
  transform-box: fill-box;
  transform-origin: center;
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 9px rgba(37, 99, 170, 0.36));
}

.neural-node.n2,
.neural-node.n4,
.neural-node.n6 {
  stroke: var(--accent);
  animation-delay: 0.55s;
}

.gerencial-title {
  grid-column: 1 / -1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  border: 2px solid var(--ink-strong);
  padding: 0.65rem 1.2rem;
  background: var(--line-strong);
  overflow: hidden;
}

.gerencial-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.38) 48%, transparent 56%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 34px);
  transform: translateX(-110%);
  pointer-events: none;
}

.gerencial-title::after {
  content: attr(data-scope);
  /* en flujo como chip más del encabezado: antes era absolute (right/bottom)
     y se montaba sobre la fila de chips, cortándose contra el borde */
  position: static;
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid rgba(7, 25, 35, 0.42);
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}

.gerencial-title img {
  position: relative;
  z-index: 1;
  width: 138px;
  height: auto;
}

.gerencial-title > div {
  position: relative;
  z-index: 1;
}

.ops-signal {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* los chips envuelven en vez de salirse del encabezado */
  row-gap: 0.35rem;
  gap: 0.4rem;
  min-width: 0;
  /* sin padding-right muerto: la reserva de 5.4rem era para .asap-service-reel,
     elemento que ya no existe en el DOM y dejaba chips cortados a la derecha */
}

.ops-signal span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(37, 99, 170, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(17, 25, 79, 0.10);
}

.gerencial-title strong {
  display: block;
  color: #fff;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.gerencial-title span {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-strong);
  font-size: 0.9rem;
  font-weight: 800;
}

.gerencial-left,
.gerencial-main {
  min-height: 0;
  display: grid;
  gap: 0.35rem;
  overflow: hidden;
}

.gerencial-left {
  grid-column: 1;
  grid-row: 2;
  grid-template-rows: 106px 124px 124px minmax(78px, 1fr);
}

.executive-strip {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-height: 0;
  height: 98px;
  display: grid;
  grid-template-columns: 1.12fr 0.95fr 1.22fr 0.95fr;
  gap: 0.45rem;
  z-index: 2;
}

.executive-card {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: center;
  overflow: hidden;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  padding: 0.64rem 0.76rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 252, 0.94));
  box-shadow: 0 14px 34px rgba(17, 32, 51, 0.08);
}

.executive-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent-blue);
}

.executive-strip[data-risk="critical"] .risk-card::before {
  background: var(--status-critical);
}

.executive-strip[data-risk="watch"] .risk-card::before {
  background: var(--status-warn);
}

.executive-strip[data-risk="ok"] .risk-card::before {
  background: var(--accent-teal);
}

.executive-strip[data-risk="critical"] .risk-card strong {
  color: var(--status-critical);
}

.executive-strip[data-risk="watch"] .risk-card strong {
  color: var(--status-warn);
}

.executive-strip[data-risk="ok"] .risk-card strong {
  color: var(--status-ok);
}

.ops-signal[data-risk="critical"] #signalRisk {
  color: var(--status-critical);
}

.ops-signal[data-risk="watch"] #signalRisk {
  color: var(--status-warn);
}

.ops-signal[data-risk="ok"] #signalRisk {
  color: var(--status-ok);
}

.executive-card span,
.executive-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.executive-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-strong);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  font-weight: 800;
  line-height: 0.96;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.executive-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

.obra-strip {
  position: absolute;
  right: 7.2rem;
  top: -72px;
  width: min(248px, 28vw);
  height: 52px;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 0.28rem;
  pointer-events: none;
}

.obra-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 170, 0.24);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(7, 25, 35, 0.02), rgba(7, 25, 35, 0.68)),
    url("assets/hero-asap.jpg");
  background-size: cover;
  box-shadow: 0 10px 24px rgba(17, 32, 51, 0.14);
  isolation: isolate;
}

.obra-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(242, 183, 5, 0.24), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 22px);
  mix-blend-mode: screen;
  opacity: 0.62;
}

.obra-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent), var(--accent));
}

.obra-card-1 {
  background-position: left 38%;
}

.obra-card-2 {
  background-position: center 42%;
}

.obra-card-3 {
  background-position: right 46%;
}

.obra-card span {
  position: absolute;
  left: 0.42rem;
  right: 0.42rem;
  bottom: 0.36rem;
  z-index: 1;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.56);
}

.project-filter .bi-project-tiles button,
.bi-treemap button {
  outline: 0;
}

.project-filter .bi-project-tiles button:hover,
.bi-treemap button:hover {
  transform: translateY(-1px);
}

.project-filter .bi-project-tiles button:focus-visible,
.bi-treemap button:focus-visible {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 6px rgba(37, 99, 170, 0.42);
}

.gerencial-main {
  grid-column: 2;
  grid-row: 2;
  padding-top: 104px;
  grid-template-rows: 24px minmax(0, 1fr);
}

.gerencial-main > h3 {
  margin: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink-strong);
  background: var(--status-warn);
  color: #fff;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.bi-panel {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  align-content: start;
  border: 1.5px solid var(--ink-strong);
  background: var(--surface);
  overflow: hidden;
  transform-origin: center;
}

.bi-panel h3,
.bi-panel h4 {
  margin: 0;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gerencial-main .bi-panel h4 {
  background: var(--status-warn);
}

.bi-project-tiles {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.24rem;
  padding: 0.42rem 0.52rem;
  background: var(--line-strong);
}

.bi-project-tiles button {
  min-height: 44px;
  border: 2px solid var(--ink-muted);
  background: var(--soft);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 850;
  transition: transform 0.18s var(--ease-control), background 0.18s var(--ease-control), border-color 0.18s var(--ease-control), color 0.18s var(--ease-control);
}

.bi-project-tiles button.active {
  border-color: var(--ink-strong);
  background: var(--accent);
  color: var(--ink-strong);
  box-shadow: inset 0 -4px 0 var(--ink-strong);
}

.bi-project-tiles button:hover,
.bi-project-tiles button:focus-visible,
.bi-treemap button:hover,
.bi-treemap button:focus-visible {
  transform: translateY(-2px);
}

.bi-project-tiles button:active,
.bi-treemap button:active {
  transform: translateY(0) scale(0.98);
}

.bi-indicators {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 54px 116px 100px 142px;
  gap: 0.35rem;
  overflow: hidden;
}

.bi-stat {
  align-content: stretch;
  text-align: center;
}

.bi-stat strong,
.bi-wide strong,
.bi-mini strong {
  display: grid;
  min-height: 0;
  place-items: center;
  padding: 0.55rem;
  color: #2c2c2c;
  font-size: clamp(0.86rem, 1.35vw, 1.18rem);
  font-weight: 850;
  text-align: center;
}

.bi-bar-panel {
  grid-column: 4 / 7;
  grid-row: 1 / 3;
}

.bi-gauge-card {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  align-content: stretch;
}

.bi-hito {
  grid-column: 3 / 5;
  grid-row: 2;
}

.bi-saldo {
  grid-column: 5;
  grid-row: 2;
}

.bi-utilidad {
  grid-column: 6;
  grid-row: 2;
}

.bi-insumos {
  grid-column: 3 / 5;
  grid-row: 3;
}

.bi-liquidez {
  grid-column: 5 / 7;
  grid-row: 3;
}

.bi-donut-rol {
  grid-column: 1 / 3;
  grid-row: 4;
}

.bi-donut-sexo {
  grid-column: 3 / 5;
  grid-row: 4;
}

.bi-donut-adic {
  grid-column: 5 / 7;
  grid-row: 4;
}

.bi-wide {
  grid-column: span 2;
}

.bi-bars {
  display: grid;
  align-content: start;
  gap: 0.38rem;
  padding: 0.5rem 0.7rem;
}

.bi-bars div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  line-height: 18px;
}

.bi-bars span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.bi-bars i {
  height: 12px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--accent) var(--plan), transparent var(--plan)),
    linear-gradient(90deg, var(--navy) var(--real), var(--line) var(--real));
  transform-origin: left center;
}

.bi-bars b {
  color: var(--ink-strong);
  font-size: 12.5px;
  font-weight: 800;
  text-align: right;
}

.bi-donut-flex {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.35rem 0.6rem;
}

.bi-donut {
  width: 92px;
  flex: 0 0 auto;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(7, 25, 35, 0.08);
}

.bi-donut::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: var(--surface);
}

.bi-donut-panel .bi-legend {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.34rem;
  padding: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
}

.bi-donut-panel .bi-legend span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bi-legend i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--c);
}

.bi-legend b {
  font-weight: 800;
  color: var(--ink-strong);
}

.bi-treemap {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.14rem;
  padding: 0.28rem;
}

.bi-treemap button {
  flex: var(--grow) 1 78px;
  min-width: 74px;
  min-height: 44px;
  border: 0;
  padding: 0.22rem 0.3rem;
  background: var(--c);
  color: #fff;
  text-align: left;
  font-size: 12px;
  line-height: 0.98;
  transition: transform 0.18s var(--ease-control), filter 0.18s var(--ease-control);
}

.bi-treemap button:hover,
.bi-treemap button:focus-visible {
  filter: saturate(1.16) contrast(1.05);
}

.bi-treemap strong,
.bi-treemap span {
  display: block;
}

.bi-mini-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.16rem;
}

.bi-mini h3 {
  background: var(--navy);
}

.bi-mini {
  min-height: 0;
  align-content: stretch;
}

.bi-mini strong {
  min-height: 0;
  padding: 0.18rem;
  font-size: 12px;
  line-height: 1.08;
  overflow: hidden;
}

.gerencial-left .bi-panel h3 {
  min-height: 16px;
  font-size: 12px;
}

.gerencial-left .bi-donut {
  width: 84px;
}

.gerencial-left .bi-legend {
  font-size: 12px;
}

.bi-gauge,
.bi-semi {
  width: min(168px, 72%);
  aspect-ratio: 2 / 1;
  place-self: center;
  display: grid;
  place-items: end center;
  margin-top: 0.35rem;
  border-radius: 999px 999px 0 0;
  background: conic-gradient(from 270deg at 50% 100%, var(--accent) 0 var(--p), var(--line) var(--p) 50%, transparent 50% 100%);
  position: relative;
  transition: filter 0.24s var(--ease-control);
}

.bi-gauge::after,
.bi-semi::after {
  content: "";
  position: absolute;
  inset: 34% 18% 0;
  border-radius: 999px 999px 0 0;
  background: var(--surface);
}

.bi-gauge strong,
.bi-semi strong {
  position: relative;
  z-index: 1;
  padding-bottom: 0.25rem;
  color: var(--ink-muted);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 500;
}

.bi-scale {
  display: flex;
  justify-content: space-between;
  padding: 0 0.65rem 0.45rem;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
}

.board-enter .gerencial-title::before {
  animation: boardSweep 0.9s var(--ease-control) 0.08s both;
}

.board-enter .bi-panel {
  animation: panelRise 0.42s var(--ease-control) both;
  animation-delay: calc(var(--i, 0) * 42ms);
}

.board-enter .bi-bars i {
  animation: barGrow 0.68s var(--ease-control) both;
}

.board-enter .bi-donut {
  animation: donutSettle 0.56s var(--ease-control) both;
}

.board-enter .bi-gauge,
.board-enter .bi-semi {
  animation: gaugeGlow 0.72s var(--ease-control) both;
}

.board-enter .obra-card {
  animation: obraReveal 0.62s var(--ease-control) both;
}

.board-enter .obra-card:nth-child(2) {
  animation-delay: 90ms;
}

.board-enter .obra-card:nth-child(3) {
  animation-delay: 160ms;
}

.gerencial-board .bi-panel:nth-of-type(1) { --i: 1; }
.gerencial-board .bi-panel:nth-of-type(2) { --i: 2; }
.gerencial-board .bi-panel:nth-of-type(3) { --i: 3; }
.gerencial-board .bi-panel:nth-of-type(4) { --i: 4; }
.gerencial-board .bi-panel:nth-of-type(5) { --i: 5; }
.gerencial-board .bi-panel:nth-of-type(6) { --i: 6; }

@keyframes boardSweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}

@keyframes panelRise {
  from {
    opacity: 0;
    transform: translateY(9px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes barGrow {
  from { transform: scaleX(0.04); opacity: 0.2; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes donutSettle {
  from { opacity: 0; transform: rotate(-18deg) scale(0.94); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes gaugeGlow {
  0% { opacity: 0; transform: translateY(6px); filter: saturate(0.7); }
  80% { filter: saturate(1.2); }
  100% { opacity: 1; transform: translateY(0); filter: saturate(1); }
}

@keyframes neuralFlow {
  to { stroke-dashoffset: -160; }
}

@keyframes nodePulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.45); opacity: 0.58; }
}

@keyframes obraReveal {
  from { opacity: 0; transform: translateY(8px) scale(0.982); filter: saturate(0.65); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}

@media (max-width: 1180px) {
  .gerencial-board {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    overflow: auto;
  }

  .executive-strip {
    grid-column: 1 / -1;
    grid-row: 2;
    height: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gerencial-left {
    grid-column: 1;
    grid-row: 3;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gerencial-main {
    grid-column: 1;
    grid-row: 4;
    padding-top: 0;
  }

  .obra-strip {
    grid-column: 1 / -1;
    min-height: 92px;
  }

  .bi-mini-grid {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .gerencial-title {
    min-height: 92px;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.65rem;
  }

  .gerencial-title img {
    width: 96px;
  }

  .gerencial-title::after {
    position: static;
    align-self: end;
    margin-left: auto;
  }

  .ops-signal {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow: auto;
    padding-bottom: 0.05rem;
    padding-right: 0;
  }

  .ops-signal span {
    flex: 0 0 auto;
    min-height: 1.8rem;
  }

  .obra-strip {
    grid-template-columns: 1fr;
    min-height: 168px;
  }

  .executive-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .executive-card {
    min-height: 84px;
  }

  .executive-card strong,
  .executive-card small {
    white-space: normal;
  }

  .gerencial-left,
  .bi-indicators {
    grid-template-columns: 1fr;
  }

  .bi-indicators {
    grid-template-rows: none;
    grid-auto-rows: minmax(86px, auto);
    overflow: visible;
  }

  .bi-bar-panel,
  .bi-gauge-card,
  .bi-wide,
  .bi-hito,
  .bi-saldo,
  .bi-utilidad,
  .bi-insumos,
  .bi-liquidez,
  .bi-donut-rol,
  .bi-donut-sexo,
  .bi-donut-adic {
    grid-column: auto;
    grid-row: auto;
  }

  .bi-project-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bi-panel {
    min-height: 112px;
  }

  .bi-donut-panel {
    min-height: 148px;
  }
}

@media (min-width: 1181px) {
  .gerencial-board {
    max-width: 1440px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-enter .gerencial-title::before,
  .board-enter .bi-panel,
  .board-enter .bi-bars i,
  .board-enter .bi-donut,
  .board-enter .bi-gauge,
  .board-enter .bi-semi,
  .neural-link,
  .neural-node,
  .board-enter .obra-card {
    animation: none !important;
  }

  .bi-project-tiles button,
  .bi-treemap button {
    transition: none !important;
  }
}

.app-shell {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0 264px, transparent 264px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22));
}

.app-shell::before {
  border-color: rgba(37, 99, 170, 0.16);
  box-shadow: inset 0 0 0 1px rgba(242, 183, 5, 0.14);
}

.app-shell::after {
  background: linear-gradient(180deg, rgba(37, 99, 170, 0.28), rgba(242, 183, 5, 0.08));
}

.workspace-sidebar {
  border-right-color: rgba(37, 99, 170, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 252, 0.94)),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(37, 99, 170, 0.04) 28px 29px);
}

.app-topbar,
.human-intro,
.source-module > header,
.rrhh-hero,
.gerencial-title {
  border-color: rgba(37, 99, 170, 0.24);
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.94), rgba(238, 247, 255, 0.88) 58%, rgba(255, 250, 232, 0.84)),
    radial-gradient(circle at 100% 0, rgba(242, 183, 5, 0.18), transparent 34%) !important;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.app-topbar::before,
.human-intro::before,
.source-module > header::before {
  background:
    linear-gradient(120deg, rgba(37, 99, 170, 0.10), transparent 34%),
    repeating-linear-gradient(90deg, rgba(37, 99, 170, 0.08) 0 1px, transparent 1px 42px);
}

.human-intro::after,
.source-module > header::after {
  width: 96px;
  background: linear-gradient(180deg, rgba(242, 183, 5, 0.22), rgba(242, 183, 5, 0.18));
}

.app-topbar h1,
.app-topbar #sourceBadge,
.human-intro h2,
.human-intro p,
.source-module > header h2,
.source-module > header p,
.source-module > header span,
.gerencial-title strong,
.gerencial-title span {
  color: var(--ink-strong) !important;
  text-shadow: none !important;
}

#sourceBadge,
.human-intro span,
.un-brief header span,
.source-module > header span,
.rrhh-hero span,
.rrhh-panel header span,
.brand span,
.window-card header span {
  color: var(--accent-teal) !important;
}

.app-topbar #sourceBadge,
.human-intro span,
.source-module > header span {
  color: var(--accent-teal) !important;
  text-shadow: none !important;
}

.app-topbar,
.human-intro,
.un-directory,
.un-brief,
.source-module > header,
.source-table,
.rrhh-hero,
.rrhh-kpis article,
.rrhh-panel,
.status-bar,
.window-card,
.bi-panel {
  border-color: rgba(37, 99, 170, 0.20);
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(17, 32, 51, 0.08);
}

.status-bar {
  color: var(--ink);
  /* fondo sólido + separación: la barra semitransparente dejaba ver la tabla
     del módulo detrás y se percibía montada sobre el contenido */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.side-nav button.active {
  border-color: rgba(37, 99, 170, 0.36);
  background: linear-gradient(90deg, rgba(37, 99, 170, 0.14), rgba(242, 183, 5, 0.10));
  color: var(--ink-strong);
  box-shadow: inset 5px 0 0 var(--accent-blue);
}

.side-nav {
  gap: 0.42rem;
}

.side-nav button,
.side-nav a {
  min-height: 46px;
  border-radius: 8px;
  font-weight: 900;
}

.side-nav button::before,
.side-nav a::before {
  content: "";
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 0.54rem;
  height: 0.54rem;
  margin-right: 0.52rem;
  border-radius: 999px;
  background: rgba(90, 105, 124, 0.36);
  box-shadow: inset 0 0 0 1px rgba(23, 32, 51, 0.08);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s ease, box-shadow 0.18s ease;
}

.side-nav button.active::before {
  background: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(17, 25, 79, 0.12);
}

.side-nav button::after,
.side-nav a::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(255, 255, 255, 0.68) 48%, transparent 62%),
    linear-gradient(90deg, rgba(37, 99, 170, 0.12), rgba(242, 183, 5, 0.06));
  opacity: 0;
  transform: translateX(-105%);
  pointer-events: none;
}

.side-nav button:hover::before,
.side-nav a:hover::before {
  z-index: 1;
  transform: scale(1.16);
  background: rgba(37, 99, 170, 0.68);
  box-shadow: 0 0 0 4px rgba(17, 25, 79, 0.10), 0 0 16px rgba(17, 25, 79, 0.20);
}

.side-nav button:hover::after,
.side-nav a:hover::after {
  opacity: 1;
  animation: moduleNavSweep 0.86s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.side-nav button.active {
  position: relative;
}

.side-nav button.active::after {
  opacity: 1;
  transform: translateX(0);
  background:
    radial-gradient(circle at 12px 50%, rgba(37, 99, 170, 0.20), transparent 38px),
    linear-gradient(90deg, rgba(37, 99, 170, 0.18), rgba(242, 183, 5, 0.12));
}

.un-picker,
.period-picker,
.history-rail button,
.human-next button,
.bi-project-tiles button {
  border-color: rgba(37, 99, 170, 0.22);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-strong);
}

.history-rail button.active,
.human-next button,
.bi-project-tiles button.active {
  border-color: rgba(37, 99, 170, 0.55);
  background: linear-gradient(135deg, rgba(37, 99, 170, 0.18), rgba(242, 183, 5, 0.12));
  color: var(--ink-strong);
  box-shadow: inset 0 -4px 0 var(--accent-blue);
}

.un-row,
.human-metrics span,
.focus-facts span,
.rrhh-row,
.kpi-tile,
.bi-panel,
.bi-mini,
.bi-stat,
.bi-wide {
  border-color: rgba(37, 99, 170, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 255, 0.92));
  box-shadow: 0 12px 30px rgba(17, 32, 51, 0.07);
}

.kpi-tile::before {
  border-color: rgba(37, 99, 170, 0.75);
  background:
    linear-gradient(135deg, transparent 44%, var(--accent-blue) 45% 55%, transparent 56%),
    linear-gradient(45deg, transparent 44%, var(--accent-teal) 45% 55%, transparent 56%);
}

.kpi-tile span,
.rrhh-kpis span,
.human-metrics small,
.focus-facts small {
  color: var(--muted);
}

.kpi-tile strong,
.human-metrics strong,
.focus-facts strong,
.rrhh-kpis strong,
.brand strong,
.source-module h2 {
  color: var(--ink-strong);
}

.gerencial-main > h3,
.bi-panel h3,
.bi-panel h4,
.gerencial-main .bi-panel h4,
.bi-mini h3 {
  border-color: rgba(37, 99, 170, 0.26);
  background:
    linear-gradient(90deg, rgba(37, 99, 170, 0.96), rgba(242, 183, 5, 0.86));
  color: #fff;
  letter-spacing: 0.03em;
}

.gerencial-title {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.96), rgba(230, 246, 255, 0.92) 60%, rgba(255, 248, 222, 0.88)) !important;
}

.gerencial-title::after {
  border-color: rgba(37, 99, 170, 0.28);
  background: rgba(255, 255, 255, 0.72);
  color: var(--navy);
}

.bi-project-tiles {
  background:
    linear-gradient(180deg, rgba(37, 99, 170, 0.08), rgba(242, 183, 5, 0.05));
}

.bi-bars i {
  background:
    linear-gradient(90deg, rgba(242, 183, 5, 0.58) var(--plan), transparent var(--plan)),
    linear-gradient(90deg, var(--accent-blue) var(--real), rgba(37, 99, 170, 0.10) var(--real));
  box-shadow: 0 0 0 1px rgba(17, 25, 79, 0.10), 0 0 16px rgba(17, 25, 79, 0.16);
}

.bi-gauge,
.bi-semi {
  background: conic-gradient(from 270deg at 50% 100%, var(--accent-blue) 0 var(--p), rgba(37, 99, 170, 0.10) var(--p) 50%, transparent 50% 100%);
}

.bi-gauge::after,
.bi-semi::after,
.bi-donut::after {
  background: var(--surface);
}

.bi-treemap button {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

.bi-donut {
  box-shadow: inset 0 0 0 1px rgba(17, 25, 79, 0.14), 0 10px 24px rgba(17, 25, 79, 0.10);
}

/* Executive rescue pass: fixed dashboard geometry, no overlapping cards */
@media (min-width: 1181px) {
  .gerencial-board {
    grid-template-columns: 310px minmax(680px, 1fr);
    grid-template-rows: 74px minmax(0, 1fr);
    gap: 0.5rem 0.65rem;
  }

  .gerencial-title {
    min-height: 74px;
    padding-block: 0.5rem;
  }

  .gerencial-title img {
    width: 128px;
  }

  .ops-signal {
    padding-right: 5.2rem;
  }

  .gerencial-left {
    align-content: start;
    grid-template-rows: 92px 114px 112px 118px;
    gap: 0.38rem;
  }

  .obra-strip {
    top: -64px;
    height: 46px;
  }

  .executive-strip {
    height: 82px;
    gap: 0.42rem;
  }

  .executive-card {
    min-height: 0;
    padding: 0.5rem 0.64rem 0.48rem 0.76rem;
    border-radius: 7px;
  }

  .executive-card strong {
    font-size: clamp(1.08rem, 1.75vw, 1.55rem);
  }

  .executive-card span,
  .executive-card small {
    font-size: 12px;
  }

  .gerencial-main {
    padding-top: 88px;
    grid-template-rows: 22px minmax(0, 1fr);
    gap: 0.34rem;
  }

  .gerencial-main > h3,
  .bi-panel h3,
  .bi-panel h4,
  .gerencial-main .bi-panel h4,
  .bi-mini h3 {
    min-height: 18px;
    font-size: 12px;
    line-height: 1;
  }

  .bi-panel {
    align-content: stretch;
    border-width: 1px;
  }

  .bi-indicators {
    grid-template-columns: repeat(14, minmax(0, 1fr));
    grid-template-rows: 56px 102px 60px 140px;
    grid-template-areas:
      "contract contract vac vac lic lic advance advance advance advance advance billed billed billed"
      "balance balance balance utility utility utility advance advance advance advance advance billed billed billed"
      "milestone milestone milestone milestone critical critical critical critical critical liquidity liquidity liquidity liquidity liquidity"
      "role role role role role gender gender gender gender additional additional additional additional additional";
    gap: 0.36rem;
    overflow: hidden;
  }

  .bi-indicators > .bi-panel {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
  }

  .bi-indicators > .bi-panel:nth-child(1) { grid-area: contract; }
  .bi-indicators > .bi-panel:nth-child(2) { grid-area: vac; }
  .bi-indicators > .bi-panel:nth-child(3) { grid-area: lic; }
  .bi-indicators > .bi-panel:nth-child(4) { grid-area: advance; }
  .bi-indicators > .bi-panel:nth-child(5) { grid-area: billed; }
  .bi-indicators > .bi-panel:nth-child(6) { grid-area: milestone; }
  .bi-indicators > .bi-panel:nth-child(7) { grid-area: balance; }
  .bi-indicators > .bi-panel:nth-child(8) { grid-area: utility; }
  .bi-indicators > .bi-panel:nth-child(9) { grid-area: role; }
  .bi-indicators > .bi-panel:nth-child(10) { grid-area: gender; }
  .bi-indicators > .bi-panel:nth-child(11) { grid-area: additional; }
  .bi-indicators > .bi-panel:nth-child(12) { grid-area: critical; }
  .bi-indicators > .bi-panel:nth-child(13) { grid-area: liquidity; }

  .bi-stat strong,
  .bi-wide strong,
  .bi-mini strong {
    padding: 0.28rem;
    font-size: clamp(12px, 1.05vw, 0.98rem);
    line-height: 1.05;
    overflow: hidden;
  }

  .bi-gauge,
  .bi-semi {
    width: min(140px, 78%);
    margin-top: 0.18rem;
  }

  .bi-gauge strong,
  .bi-semi strong {
    font-size: clamp(1rem, 1.65vw, 1.45rem);
  }

  .bi-scale {
    padding: 0 0.42rem 0.22rem;
    font-size: 12px;
  }

  .bi-bars {
    align-content: start;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
  }

  .bi-bars div {
    grid-template-columns: minmax(96px, 0.9fr) minmax(64px, 1fr) 46px;
    gap: 0.45rem;
    font-size: 12.5px;
    line-height: 18px;
  }

  .bi-bars i {
    height: 11px;
  }

  .bi-bars b {
    font-size: 12.5px;
  }

  .bi-indicators > .bi-panel:nth-child(4) .bi-bars span {
    color: var(--ink-strong);
    font-weight: 800;
  }

  .bi-donut {
    width: 92px;
    margin-top: 0;
  }

  .bi-legend {
    gap: 0.3rem;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.25;
  }

  .bi-project-tiles {
    padding: 0.34rem 0.44rem;
    gap: 0.2rem;
  }

  .bi-project-tiles button {
    min-height: 29px;
    font-size: 12px;
    border-width: 1px;
  }

  .bi-treemap {
    padding: 0.24rem;
    gap: 0.12rem;
  }

  .bi-treemap button {
    min-height: 22px;
    padding: 0.16rem 0.22rem;
    font-size: 12px;
    line-height: 0.96;
  }

  .bi-mini-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 0.2rem;
    min-height: 0;
    padding: 0;
  }

  .bi-mini {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
  }

  .bi-mini h3 {
    min-height: 0;
    height: auto;
    place-items: center start;
    padding-left: 0.58rem;
    background: linear-gradient(90deg, rgba(37, 99, 170, 0.94), rgba(242, 183, 5, 0.78));
    font-size: 12px;
    text-align: left;
  }

  .bi-mini strong {
    min-height: 0;
    place-items: center end;
    padding: 0.18rem 0.58rem;
    color: var(--ink-strong);
    font-size: 12px;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
  }
}

/* ASAP site-inspired motion layer: visual only, fixed geometry */
.app-shell {
  isolation: isolate;
}

/* La barra segmentada (.workspace-main::before) y la foto héroe tras los
   selectores (.app-topbar::after) se eliminaron: se percibían como barra de
   estado fantasma solapada sobre el topbar y contenido fantasma detrás de
   los pickers UN/MES (fix/tipografia-modulos). */

.app-topbar {
  position: relative;
  overflow: hidden;
}

.app-topbar > * {
  position: relative;
  z-index: 1;
}

.gerencial-title {
  /* sin foto héroe: se colaba detrás de los chips y se leía como fantasma */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0 42%, rgba(240, 248, 255, 0.88) 56%, rgba(255, 255, 255, 0.94)) !important;
}

.gerencial-title::before {
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.58) 45%, transparent 54%),
    linear-gradient(90deg, transparent 0 68%, rgba(226, 47, 61, 0.16) 68% 70%, rgba(37, 99, 170, 0.18) 70% 72%, transparent 72%);
  opacity: 0.9;
}

.gerencial-title img {
  filter: drop-shadow(0 8px 18px rgba(17, 32, 51, 0.12));
}

.gerencial-title > div,
.gerencial-title img,
.ops-signal {
  z-index: 3;
}

.asap-service-reel {
  position: absolute;
  right: 6.75rem;
  bottom: 0.34rem;
  z-index: 1;
  display: flex;
  width: min(350px, 27vw);
  min-width: 0;
  height: 1.32rem;
  align-items: center;
  gap: 0.32rem;
  overflow: hidden;
  opacity: 0.86;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.asap-service-reel span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.04rem;
  padding: 0 0.48rem;
  border: 1px solid rgba(37, 99, 170, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink-strong);
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 8px 22px rgba(17, 32, 51, 0.08);
}

.ops-signal span {
  position: relative;
  overflow: hidden;
}

.ops-signal span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.7) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}

.executive-card {
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.executive-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--status-critical), var(--accent), var(--accent));
  transform: scaleX(0.18);
  transform-origin: left center;
  opacity: 0.75;
}

.executive-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(17, 32, 51, 0.12);
}

.obra-card {
  filter: saturate(1.06) contrast(1.02);
}

.obra-card::before {
}

.bi-bars i {
  position: relative;
  overflow: hidden;
}

.bi-bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: translateX(-120%);
}

@keyframes asapSignalSweep {
  0%, 100% { transform: scaleX(0.72); opacity: 0.64; }
  45% { transform: scaleX(1); opacity: 0.92; }
}

@keyframes asapHeaderDrift {
  from { background-position: center 46%; transform: scale(1); }
  to { background-position: right 50%; transform: scale(1.035); }
}

@keyframes asapReel {
  from { transform: translateX(0); }
  to { transform: translateX(-118%); }
}

@keyframes asapChipScan {
  0%, 46% { transform: translateX(-130%); }
  70%, 100% { transform: translateX(130%); }
}

@keyframes asapMetricPulse {
  0%, 100% { transform: scaleX(0.18); opacity: 0.55; }
  50% { transform: scaleX(1); opacity: 0.9; }
}

@keyframes asapSiteImageWash {
  0%, 100% { opacity: 0.46; transform: translateX(-8%); }
  50% { opacity: 0.72; transform: translateX(8%); }
}

@keyframes asapBarFlow {
  0%, 35% { transform: translateX(-120%); }
  76%, 100% { transform: translateX(120%); }
}

@keyframes moduleTitlePulse {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.82;
  }
  48% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes moduleNavSweep {
  from {
    transform: translateX(-105%);
  }
  to {
    transform: translateX(105%);
  }
}

@keyframes moduleActiveGlow {
  0%, 100% {
    filter: saturate(1);
    opacity: 0.72;
  }
  50% {
    filter: saturate(1.18);
    opacity: 1;
  }
}

@media (max-width: 1180px) {
  .asap-service-reel {
    display: none;
  }

  .gerencial-title {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.97), rgba(240, 248, 255, 0.92)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asap-service-reel span,
  .ops-signal span::after,
  .executive-card::after,
  .obra-card::before,
  .bi-bars i::after,
  .side-section-title::before,
  .side-nav button::after,
  .side-nav a::after {
    animation: none !important;
  }
}

/* Zoom and CMD footer pass */
.neural-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.login-bg .neural-canvas {
  z-index: 1;
}

.login-bg-grain {
  z-index: 2;
}

.ai-strip {
  position: relative;
}

.ai-strip .neural-canvas {
  z-index: 0;
}

.ai-strip-head,
.ai-strip-body {
  position: relative;
  z-index: 1;
}

.cmd-logo {
  height: 19px;
  width: auto;
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 3px rgba(7, 12, 40, 0.18);
}

.cmd-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 12px;
  font-weight: 600;
}

.cmd-site-footer {
  color: var(--future-text, var(--muted));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.cmd-site-footer a,
.cmd-credit a {
  color: var(--accent-teal);
  font-weight: 900;
  text-decoration: none;
}

.cmd-site-footer a:hover,
.cmd-credit a:hover {
  text-decoration: underline;
}

.login-footer {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 2rem));
  margin-top: 0;
  padding: 0.5rem 1rem;
  background: transparent;
  justify-content: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

.login-footer a {
  color: rgba(255, 255, 255, 0.8);
}

.status-credit {
  justify-self: end;
}

.status-credit .cmd-credit-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-content: stretch;
  gap: 0.65rem;
}

.status-bar span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-carousel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.status-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.82), transparent 12%, transparent 88%, rgba(255,255,255,0.82));
  pointer-events: none;
}

.status-carousel-track {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.58rem 1rem;
  width: max-content;
  will-change: transform;
}

.status-carousel-track span {
  position: relative;
  padding-right: 1.2rem;
  color: var(--future-ink, var(--navy));
  font-size: 12.5px;
  font-weight: 800;
}

.status-carousel-track span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(37, 99, 170, 0.4);
  transform: translateY(-50%);
}

.status-bar .cmd-credit {
  color: var(--future-text, var(--muted));
  text-align: right;
  white-space: nowrap;
}

#lastDataRead {
  color: var(--future-ink, var(--navy));
  font-weight: 950;
}

#moduleCadence {
  color: var(--future-text, var(--muted));
  font-size: 12px;
}

.audit-panel {
  position: static;
  width: 100%;
  display: grid;
  gap: 0.42rem;
  padding: 0.75rem;
  border: 1px solid rgba(37, 99, 170, 0.22);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(17, 32, 51, 0.16);
  backdrop-filter: blur(14px);
}

.session-user-badge {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(37, 99, 170, 0.10);
  color: var(--future-ink, var(--navy));
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.sidebar-admin,
.side-nav button[data-select-module="audit"],
.side-nav button[data-select-module="usuarios"] {
  min-height: 44px;
  border: 1px solid rgba(15, 91, 216, 0.22);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 170, 0.12), rgba(31, 143, 255, 0.18));
  color: var(--future-ink, var(--navy));
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
}

.sidebar-admin:hover,
.side-nav button[data-select-module="audit"]:hover,
.side-nav button[data-select-module="usuarios"]:hover {
  border-color: rgba(15, 91, 216, 0.4);
  box-shadow: 0 10px 24px rgba(17, 32, 51, 0.08);
}

.admin-panel {
  width: min(520px, 82vw);
}

.inline-admin-panel {
  width: 100%;
  min-height: 100%;
  border: 1px solid rgba(17, 32, 51, 0.08);
  border-radius: 18px;
  padding: 0.95rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
}

.admin-panel-head {
  display: grid;
  gap: 0.15rem;
  margin-bottom: 0.55rem;
}

.admin-panel-head strong {
  color: var(--future-ink, var(--navy));
  font-size: 0.88rem;
}

.admin-panel-head span,
#adminStatus {
  color: var(--future-text, var(--muted));
  font-size: 12px;
}

.admin-user-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.admin-user-form input,
.admin-user-form select,
.admin-user-form button {
  min-height: 40px;
  border: 1px solid rgba(17, 32, 51, 0.14);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font: inherit;
}

.admin-user-form label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.1rem;
  color: var(--future-ink, var(--navy));
  font-size: 12px;
}

.admin-user-form .admin-active,
#adminSubmitBtn {
  grid-column: 1 / -1;
}

#adminSubmitBtn {
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-weight: 800;
}

.admin-users-list {
  display: grid;
  gap: 0.45rem;
  max-height: 260px;
  margin-top: 0.65rem;
  overflow: auto;
  padding-right: 0.12rem;
}

.admin-user-card {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem;
  border: 1px solid rgba(17, 32, 51, 0.08);
  border-radius: 12px;
  background: rgba(247, 250, 255, 0.92);
}

.admin-user-card strong {
  color: var(--future-ink, var(--navy));
  font-size: 12.5px;
}

.admin-user-card span {
  color: var(--future-text, var(--muted));
  font-size: 12px;
}

.admin-user-card button {
  justify-self: start;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 0.8rem;
  background: rgba(37, 99, 170, 0.12);
  color: var(--future-ink, var(--navy));
  font-weight: 800;
}

#adminUsersBtn {
  position: relative;
}

#adminUsersBtn::after {
  content: "Acceso";
  margin-left: 0.42rem;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.audit-row {
  display: grid;
  gap: 0.12rem;
  padding-bottom: 0.42rem;
  border-bottom: 1px solid rgba(17, 32, 51, 0.08);
}

.audit-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.audit-row strong {
  color: var(--future-ink, var(--navy));
  font-size: 12.5px;
}

.audit-row span {
  color: var(--future-text, var(--muted));
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}

.gerencial-board .zoomable-card {
  cursor: zoom-in;
}

.gerencial-board .zoomable-card:focus-visible {
  outline: 3px solid rgba(37, 99, 170, 0.34);
  outline-offset: 2px;
}

.gerencial-board .bi-panel.zoomable-card:hover,
.gerencial-board .executive-card.zoomable-card:hover {
  border-color: rgba(37, 99, 170, 0.42);
  box-shadow: 0 18px 42px rgba(17, 32, 51, 0.12);
}

.module-window.zoom-mode .window-backdrop {
  background:
    radial-gradient(circle at 30% 20%, rgba(37, 99, 170, 0.18), transparent 34%),
    rgba(8, 16, 46, 0.48);
}

.module-window.zoom-mode .window-card {
  width: min(980px, calc(100vw - 2rem));
  height: min(690px, calc(100vh - 2rem));
  border-color: rgba(37, 99, 170, 0.30);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 255, 0.96));
}

.module-window.zoom-mode .window-body {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 1rem;
  min-height: 0;
}

.module-window.zoom-mode .window-main {
  align-content: stretch;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.module-window.zoom-mode #windowValue {
  color: var(--future-ink, var(--navy));
  font-size: clamp(1.85rem, 5vw, 3.65rem);
  line-height: 0.95;
}

.module-window.zoom-mode #windowCopy {
  max-width: 100%;
  font-size: 0.9rem;
}

.zoom-slot {
  min-height: 0;
  display: grid;
  align-items: stretch;
  overflow: hidden;
}

.zoom-card-clone {
  width: 100%;
  min-height: 270px;
  pointer-events: none;
  cursor: default;
  transform: none !important;
}

.zoom-card-clone.bi-panel,
.zoom-card-clone.executive-card {
  min-height: 270px;
  border-radius: 10px;
  padding: 1rem;
  overflow: hidden;
}

.zoom-card-clone.executive-card {
  grid-template-rows: auto 1fr auto;
}

.zoom-card-clone h3,
.zoom-card-clone h4,
.zoom-card-clone.executive-card span {
  min-height: auto;
  font-size: 0.86rem !important;
  line-height: 1.1 !important;
}

.zoom-card-clone strong,
.zoom-card-clone.bi-stat strong,
.zoom-card-clone.bi-wide strong,
.zoom-card-clone.bi-mini strong {
  font-size: clamp(1.7rem, 5.2vw, 3.45rem);
  line-height: 0.95;
  white-space: normal;
}

.bi-gauge-card .bi-semi + strong {
  display: block;
  max-width: 92%;
  margin: 0.08rem auto 0;
  padding: 0 0.35rem;
  overflow: hidden;
  color: var(--future-muted, var(--ink-muted));
  font-family: "Manrope", sans-serif;
  font-size: clamp(12px, 0.85vw, 0.9rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.zoom-card-clone.bi-gauge-card .bi-semi + strong {
  margin-top: 0.2rem;
  font-size: clamp(12px, 1.25vw, 1rem) !important;
  line-height: 1.1;
}

.zoom-card-clone .bi-bars {
  gap: 0.46rem;
  padding: 0.8rem 1rem;
}

.zoom-card-clone .bi-bars div {
  grid-template-columns: minmax(180px, 0.95fr) minmax(160px, 1fr) 58px !important;
  grid-template-rows: auto !important;
  grid-template-areas: none !important;
  gap: 0.65rem !important;
  font-size: 13px !important;
}

.zoom-card-clone .bi-bars span,
.zoom-card-clone .bi-bars i,
.zoom-card-clone .bi-bars b {
  grid-area: auto !important;
}

.zoom-card-clone .bi-bars i {
  height: 12px !important;
}

.zoom-card-clone .bi-bars b {
  font-size: 12.8px !important;
}

.zoom-card-clone .bi-donut {
  width: min(190px, 44%);
}

.zoom-card-clone .bi-gauge,
.zoom-card-clone .bi-semi {
  width: min(280px, 70%);
  margin: 0.5rem auto;
}

.zoom-card-clone .bi-legend {
  font-size: 12.5px;
  gap: 0.35rem 0.55rem;
}

.zoom-card-clone .bi-project-tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.zoom-card-clone .bi-project-tiles button,
.zoom-card-clone .bi-treemap button {
  min-height: 46px;
  opacity: 0.96;
}

@media (max-width: 980px) {
  .status-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.18rem;
    align-content: center;
  }

  .status-bar .cmd-credit {
    text-align: left;
  }

  .module-window.zoom-mode .window-body {
    grid-template-columns: 1fr;
  }

  .module-window.zoom-mode .window-side {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gerencial-board .bi-panel.zoomable-card:hover,
  .gerencial-board .executive-card.zoomable-card:hover {
    transform: none !important;
  }
}

/* Module parity pass: KPI Costos, RRHH and Logistica mirror Programacion y Control */
.parity-module.source-module {
  width: min(1440px, 100%);
  height: 100%;
  margin: 0 auto;
  display: none;
  grid-template-rows: 78px minmax(0, 1fr);
  gap: 0.5rem;
  overflow: hidden;
}

.parity-module.source-module.active {
  display: grid;
}

.parity-module.source-module > header,
.parity-module.source-module > header.rrhh-hero {
  position: relative;
  min-height: 78px;
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap; /* si no cabe, chips/cobertura bajan una línea: nunca cortados */
  row-gap: 0.3rem;
  gap: 0.78rem;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 170, 0.30);
  border-radius: 0;
  padding: 0.5rem 0.78rem;
  /* fondo limpio, sin foto héroe: la imagen se colaba detrás de los chips
     semitransparentes y se leía como contenido fantasma (fix/tipografia-modulos) */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(238, 247, 255, 0.88)) !important;
  box-shadow: 0 16px 40px rgba(17, 32, 51, 0.08);
}

.parity-module.source-module > header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.45) 48%, transparent 56%),
    repeating-linear-gradient(90deg, rgba(37, 99, 170, 0.10) 0 1px, transparent 1px 42px);
  transform: translateX(-105%);
  animation: boardSweep 1.1s var(--ease-control, cubic-bezier(0.22, 1, 0.36, 1)) 0.04s both;
  pointer-events: none;
}

.parity-module .module-title-logo {
  position: relative;
  z-index: 1;
  width: 128px;
  height: auto;
  flex: 0 0 auto;
}

.parity-module.source-module > header > div:not(.module-signal),
.parity-module.source-module > header > strong {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.parity-module.source-module > header h2 {
  margin: 0.08rem 0 0;
  color: var(--ink-strong) !important;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
}

.parity-module.source-module > header p {
  max-width: 92ch;
  margin: 0.22rem 0 0;
  overflow: hidden;
  color: var(--ink) !important;
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.3;
  /* envolver hasta 2 líneas; ellipsis solo como último recurso y con
     tooltip del texto completo (title, sincronizado desde app.js) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: break-word;
}

.parity-module.source-module > header span {
  color: var(--accent-teal) !important;
}

.parity-module .module-signal {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  margin-left: auto;
  padding-right: 0;
  justify-content: flex-end;
}

.parity-module .module-signal span {
  color: var(--ink-strong) !important;
}

.parity-module .kpi-cost-grid,
.parity-module .rrhh-kpis,
.parity-module .source-table {
  min-height: 0;
  display: grid;
  gap: 0.42rem;
  overflow: hidden;
}

.parity-module .kpi-cost-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.parity-module .kpi-tile {
  grid-column: span 4;
}

.parity-module .rrhh-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 92px;
}

.parity-module .rrhh-exec-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
  gap: 0.5rem;
  overflow: hidden;
}

#moduleRrhh.parity-module {
  grid-template-rows: 78px 92px minmax(0, 1fr);
}

.parity-module .source-table {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(120px, 0.55fr) minmax(0, 1fr);
}

.parity-module .source-table div:first-child {
  grid-column: span 2;
}

.parity-module .source-table div:last-child {
  grid-column: span 2;
}

.parity-module .kpi-tile,
.parity-module .rrhh-kpis article,
.parity-module .rrhh-panel,
.parity-module .source-table div {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 170, 0.22);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 255, 0.94));
  box-shadow: 0 14px 34px rgba(17, 32, 51, 0.08);
}

.parity-module .kpi-tile::before,
.parity-module .rrhh-kpis article::before,
.parity-module .rrhh-panel::before,
.parity-module .source-table div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border: 0;
  background: var(--accent-blue);
}

.parity-module .kpi-tile.warn::before,
.parity-module .source-table div:last-child::before {
  background: var(--status-critical);
}

.parity-module .kpi-tile,
.parity-module .rrhh-kpis article {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  padding: 0.72rem 0.82rem 0.62rem 0.9rem;
}

.parity-module .kpi-tile span,
.parity-module .rrhh-kpis span,
.parity-module .source-table strong,
.parity-module .rrhh-panel header span {
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.parity-module .kpi-tile strong,
.parity-module .rrhh-kpis strong,
.parity-module .source-table span,
.parity-module .rrhh-panel header strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-strong);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  font-weight: 800;
  line-height: 0.96;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parity-module .kpi-tile small,
.parity-module .rrhh-kpis small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parity-module .rrhh-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
}

.parity-module .rrhh-panel header {
  min-height: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.34rem 0.72rem;
  background: linear-gradient(90deg, rgba(37, 99, 170, 0.96), rgba(242, 183, 5, 0.86));
}

.parity-module .rrhh-panel header span,
.parity-module .rrhh-panel header strong {
  color: #fff !important;
}

.parity-module .rrhh-focus p {
  margin: 0;
  padding: 0.72rem 0.8rem 0.3rem;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.parity-module .rrhh-bars {
  align-content: center;
  padding: 0.5rem 0.8rem 0.78rem;
}

.parity-module .rrhh-ranking {
  min-height: 0;
  padding: 0.42rem;
  overflow: hidden;
}

.parity-module .rrhh-row {
  min-height: 72px;
}

.parity-module .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  overflow: auto;
}

@media (max-width: 900px) {
  .detail-grid,
  .parity-module .detail-grid {
    grid-template-columns: 1fr;
  }
}

.parity-module .source-table div {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  padding: 0.82rem 0.9rem;
}

@media (max-width: 1180px) {
  .parity-module.source-module,
  #moduleRrhh.parity-module {
    grid-template-rows: auto minmax(0, 1fr);
    overflow: auto;
  }

  .parity-module.source-module > header,
  .parity-module.source-module > header.rrhh-hero {
    min-height: 92px;
    flex-wrap: wrap;
  }

  .parity-module .module-signal {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .parity-module .kpi-cost-grid,
  .parity-module .rrhh-kpis,
  .parity-module .rrhh-exec-grid,
  .parity-module .source-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    overflow: visible;
  }

  .parity-module .kpi-tile,
  .parity-module .source-table div,
  .parity-module .source-table div:first-child,
  .parity-module .source-table div:last-child {
    grid-column: auto;
    min-height: 92px;
  }
}

@media (max-width: 720px) {
  .parity-module .module-title-logo {
    width: 96px;
  }

  .parity-module .kpi-cost-grid,
  .parity-module .rrhh-kpis,
  .parity-module .rrhh-exec-grid,
  .parity-module .source-table {
    grid-template-columns: 1fr;
  }

  .parity-module.source-module > header p {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-carousel-track {
    transition: none !important;
    transform: none !important;
  }
  .welcome-card {
    animation: none !important;
  }
  .parity-module.source-module > header::before {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  .welcome-actions {
    grid-template-columns: 1fr;
  }
}

/* Internal access and Logistica soon modal */
.sidebar-bottom {
  display: grid;
  gap: 0.45rem;
  align-self: end;
}

.internal-data-link {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed rgba(90, 105, 124, 0.34);
  border-radius: 8px;
  padding: 0 0.62rem;
  background: rgba(255, 255, 255, 0.46);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.internal-data-link::before {
  content: "Interno";
  margin-right: 0.42rem;
  border-radius: 999px;
  padding: 0.12rem 0.34rem;
  background: rgba(23, 32, 51, 0.08);
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.internal-data-link:hover,
.internal-data-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 170, 0.34);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-strong);
}

.module-window.soon-mode .window-backdrop {
  background:
    radial-gradient(circle at 50% 30%, rgba(226, 47, 61, 0.18), transparent 26%),
    radial-gradient(circle at 60% 46%, rgba(37, 99, 170, 0.22), transparent 34%),
    rgba(8, 16, 46, 0.50);
}

.module-window.soon-mode .window-card {
  width: min(760px, calc(100vw - 2rem));
  height: min(460px, calc(100vh - 2rem));
  border-color: rgba(37, 99, 170, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 255, 0.96)),
    url("assets/hero-asap.jpg") right center / auto 120% no-repeat;
}

.module-window.soon-mode #windowValue {
  color: var(--ink-strong);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(3rem, 9vw, 5.4rem);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.module-window.soon-mode #windowCopy {
  max-width: 58ch;
  color: var(--ink);
  font-weight: 850;
}

.soon-brand-slot {
  display: grid;
}

.soon-brand-card {
  width: min(320px, 100%);
  display: flex;
  align-items: center;
  gap: 0.74rem;
  border: 1px solid rgba(37, 99, 170, 0.20);
  border-radius: 10px;
  padding: 0.58rem 0.75rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(17, 32, 51, 0.10);
}

.soon-brand-card img {
  width: 92px;
  height: auto;
}

.soon-brand-card span {
  color: var(--accent-teal);
  font-size: 0.9rem;
  font-weight: 950;
}

@media (max-width: 760px) {
  .sidebar-bottom {
    gap: 0.35rem;
  }

  .internal-data-link {
    min-height: 42px;
    padding: 0;
    font-size: 0;
  }

  .internal-data-link::before {
    content: "DB";
    margin-right: 0;
    font-size: 12px;
  }
}

/* Billed gauge readability fix */
#biBilledGauge {
  align-items: end;
  justify-items: center;
  padding-bottom: 0.16rem;
}

#biBilledGauge strong {
  position: relative;
  z-index: 3;
  max-width: 88%;
  margin-bottom: 0.02rem;
  border: 1px solid rgba(37, 99, 170, 0.18);
  border-radius: 999px;
  padding: 0.15rem 0.38rem 0.17rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(17, 32, 51, 0.13);
  color: var(--future-ink, var(--ink-strong));
  font-family: "Manrope", sans-serif;
  font-size: clamp(12px, 0.95vw, 1rem) !important;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoom-card-clone #biBilledGauge strong,
.zoom-card-clone .bi-gauge strong {
  max-width: 76%;
}

/* Login captcha pass */
/* Responsive integrity pass: keep executive modules proportional */
.parity-module.source-module {
  height: auto;
  max-height: 100%;
  align-self: start;
  grid-template-rows: auto auto;
  align-content: start;
  overflow: auto;
  scrollbar-width: thin;
}

#moduleRrhh.parity-module {
  grid-template-rows: auto auto auto;
}

.parity-module.source-module > header,
.parity-module.source-module > header.rrhh-hero {
  min-height: 74px;
  max-width: 100%;
}

.parity-module .module-signal {
  min-width: 0;
  flex-wrap: wrap;
}

.parity-module .module-signal span {
  min-height: 30px;
  white-space: nowrap;
}

.parity-module .kpi-cost-grid,
.parity-module .rrhh-kpis,
.parity-module .source-table {
  min-height: 0;
  align-content: start;
  overflow: visible;
}

.parity-module .kpi-cost-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: minmax(112px, auto);
  gap: 0.55rem;
}

.parity-module .kpi-tile {
  grid-column: auto;
  min-height: 112px;
  max-height: none;
  align-content: center;
  justify-items: center;
  gap: 0.28rem;
  padding: 0.75rem 0.9rem 0.68rem;
}

.parity-module .kpi-tile strong,
.parity-module .rrhh-kpis strong {
  font-size: clamp(1.35rem, 1.8vw, 1.9rem);
  white-space: normal;
}

.parity-module .kpi-tile small,
.parity-module .rrhh-kpis small {
  max-width: 100%;
  white-space: normal;
}

.parity-module .rrhh-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: minmax(88px, auto);
  gap: 0.55rem;
}

.parity-module .rrhh-kpis article {
  min-height: 88px;
}

.parity-module .rrhh-exec-grid {
  grid-template-columns: minmax(280px, 0.92fr) minmax(360px, 1.08fr);
  align-content: start;
  overflow: visible;
}

.parity-module .rrhh-panel {
  min-height: 220px;
}

.parity-module .source-table {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: minmax(96px, auto);
  gap: 0.55rem;
}

.parity-module .source-table div,
.parity-module .source-table div:first-child,
.parity-module .source-table div:last-child {
  grid-column: auto;
  min-height: 96px;
}

@media (max-width: 1280px) {
  .app-topbar {
    grid-template-columns: minmax(240px, 0.72fr) minmax(420px, 1fr);
  }

  .top-actions {
    grid-template-columns: minmax(240px, 1fr) minmax(170px, 210px);
  }

  .parity-module .kpi-cost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .workspace-main {
    overflow: auto;
  }

  .app-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: auto;
  }

  .top-actions {
    grid-template-columns: 1fr 1fr;
  }

  .parity-module.source-module,
  #moduleRrhh.parity-module {
    max-height: none;
  }

  .parity-module.source-module > header,
  .parity-module.source-module > header.rrhh-hero {
    min-height: auto;
  }

  .parity-module .rrhh-kpis,
  .parity-module .rrhh-exec-grid,
  .parity-module .source-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .top-actions {
    grid-template-columns: 1fr;
  }

  .parity-module .module-signal {
    display: none;
  }

  .parity-module .kpi-cost-grid,
  .parity-module .rrhh-kpis,
  .parity-module .rrhh-exec-grid,
  .parity-module .source-table {
    grid-template-columns: 1fr;
  }

  .parity-module .kpi-tile,
  .parity-module .rrhh-kpis article,
  .parity-module .source-table div {
    min-height: 92px;
  }
}

/* === delight: loading sync pulse === */
#sourceBadge.syncing {
  animation: badgeSync 1.2s ease-in-out infinite;
}

@keyframes badgeSync {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* === delight: button press feedback === */
.side-nav button:active,
.side-nav a:active,
.sidebar-logout:active,
.human-next button:active,
.history-rail button:active,
.un-row:active,
.issue-card:active,
.issue-more:active,
.bi-project-tiles button:active,
.bi-treemap button:active,
.window-card header button:active,
.login-card button:active,
.login-card .captcha-refresh:active {
  transform: scale(0.97) !important;
}

/* === delight: login entrance === */
.app-shell.entering {
  animation: shellEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-shell.entering .workspace-sidebar {
  animation: sidebarEnter 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.app-shell.entering .workspace-main {
  animation: mainEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes shellEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sidebarEnter {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mainEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === delight: logout exit === */
.app-shell.leaving {
  animation: shellLeave 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes shellLeave {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(4px); }
}

/* === delight: executive card hover accent fill === */
.executive-card:hover::before {
  width: 6px;
  transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* === delight: select focus glow === */
.un-picker:focus-within,
.period-picker:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 170, 0.15);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* === arrange: desktop modal as side panel === */
@media (min-width: 1181px) {
  .module-window {
    justify-content: flex-end;
    padding: 0;
  }
  .module-window .window-backdrop {
    background: rgba(8, 16, 46, 0.18);
  }
  .module-window .window-card {
    width: min(520px, 40vw);
    height: 100vh;
    border-radius: 0;
    box-shadow: -8px 0 40px rgba(17, 25, 79, 0.14);
    animation: none;
  }
  .module-window[aria-hidden="false"] .window-card {
    animation: panelSlideIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes panelSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  #sourceBadge.syncing,
  .app-shell.entering,
  .app-shell.entering .workspace-sidebar,
  .app-shell.entering .workspace-main,
  .app-shell.leaving {
    animation: none !important;
  }
}

/* ============================================================ */
/* Dark mode overrides — sobrio profesional (Bloomberg-like)     */
/* Cubre hardcoded #fff, gradients blanco→azul y componentes que */
/* no usan tokens. El toggle es [data-theme="dark"] en <html>.   */
/* ============================================================ */

[data-theme="dark"] .un-picker,
[data-theme="dark"] .history-rail button,
[data-theme="dark"] .issue-more:hover,
[data-theme="dark"] .human-next button,
[data-theme="dark"] .executive-card,
[data-theme="dark"] .kpi-tile,
[data-theme="dark"] .bi-panel,
[data-theme="dark"] .rrhh-panel,
[data-theme="dark"] .un-row,
[data-theme="dark"] .window-card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .workspace-sidebar {
  background: var(--surface);
}

[data-theme="dark"] .bi-panel,
[data-theme="dark"] .kpi-tile,
[data-theme="dark"] .rrhh-panel,
[data-theme="dark"] .executive-card,
[data-theme="dark"] .un-row {
  background: linear-gradient(180deg, var(--surface) 0%, var(--panel) 100%);
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Donut center hole y gauge backgrounds */
[data-theme="dark"] .bi-donut::after,
[data-theme="dark"] .bi-gauge::after {
  background: var(--surface);
}

/* Inputs y forms que usan blanco */
[data-theme="dark"] .login-card input,
[data-theme="dark"] .admin-panel input,
[data-theme="dark"] .admin-panel select,
[data-theme="dark"] .admin-panel textarea,
[data-theme="dark"] .un-picker input,
[data-theme="dark"] .period-picker input,
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] textarea {
  background: var(--surface-alt);
  color: var(--ink);
  border-color: var(--line);
}

/* El body / app-shell */
[data-theme="dark"] body {
  background: var(--body-bg);
  color: var(--ink);
}

[data-theme="dark"] .app-shell {
  background: var(--body-bg);
}

/* Sidebar y topbar suelen tener su propio fondo */
[data-theme="dark"] .workspace-sidebar {
  background: var(--panel);
  border-color: var(--line);
}

/* Texto que usa var(--ink-strong) / navy hardcoded → en dark debe ser claro */
[data-theme="dark"] .bi-panel strong,
[data-theme="dark"] .kpi-tile strong,
[data-theme="dark"] .executive-card strong,
[data-theme="dark"] .un-row strong,
[data-theme="dark"] .gerencial-title strong,
[data-theme="dark"] .human-metrics strong,
[data-theme="dark"] .focus-facts strong,
[data-theme="dark"] .window-main strong,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: var(--ink);
}

/* Issue cards y lanes */
[data-theme="dark"] .issue-card,
[data-theme="dark"] .issue-list,
[data-theme="dark"] .kanban-column,
[data-theme="dark"] .board-summary {
  background: var(--surface);
  border-color: var(--line);
}

/* Chips/señales con fondo blanco translúcido hardcoded */
[data-theme="dark"] .ops-signal span,
[data-theme="dark"] .un-picker,
[data-theme="dark"] .period-picker,
[data-theme="dark"] .history-rail button {
  background: var(--surface-alt);
  border-color: var(--line);
  color: var(--ink);
}

/* Slider captcha y botones del login ya están sobre oscuro — se mantienen */

/* Marca/border de emphasis que usa navy en fondos claros */
[data-theme="dark"] .brand strong,
[data-theme="dark"] .periodLabel {
  color: var(--ink);
}

/* Scrollbar para dark */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--body-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 6px;
}

/* ===== Toggle día/noche ===== */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.theme-toggle:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* No animar transición de tema en reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-theme] * { transition: none !important; }
}


/* ===== Banner de dato desactualizado (frescura de fuentes) ===== */
.module-panel > header {
  flex-wrap: wrap;
}

.stale-banner-global {
  flex: 0 0 auto;
  margin: 0;
  align-self: start; /* nunca estirarse si cae en una pista flexible */
}

/* Con ribbon global visible, la grilla principal abre una fila para él
   (topbar · ribbon · tira Insights IA · módulos · footer) */
.workspace-main.has-freshness-banner {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.stale-banner {
  flex: 1 1 100%;
  box-sizing: border-box;
  width: 100%;
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--status-warn);
  border-left: 4px solid var(--status-warn);
  border-radius: var(--radius-md);
  background: var(--status-warn-soft);
  color: var(--ink-strong);
  font-size: 13px;
  line-height: 1.45;
}

.stale-banner::before {
  content: "⚠ ";
}

.stale-banner.hidden {
  display: none;
}

[data-theme="dark"] .stale-banner {
  background: rgba(194, 104, 10, 0.16);
  color: var(--ink);
}

/* Badge de fuente en alerta (integrado con banner de frescura) */
#sourceBadge.warn {
  padding: 2px var(--space-sm);
  border: 1px solid var(--status-warn);
  border-radius: var(--radius-sm);
  background: var(--status-warn-soft);
  color: var(--status-warn) !important;
}

[data-theme="dark"] #sourceBadge.warn {
  background: rgba(194, 104, 10, 0.16);
}

/* ============================================================
   Insights IA — tira de hasta 3 tarjetas sobre el fold
   (entre el topbar y los módulos). Acento teal de marca,
   display Sora / cuerpo Manrope, coherente con tokens.css.
   ============================================================ */
.ai-strip {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--space-sm);
  padding: 0.65rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  align-self: start; /* alto según contenido: nunca estirarse en una pista 1fr */
}

.ai-strip.hidden {
  display: none;
}

.ai-strip-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.ai-strip-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ai-strip-head:hover .ai-chevron {
  color: var(--accent);
}

.ai-badge {
  font-family: "Sora", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: var(--accent);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  flex-shrink: 0;
}

.ai-strip-title {
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 0;
  flex-shrink: 0;
}

.ai-meta {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-chevron {
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform 0.25s ease, color 0.2s ease;
}

.ai-strip.open .ai-chevron {
  transform: rotate(180deg);
}

/* Cuerpo colapsable: cerrado = 0fr (sin espacio reservado), abierto = 1fr.
   Animación suave vía transición de grid-template-rows. */
.ai-strip-body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.28s ease, visibility 0s linear 0.28s;
}

.ai-strip.open .ai-strip-body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.28s ease, visibility 0s;
}

.ai-strip-body > .ai-cards {
  min-height: 0;
  overflow: hidden;
}

/* Cerrada: una sola línea, sin gap vertical reservado. */
.ai-strip:not(.open) {
  row-gap: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ai-strip-body,
  .ai-strip.open .ai-strip-body,
  .ai-chevron {
    transition: none;
  }
}

.ai-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.ai-cards:has(.ai-card:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.ai-card {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  min-width: 0;
  overflow: hidden;
}

.ai-card .ai-card-module {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.ai-card strong {
  font-family: "Sora", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.25;
}

.ai-card p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.ai-card small {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
}

.ai-card.tone-critical {
  border-left-color: var(--status-critical);
}
.ai-card.tone-critical .ai-card-module,
.ai-card.tone-critical small {
  color: var(--status-critical);
}

.ai-card.tone-watch {
  border-left-color: var(--status-warn);
}
.ai-card.tone-watch .ai-card-module,
.ai-card.tone-watch small {
  color: var(--status-warn);
}

.ai-card.tone-opportunity {
  border-left-color: var(--status-ok);
}
.ai-card.tone-opportunity .ai-card-module,
.ai-card.tone-opportunity small {
  color: var(--status-ok);
}

.ai-card.tone-ok {
  border-left-color: var(--accent);
}

.ai-card.tone-muted {
  border-left-color: var(--line-strong);
  background: var(--soft);
}
.ai-card.tone-muted .ai-card-module,
.ai-card.tone-muted small {
  color: var(--ink-faint);
}

/* Skeleton de carga */
.ai-card.ai-skeleton span,
.ai-card.ai-skeleton strong,
.ai-card.ai-skeleton p {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--soft) 25%, var(--surface-hover) 50%, var(--soft) 75%);
  background-size: 200% 100%;
  animation: ai-shimmer 1.4s ease-in-out infinite;
}

.ai-card.ai-skeleton span {
  width: 34%;
  height: 0.7rem;
}

.ai-card.ai-skeleton strong {
  width: 72%;
  height: 0.95rem;
}

.ai-card.ai-skeleton p {
  width: 100%;
  height: 2.6rem;
}

@keyframes ai-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-card.ai-skeleton span,
  .ai-card.ai-skeleton strong,
  .ai-card.ai-skeleton p {
    animation: none;
  }
}

@media (max-width: 980px) {
  .ai-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Cerrada sigue en una sola línea (ellipsis); abierta puede envolver. */
  .ai-strip.open .ai-meta {
    white-space: normal;
  }
}

[data-theme="dark"] .ai-strip {
  background: var(--surface);
  border-color: var(--line);
}

[data-theme="dark"] .ai-card {
  background: var(--surface-alt);
}


/* ============================================================
   FASE 2 — Frontend profesional (2026-07-21)
   Banda de salud ejecutiva, sparklines uPlot, tablas con sticky
   header + cards mobile, toasts, skeletons de carga, blindaje
   responsive del login.
   ============================================================ */

/* ---- Blindaje anti-overflow horizontal (login 390px y global) ---- */
html,
body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

.login-view {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  overflow: hidden auto; /* permite scroll vertical si la tarjeta no cabe */
}

.login-shell {
  width: min(440px, 100%);
  max-width: 100%;
}

.login-card {
  max-width: 100%;
  min-width: 0;
}

.login-form {
  min-width: 0;
}

@media (max-width: 480px) {
  .login-view {
    padding: 0.75rem;
  }
  .login-card {
    padding: 1.9rem 1.1rem 1.25rem;
    border-radius: 14px;
    gap: 1rem;
  }
  .login-logo {
    width: 112px;
  }
}

/* Focus visible reforzado sobre el fondo oscuro del login */
.login-card .slider-handle:focus-visible,
.login-card .captcha-refresh:focus-visible,
.login-card .login-submit:focus-visible,
.login-card .login-help:focus-visible {
  outline: 3px solid rgba(45, 212, 191, 0.65);
  outline-offset: 2px;
}

/* Slot Cloudflare Turnstile (opcional por config pública) */
.turnstile-slot {
  min-height: 65px;
  display: grid;
  place-items: center;
}
.turnstile-slot.hidden {
  display: none;
}

/* ---- Banda de salud ejecutiva (above-the-fold) ---- */
.exec-health {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
}

.exec-kpi {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 38px;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.exec-kpi header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-width: 0;
}

.exec-kpi header span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exec-kpi > strong {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delta-chip {
  flex-shrink: 0;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--badge-bg);
  color: var(--ink-muted);
}

.delta-chip[data-tone="ok"] {
  background: var(--status-ok-soft);
  color: var(--status-ok);
}

.delta-chip[data-tone="warn"] {
  background: var(--status-warn-soft);
  color: var(--status-warn);
}

.delta-chip[data-tone="critical"] {
  background: var(--status-critical-soft);
  color: var(--status-critical);
}

.spark {
  min-width: 0;
  height: 38px;
  min-height: 38px;
}

.spark-tile {
  height: 30px;
  min-height: 30px;
  margin-top: 0.35rem;
}

@media (max-width: 1180px) {
  .exec-health {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .exec-health {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .exec-kpi > strong {
    font-size: 1rem;
  }
  .delta-chip {
    font-size: 12px;
    padding: 2px 6px;
  }
}

/* ---- Gráfico de tendencia uPlot (rail de cortes convertido) ---- */
.trend-line.trend-chart {
  display: block;
  height: 132px;
  min-height: 132px;
  overflow: visible;
  border-top: 2px solid var(--line);
  padding-top: 0.5rem;
  grid-template-columns: none;
}

.trend-line.trend-chart .u-over {
  cursor: pointer;
}

/* ---- Tablas profesionales ---- */
.data-table-section {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.5rem;
}

.data-table-section > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.data-table-section > header h3 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-strong);
}

.data-table-section > header span {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.data-table-wrap {
  min-height: 0;
  overflow: auto;
  max-height: 440px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--ink);
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0.55rem 0.7rem;
  background: var(--head);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.data-table th.num,
.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table tbody td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  min-width: 0;
}

/* Zebra sutil: filas principales impares (las de detalle van intercaladas) */
.data-table tbody tr:nth-child(4n + 3) td {
  background: var(--surface-alt);
}

.data-table tbody tr:not(.row-detail):hover td {
  background: var(--surface-hover);
}

.data-table tbody tr.row-open td {
  background: var(--soft);
}

/* Acento de estado en el borde de la primera celda */
.data-table tr[data-status="critical"] td:first-child {
  box-shadow: inset 3px 0 0 var(--status-critical);
}
.data-table tr[data-status="watch"] td:first-child {
  box-shadow: inset 3px 0 0 var(--status-warn);
}
.data-table tr[data-status="onTrack"] td:first-child {
  box-shadow: inset 3px 0 0 var(--status-ok);
}

.cell-project {
  display: block;
  font-weight: 700;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.data-table td small {
  display: block;
  font-size: 12px;
  color: var(--ink-muted);
}

.tone-ok { color: var(--status-ok); font-weight: 800; }
.tone-warn { color: var(--status-warn); font-weight: 800; }
.tone-critical { color: var(--status-critical); font-weight: 800; }
.tone-neutral { color: var(--ink-muted); }

.data-table .col-detail {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.row-toggle {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.row-toggle:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.row-toggle[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.row-detail td {
  background: var(--panel);
  padding: 0.7rem 0.9rem;
}

.detail-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.55rem 0.9rem;
}

.detail-fact {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.detail-fact small {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.detail-fact strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.data-table .empty-row td {
  text-align: center;
  color: var(--ink-muted);
  padding: 1.4rem 0.7rem;
}

/* Transformación a tarjetas en mobile */
@media (max-width: 720px) {
  .data-table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table thead {
    display: none;
  }

  .data-table tbody tr:not(.row-detail) {
    margin: 0 0 0.6rem;
    padding: 0.35rem 0.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
  }

  .data-table tbody tr:nth-child(4n + 3) td {
    background: transparent;
  }

  .data-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 0;
    padding: 0.3rem 0.7rem;
    text-align: right;
  }

  .data-table tbody td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-align: left;
  }

  .data-table tbody td:first-child::before {
    content: none;
  }

  .data-table tbody td.col-detail::before {
    content: none;
  }

  .data-table .cell-project {
    max-width: 60%;
    white-space: normal;
    text-align: right;
  }

  .data-table td small {
    display: none;
  }

  .row-toggle {
    width: 100%;
    padding: 0.5rem;
  }

  .row-detail td {
    padding: 0.4rem 0.7rem 0.7rem;
  }

  .row-detail td::before {
    content: none;
  }

  .detail-grid-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Toasts de red/estado ---- */
.toast-root {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 12000;
  display: grid;
  gap: 0.5rem;
  max-width: min(380px, calc(100vw - 2rem));
}

.toast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent);
  background: var(--ink-strong);
  color: var(--surface);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--shadow);
  animation: toast-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast-error {
  border-left-color: var(--status-critical);
}

.toast-warn {
  border-left-color: var(--status-warn);
}

.toast button {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
  opacity: 0.75;
}

.toast button:hover {
  opacity: 1;
}

.toast-out {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Skeletons de carga (mientras los fetch están en vuelo) ---- */
.workspace-main.is-loading .exec-kpi > strong,
.workspace-main.is-loading .kpi-tile > strong,
.workspace-main.is-loading .rrhh-kpis strong,
.workspace-main.is-loading .executive-card > strong,
.workspace-main.is-loading .human-metrics strong,
.workspace-main.is-loading .focus-facts strong,
.workspace-main.is-loading .bi-stat strong,
.workspace-main.is-loading .bi-mini strong {
  color: transparent !important;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--soft) 25%, var(--surface-hover) 50%, var(--soft) 75%);
  background-size: 200% 100%;
  animation: ai-shimmer 1.4s ease-in-out infinite;
}

.workspace-main.is-loading .spark {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .workspace-main.is-loading .exec-kpi > strong,
  .workspace-main.is-loading .kpi-tile > strong,
  .workspace-main.is-loading .rrhh-kpis strong,
  .workspace-main.is-loading .executive-card > strong,
  .workspace-main.is-loading .human-metrics strong,
  .workspace-main.is-loading .focus-facts strong,
  .workspace-main.is-loading .bi-stat strong,
  .workspace-main.is-loading .bi-mini strong {
    animation: none;
  }
}

/* ---- uPlot: ajustes de tema ---- */
.uplot,
.uplot * {
  font-family: "Manrope", sans-serif;
}

[data-theme="dark"] .u-select {
  background: rgba(45, 212, 191, 0.12);
}

[data-theme="dark"] .data-table .row-toggle {
  background: var(--surface-alt);
}

[data-theme="dark"] .toast {
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
}

[data-theme="dark"] .toast-error {
  border-left-color: var(--status-critical);
}

[data-theme="dark"] .toast-warn {
  border-left-color: var(--status-warn);
}

/* ---- Layout scrollable para módulos con contenido extendido (Fase 2) ----
   Antes: .human-shell tenía 2 filas fijas y overflow:hidden; al agregar
   la banda ejecutiva, el workspace y la tabla, las filas colapsaban.
   Ahora el módulo fluye en columna con scroll propio. */
.human-shell {
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
}

#moduleControl .gerencial-board {
  height: clamp(470px, 58vh, 680px);
}

#moduleControl .human-workspace {
  height: clamp(340px, 40vh, 500px);
}

#moduleLogistica.source-module {
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width: 980px) {
  #moduleControl .human-workspace {
    height: auto;
    min-height: 0;
  }
}

/* ---- moduleControl: flujo scrollable con banda + tendencia + board + tabla ---- */
#moduleControl {
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
}

.trend-section {
  min-width: 0;
  display: grid;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.trend-section > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.trend-section > header h3 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-strong);
}

.trend-section > header span {
  font-size: 12px;
  color: var(--ink-muted);
}

.trend-section .trend-line.trend-chart {
  border-top: 0;
  padding-top: 0;
  height: 120px;
  min-height: 120px;
}

/* ---- Dark mode: remanentes hardcodeados (Fase 2) ---- */
[data-theme="dark"] .app-topbar,
[data-theme="dark"] .gerencial-title,
[data-theme="dark"] .human-intro,
[data-theme="dark"] .rrhh-hero {
  background:
    linear-gradient(110deg, var(--surface-alt), var(--panel) 58%, var(--soft)) !important;
  color: var(--ink) !important;
  border-color: var(--line-strong) !important;
}

[data-theme="dark"] .gerencial-board,
[data-theme="dark"] .bi-panel,
[data-theme="dark"] .executive-card,
[data-theme="dark"] .rrhh-panel,
[data-theme="dark"] .rrhh-kpis article {
  color: var(--ink);
}

[data-theme="dark"] .bi-bars i {
  background:
    linear-gradient(90deg, var(--accent-bright) var(--plan), transparent var(--plan)),
    linear-gradient(90deg, var(--accent) var(--real), var(--line) var(--real));
}

[data-theme="dark"] .status-bar {
  background: var(--soft);
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
}

[data-theme="dark"] .app-topbar h1,
[data-theme="dark"] .gerencial-title strong {
  color: var(--ink-strong) !important;
}

[data-theme="dark"] .bi-project-tiles button.active {
  color: #062621;
}

[data-theme="dark"] .rrhh-kpis article strong,
[data-theme="dark"] .rrhh-panel header strong,
[data-theme="dark"] .un-brief h3,
[data-theme="dark"] .un-brief p,
[data-theme="dark"] .detail-grid .rrhh-row strong,
[data-theme="dark"] .detail-grid .rrhh-row span {
  color: var(--ink-strong);
}

[data-theme="dark"] .welcome-card,
[data-theme="dark"] .admin-panel {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}

[data-theme="dark"] .module-window .window-card {
  color: var(--ink);
}

/* ---- Mobile/tablet: flujo de página con scroll global (Fase 2) ----
   Antes el módulo quedaba comprimido en una fracción 1fr mínima entre
   topbar/banner/insights y el footer; ahora la página completa scrollea. */
@media (max-width: 980px) {
  .workspace-main {
    grid-template-rows: none;
    grid-auto-rows: auto;
    align-content: start;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .workspace-main.has-freshness-banner {
    grid-template-rows: none;
  }

  .module-panel.active {
    min-height: 0;
  }

  .human-shell,
  .source-module,
  #moduleLogistica.source-module {
    overflow: visible;
  }

  #moduleControl {
    overflow: visible;
  }

  #moduleControl .gerencial-board {
    height: auto;
    grid-template-rows: none;
    grid-auto-rows: auto;
    overflow: visible;
  }

  .gerencial-main .bi-indicators {
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .data-table tbody tr.row-detail {
    display: block;
    width: 100%;
    margin: -0.65rem 0 0.6rem;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--panel);
  }
}

[data-theme="dark"] .source-module > header {
  background:
    linear-gradient(110deg, var(--surface-alt), var(--panel) 58%, var(--soft)) !important;
  color: var(--ink) !important;
  border-color: var(--line-strong) !important;
}

/* ============================================================
   API keys — autoservicio (todos) + control global (admin)
   ============================================================ */

.apikeys-section {
  margin-top: 1rem;
}

.apikeys-intro {
  margin: 0.35rem 0 0.8rem;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.apikeys-intro a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.apikeys-intro a:hover {
  text-decoration: underline;
}

.apikeys-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.apikey-create-btn {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.apikey-create-btn:hover {
  filter: brightness(1.06);
}

.apikeys-status {
  color: var(--muted);
  font-size: 12px;
}

.apikeys-list {
  display: grid;
  gap: 0.45rem;
}

.apikey-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.apikey-row-main {
  display: grid;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.apikey-row-main strong {
  color: var(--ink-strong);
  font-size: 12.5px;
}

.apikey-meta {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apikey-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--ink);
}

.apikey-meta em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

.apikey-status {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.apikey-status-active {
  background: var(--status-ok-soft);
  color: var(--status-ok);
}

.apikey-status-expired {
  background: var(--status-warn-soft);
  color: var(--status-warn);
}

.apikey-status-revoked {
  background: var(--status-critical-soft);
  color: var(--status-critical);
}

.apikey-revoke {
  flex-shrink: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.85rem;
  background: transparent;
  color: var(--status-critical);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.apikey-revoke:hover {
  background: var(--status-critical-soft);
  border-color: var(--status-critical);
}

.apikeys-empty {
  padding: 1.4rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  text-align: center;
  color: var(--muted);
}

.apikeys-empty strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ink);
  font-size: 13px;
}

.apikeys-empty p {
  margin: 0;
  font-size: 12.5px;
}

.apikeys-empty-inline {
  margin: 0.4rem 0;
  color: var(--muted);
  font-size: 12.5px;
}

/* Modal crear key — reutiliza el patrón welcome-modal */
.apikey-modal-card {
  max-width: 460px;
}

.apikey-form {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.6rem;
  min-width: 0;
}

.apikey-form label {
  display: grid;
  gap: 0.3rem;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}

.apikey-form input,
.apikey-form select {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  background: var(--surface);
  color: var(--ink-strong);
  font: inherit;
  font-weight: 400;
}

.apikey-form input:focus,
.apikey-form select:focus {
  outline: 2px solid var(--focus);
  border-color: var(--accent);
}

.apikey-modal-actions {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.apikey-modal-actions button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.apikey-modal-actions button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.apikey-modal-actions .apikey-secondary {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}

#apiKeyFormStatus,
#apiKeyCopyStatus {
  min-height: 1rem;
  color: var(--muted);
  font-size: 12px;
}

.apikey-result {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.6rem;
  min-width: 0; /* grid item de welcome-card: permitir encoger bajo min-content */
}

.apikey-result p {
  margin: 0;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
}

.apikey-secret-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0; /* grid item de .apikey-result: permitir encoger bajo min-content */
}

.apikey-secret-row code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--soft);
  color: var(--ink-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  user-select: all;
}

.apikey-secret-row button {
  flex-shrink: 0;
  border: 0;
  border-radius: 10px;
  padding: 0 1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* El botón de nav cambia de rotulo para usuarios no admin: sin sufijo "Acceso" */
#adminUsersBtn.plain::after {
  content: none;
}

@media (max-width: 720px) {
  .apikey-row {
    flex-wrap: wrap;
  }

  .apikey-meta {
    white-space: normal;
  }

  .apikey-secret-row {
    flex-direction: column;
  }

  .apikey-secret-row button {
    min-height: 40px;
  }
}

[data-theme="dark"] .apikey-row {
  background: var(--panel);
}

[data-theme="dark"] .apikey-form input,
[data-theme="dark"] .apikey-form select {
  background: var(--surface-alt);
  color: var(--ink-strong);
}

[data-theme="dark"] .apikey-modal-actions .apikey-secondary {
  color: var(--ink);
}


/* ============================================================
   NORMALIZACIÓN TIPOGRÁFICA Y ANTI-SOLAPES (fix/tipografia-modulos)
   Capa final del cascade: gana por orden de fuente sin !important.
   Escala definida en tokens.css (--fs-*). Base intacta:
   html { font-size: 81.25% } (13px). Objetivo: una sola jerarquía
   consistente en los 6 módulos, tira Insights, banda de salud,
   tablas y modales; cero contenido solapado.
   ============================================================ */

/* ---- Títulos de módulo y encabezados de panel ---- */
.app-topbar h1,
.source-module h2,
.parity-module.source-module > header h2,
.rrhh-hero h2,
.human-intro h2,
.un-brief h3,
.gerencial-title strong,
.welcome-card h2 {
  font-size: var(--fs-title-module);
  line-height: 1.15;
}

/* ---- Subtítulos de sección (h3 de paneles, tablas, tendencia) ---- */
.data-table-section > header h3,
.trend-section > header h3,
.ai-strip-title,
.window-card h3 {
  font-size: var(--fs-title-section);
}

/* ---- Numeral KPI: una sola escala en todas las tarjetas ---- */
.exec-kpi > strong,
.kpi-tile strong,
.rrhh-kpis strong,
.parity-module .kpi-tile strong,
.parity-module .rrhh-kpis strong,
.parity-module .rrhh-panel header strong,
.executive-card strong,
.human-metrics strong,
.bi-gauge strong,
.bi-semi strong {
  font-size: var(--fs-kpi);
  line-height: 1.1;
}

/* ---- Labels de tarjeta: 12px uppercase en todo ---- */
.kpi-tile span,
.rrhh-kpis span,
.exec-kpi header span,
.executive-card span,
.executive-card small,
.human-metrics span,
.human-metrics small,
.focus-facts span,
.focus-facts small,
.un-picker span,
.period-picker span {
  font-size: var(--fs-label);
}

/* ---- Metadatos y chips ---- */
.kpi-tile small,
.rrhh-kpis small,
.ops-signal span,
.ai-meta,
.ai-card .ai-card-module,
.data-table-section > header span,
.trend-section > header span {
  font-size: var(--fs-meta);
}

/* ---- Cuerpo y tablas ---- */
.source-module p,
.data-table,
.rrhh-panel p,
.human-intro p,
.un-brief p {
  font-size: var(--fs-body);
}

/* ---- Pickers del topbar: fondo sólido (nada se trasluce) ---- */
.un-picker,
.period-picker {
  background: var(--surface);
}

/* ---- Chips: nunca salirse del encabezado ---- */
.ops-signal span {
  white-space: nowrap;
}

.parity-module .module-signal {
  max-width: 100%;
}

/* Cobertura RRHH como un chip más de la fila (movida dentro de
   .module-signal: antes era un pill hermano que se salía del header) */
.rrhh-hero .module-signal > strong {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 2rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(37, 99, 170, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px rgba(17, 25, 79, 0.10);
  color: var(--ink-strong) !important;
  font-family: "Manrope", sans-serif;
  font-size: var(--fs-meta);
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
}

/* Chips legibles en dark: fondo claro + texto claro = ilegible */
[data-theme="dark"] .ops-signal span,
[data-theme="dark"] .rrhh-hero .module-signal > strong {
  border-color: var(--line-strong);
  background: var(--surface-alt);
  box-shadow: none;
  color: var(--ink-strong) !important;
}

[data-theme="dark"] .gerencial-title::after {
  border-color: var(--line-strong);
  background: var(--surface-alt);
  color: var(--ink-strong);
}

/* Bloque amarillo decorativo al borde derecho de los headers de módulo:
   quedaba como mancha fantasma sobre la zona de los chips */
.parity-module.source-module > header::after {
  content: none;
}

/* ---- Modales: valores grandes pero dentro de escala ---- */
.module-window.zoom-mode #windowValue {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
}

.module-window.soon-mode #windowValue {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
}

/* ---- Footer sólido también en dark (compañero del fix claro) ---- */
[data-theme="dark"] .status-carousel {
  background: var(--surface-alt);
  border-color: var(--line);
  box-shadow: none;
}

[data-theme="dark"] .status-carousel::after {
  background: linear-gradient(90deg, var(--surface-alt), transparent 12%, transparent 88%, var(--surface-alt));
}

/* El fade lateral del carrusel en modo claro acompaña al fondo --soft */
.status-carousel::after {
  background: linear-gradient(90deg, var(--soft), transparent 12%, transparent 88%, var(--soft));
}

/* Ajustes finos Detalle Operativo (rama widgets-neural-cmd):
   el valor del gauge usa píldora clara en ambos temas → texto navy fijo;
   ADICIONALES gana una columna (leyenda CLP + % completa) */
.bi-gauge-card .bi-gauge strong,
.bi-gauge-card .bi-semi strong,
#biBilledGauge strong {
  color: #17233f;
}

/* ============================================================
   Gráficos RRHH (parte 3): tendencia uPlot, donas y barras por UN
   ============================================================ */
.rrhh-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.rrhh-chart {
  padding: 14px;
}

.rrhh-chart > header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.rrhh-chart > header span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 700;
}

.rrhh-chart > header strong {
  font-size: 0.92rem;
  font-weight: 800;
}

.rrhh-chart-wide {
  grid-column: 1 / -1;
}

.rrhh-chart-canvas {
  width: 100%;
  min-height: 180px;
}

.rrhh-chart-empty {
  margin: 0;
  padding: 24px 8px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.rrhh-chart .u-legend {
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.rrhh-un-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rrhh-un-bar-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.rrhh-un-bar-label {
  font-weight: 700;
  white-space: nowrap;
}

.rrhh-un-bar-track {
  position: relative;
  height: 14px;
  background: var(--line);
  border-radius: 7px;
  overflow: hidden;
}

.rrhh-un-bar-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 7px;
}

.rrhh-un-bar-track .bar-plan {
  width: var(--w);
  background: color-mix(in srgb, var(--ink-muted) 45%, transparent);
}

.rrhh-un-bar-track .bar-real {
  width: var(--w);
  background: var(--accent);
  opacity: 0.9;
}

.rrhh-un-bar-row b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .rrhh-charts {
    grid-template-columns: 1fr;
  }

  .rrhh-chart-canvas {
    min-height: 150px;
  }
}

/* ============================================================
   Sidebar colapsable (parte 2): rail de íconos ~64px con tooltips,
   estado persistido y transición suave.
   ============================================================ */
.app-shell {
  transition: grid-template-columns 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-toggle {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: var(--body-bg);
  color: var(--navy);
}

.side-nav button svg,
.sidebar-logout svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-right: 0.55rem;
}

/* ---- Estado colapsado (rail de íconos) ---- */
.app-shell.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

.sidebar-collapsed .workspace-sidebar {
  padding-inline: 0.4rem;
}

.sidebar-collapsed .brand {
  justify-content: center;
  padding-bottom: 0.6rem;
}

.sidebar-collapsed .brand img {
  width: 40px;
}

.sidebar-collapsed .brand div,
.sidebar-collapsed .side-section-title,
.sidebar-collapsed .nav-label,
.sidebar-collapsed #sessionUserBadge,
.sidebar-collapsed #analisisLink {
  display: none;
}

.sidebar-collapsed .sidebar-toggle {
  margin-left: 0;
  transform: rotate(180deg);
}

.sidebar-collapsed .side-nav button,
.sidebar-collapsed .sidebar-logout,
.sidebar-collapsed .theme-toggle {
  justify-content: center;
  padding: 0;
  min-height: 44px;
}

.sidebar-collapsed .side-nav button svg,
.sidebar-collapsed .sidebar-logout svg {
  margin-right: 0;
}

.sidebar-collapsed .side-nav button.active {
  box-shadow: inset 3px 0 0 var(--red);
}

/* Tooltips en rail (hover y foco de teclado) */
.sidebar-collapsed .side-nav button,
.sidebar-collapsed .sidebar-logout,
.sidebar-collapsed .theme-toggle {
  overflow: visible;
}

.sidebar-collapsed [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  z-index: 60;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sidebar-collapsed [data-tip]:hover::after,
.sidebar-collapsed [data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ---- Mobile (≤760px): el rail móvil ahora usa los íconos reales
   (reemplaza el truco de ::first-letter de la versión sin íconos) ---- */
@media (max-width: 760px) {
  .side-nav button,
  .side-nav a,
  .sidebar-logout {
    justify-content: center;
  }

  .side-nav button .nav-label,
  .sidebar-logout .nav-label,
  .side-nav a .nav-label {
    display: none;
  }

  .side-nav button svg,
  .sidebar-logout svg {
    margin-right: 0;
    width: 20px;
    height: 20px;
  }

  .side-nav button::first-letter,
  .side-nav a::first-letter,
  .sidebar-logout::first-letter {
    font-size: 0;
  }

  .sidebar-toggle {
    display: none; /* en mobile el rail ya es el estado natural */
  }

  .brand div,
  .side-section-title,
  #sessionUserBadge,
  #analisisLink {
    display: none;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 74px minmax(0, 1fr);
  }
}

.rrhh-chart .bi-legend {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.34rem;
  padding: 0;
  color: var(--muted, var(--ink-muted));
  font-size: 12.5px;
  font-weight: 800;
}

.rrhh-chart .bi-legend span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  line-height: 1.25;
  white-space: nowrap;
}