:root {
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #cbd5e1;
  --text: #1e293b;
  --text-muted: #64748b;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --success: #02a45a;
  --warning: #d97706;
  --danger: #dc2626;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --radius: 10px;
  --font: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

/* Portal de autenticación */
body.auth-required {
  overflow: hidden;
}

.auth-portal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.9), transparent 30rem),
    radial-gradient(circle at 88% 88%, rgba(148, 163, 184, 0.2), transparent 34rem),
    #e5e7eb;
  overflow-y: auto;
}

.auth-portal[hidden] {
  display: none;
}

.auth-portal-shell {
  width: min(100%, 1040px);
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.18);
}

.auth-portal-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--orizon-text);
  background:
    linear-gradient(145deg, rgba(4, 120, 87, 0.1), transparent 38%),
    var(--orizon-surface);
  isolation: isolate;
  overflow: hidden;
}

.auth-portal-brand::before,
.auth-portal-brand::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}

.auth-portal-brand::before {
  width: 360px;
  height: 360px;
  right: -190px;
  top: -130px;
}

.auth-portal-brand::after {
  width: 270px;
  height: 270px;
  left: -145px;
  bottom: -120px;
}

.auth-brand-mark {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 3rem;
  border-radius: 14px;
  background: #f8fafc;
  color: #202733;
  font-size: 1.35rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
}

.auth-eyebrow {
  display: block;
  margin-bottom: 0.8rem;
  color: #94a3b8;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-portal-brand h1 {
  max-width: 490px;
  margin: 0 0 1.25rem;
  color: #fff;
  font-size: clamp(2.15rem, 4.2vw, 3.55rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.auth-portal-brand p {
  max-width: 460px;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1.7;
}

.auth-trust-list {
  display: grid;
  gap: 0.8rem;
  margin: 2.5rem 0;
  list-style: none;
  color: #e2e8f0;
  font-size: 0.88rem;
}

.auth-trust-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.auth-trust-list li span {
  width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.72rem;
}

.auth-portal-brand small {
  color: #94a3b8;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.auth-portal-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.25rem, 5vw, 4.8rem);
  background: #fff;
}

.auth-mobile-brand {
  display: none;
}

.auth-panel-heading {
  margin-bottom: 2rem;
}

.auth-panel-heading .auth-eyebrow {
  color: #64748b;
}

.auth-panel-heading h2 {
  margin: 0 0 0.55rem;
  color: #111827;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.auth-panel-heading p {
  color: #6b7280;
  font-size: 0.92rem;
}

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

.auth-field {
  display: grid;
  gap: 0.5rem;
  color: #374151;
  font-size: 0.82rem;
  font-weight: 600;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 1rem;
  color: #9ca3af;
  font: 600 0.82rem var(--font);
  pointer-events: none;
}

.auth-lock-icon {
  font-size: 0.48rem;
}

.auth-input-wrap input {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 3.6rem 0.75rem 2.8rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #f9fafb;
  color: #111827;
  font: 500 0.92rem var(--font);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.auth-input-wrap input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.auth-input-wrap input:focus {
  border-color: #4b5563;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(75, 85, 99, 0.1);
}

.auth-password-toggle {
  position: absolute;
  right: 0.85rem;
  border: 0;
  background: transparent;
  color: #4b5563;
  font: 700 0.72rem var(--font);
  cursor: pointer;
}

.auth-form-options,
.auth-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.auth-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
  font-size: 0.78rem;
  cursor: pointer;
}

.auth-check input {
  width: 16px;
  height: 16px;
  accent-color: #374151;
}

.auth-text-button {
  border: 0;
  background: none;
  color: #374151;
  font: 700 0.78rem var(--font);
  cursor: pointer;
}

.auth-text-button:hover {
  text-decoration: underline;
}

.auth-login-error,
.auth-help-message {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  font-size: 0.79rem;
}

.auth-login-error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.auth-help-message {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #4b5563;
}

.auth-submit-btn {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.1rem 0.8rem 1.25rem;
  border: 1px solid #111827;
  border-radius: 10px;
  background: var(--orizon-green);
  color: #fff;
  font: 700 0.9rem var(--font);
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(31, 41, 55, 0.16);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.auth-submit-btn:hover {
  transform: translateY(-1px);
  background: var(--orizon-green-hover);
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.22);
}

.auth-submit-btn:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

.auth-upload-entry {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid #e5e7eb;
}

.auth-upload-entry-label {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}

.auth-upload-entry-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.auth-upload-entry-link:hover {
  border-color: color-mix(in srgb, var(--orizon-green, #0f766e) 55%, #d1d5db);
  background: color-mix(in srgb, var(--orizon-green, #0f766e) 7%, #fff);
}

.auth-upload-entry-link strong {
  display: block;
  font-size: 0.92rem;
  color: #111827;
}

.auth-upload-entry-link small {
  display: block;
  margin-top: 0.2rem;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 500;
}

.auth-upload-entry-link > span:last-child {
  color: var(--orizon-green, #0f766e);
  font-weight: 700;
  flex-shrink: 0;
}

.auth-panel-footer {
  justify-content: center;
  margin-top: 1.5rem;
  color: #9ca3af;
  font-size: 0.7rem;
}

@media (max-width: 820px) {
  .auth-portal {
    align-items: start;
    padding: 1rem;
  }

  .auth-portal-shell {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .auth-portal-brand {
    display: none;
  }

  .auth-portal-panel {
    min-height: calc(100vh - 2rem);
    padding: 2rem clamp(1.3rem, 7vw, 3rem);
  }

  .auth-mobile-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
    color: #111827;
  }

  .auth-mobile-brand .auth-brand-mark {
    width: 38px;
    height: 38px;
    margin: 0;
    background: var(--orizon-green);
    color: #fff;
    border-radius: 10px;
    font-size: 1rem;
  }
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
  gap: 1rem;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  background: linear-gradient(135deg, var(--accent), #6366f1);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.header h1 {
  font-size: 1.25rem;
  font-weight: 600;
}

.subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.nav {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.25rem 0.35rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.nav-group.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}

.nav-group-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 0.35rem;
}

.nav-group-btns {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.nav-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.85rem;
  transition: all 0.15s;
}

.nav-btn:hover { border-color: var(--accent); color: var(--accent); background: #eff6ff; }
.nav-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.subnav {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.subnav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.82rem;
}

.subnav-btn:hover { color: var(--accent); border-color: var(--border); }
.subnav-btn.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight: 600;
}

.qms-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 1rem;
}
.qms-tab {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted, #64748b);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
}
.qms-tab:hover { color: var(--accent); border-color: var(--border); }
.qms-tab.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight: 600;
}
.qms-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.qms-toolbar input,
.qms-toolbar select {
  min-width: 12rem;
}

.guide {
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
    var(--surface);
}

.guide.hidden { display: none; }

.guide-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.guide-header h3 { margin: 0 0 0.25rem; }

.guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.guide-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.guide-step.is-done {
  border-color: color-mix(in srgb, #02A45A 35%, var(--border));
  background: color-mix(in srgb, #02A45A 8%, var(--surface-2));
}

.guide-step.is-optional .guide-idx {
  opacity: 0.7;
}

.guide-idx {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.guide-step.is-done .guide-idx {
  background: #02A45A;
  border-color: #02A45A;
  color: #fff;
}

.guide-body strong { display: block; font-size: 0.92rem; }
.guide-body p { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--text-muted); }
.guide-body em { font-style: normal; font-weight: 500; color: var(--text-muted); font-size: 0.8rem; }

.guide-progress-row {
  padding: 0.35rem 0.25rem 0;
}

@media (max-width: 720px) {
  .guide-step {
    grid-template-columns: auto 1fr;
  }
  .guide-step .guide-go {
    grid-column: 2;
    justify-self: start;
  }
}

/* Main */
.main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(1rem, 2vw, 2rem);
}

.panel-assets.active ~ * { }
.main:has(.panel-assets.active) { max-width: none; }

.panel-assets .badge {
  display: inline-block;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  color: var(--text);
  padding: 0.1rem 0.45rem;
  border-radius: 20px;
  font-size: 0.7rem;
}

.panel { display: none; animation: fadeIn 0.2s ease; }
.panel.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.hero {
  margin-bottom: 2rem;
}

.hero h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.hero p { color: var(--text-muted); max-width: 600px; }

/* Inicio: vista global compacta */
.home-overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.home-overview-header h2,
.home-overview-header p,
.home-command-card h3,
.home-command-card h4 {
  margin-top: 0;
}

.home-overview-header h2 { margin-bottom: 0.2rem; }
.home-overview-header p { margin: 0; color: var(--text-muted); }

.home-overview-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.home-overview-status .status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--success, #16a34a);
}

.home-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.8rem;
}

.home-kpi-card {
  min-width: 0;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.home-kpi-card:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.home-kpi-warn { border-left: 3px solid #d97706; }
.home-kpi-danger { border-left: 3px solid var(--danger, #dc2626); }
.home-kpi-value { font: 700 1.35rem/1 var(--mono); }
.home-kpi-label { color: var(--text-muted); font-size: 0.76rem; }

.home-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  grid-template-rows: minmax(250px, auto) minmax(230px, auto);
  gap: 0.8rem;
  align-items: stretch;
}

.home-command-card {
  min-width: 0;
  margin: 0;
  padding: 0.9rem;
  overflow: hidden;
}

.home-command-card > .row-between { gap: 0.75rem; }
.home-command-card h3 { margin-bottom: 0.2rem; }
.home-command-card h4 { font-size: 0.82rem; margin-bottom: 0.45rem; }
.home-command-card .hint { margin-top: 0; }

.home-command-card .audit-doc-dashboard-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.55rem 0;
}

.home-command-card .audit-doc-kpi { padding: 0.5rem; }
.home-command-card .audit-doc-kpi strong { font-size: 1rem; }
.home-command-card .audit-doc-dashboard-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(145px, 0.6fr);
  gap: 0.65rem;
  margin-bottom: 0.25rem;
}

.home-command-card #audit-doc-category-bars .audit-doc-category {
  margin-bottom: 0.4rem;
}

.home-command-card #audit-doc-category-bars .audit-doc-category:nth-child(n+5) {
  display: none;
}

.home-command-card .doc-control-explanation {
  display: none;
}

.home-card-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  cursor: pointer;
  font: 600 0.78rem/1.2 inherit;
  white-space: nowrap;
}

.home-compliance-alerts { margin: 0; }
.home-compliance-alert-list ul { margin-bottom: 0; }
.home-compliance-alert-list li:nth-child(n+5) { display: none; }

.home-risk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
  gap: 0.8rem;
  align-items: start;
}

.home-top-risk-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
}

.home-top-risk-list li {
  padding-left: 0.15rem;
  font-size: 0.78rem;
}

.home-top-risk-list strong,
.home-top-risk-list span {
  display: block;
}

.home-top-risk-list span {
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.home-guide-card { margin: 0; background: var(--surface); }
.home-guide-card #guide-steps { margin-bottom: 0; }
.home-guide-card #guide-steps > li:nth-child(n+5) { display: none; }

.home-more-details {
  margin-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.home-more-details > summary {
  padding: 0.7rem 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}

.home-more-content { padding-top: 0.25rem; }

@media (max-width: 1050px) {
  .home-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-command-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  .home-command-card .audit-doc-dashboard-grid,
  .home-risk-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .home-overview-header { flex-direction: column; }
  .home-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-command-grid { grid-template-columns: 1fr; }
  .home-command-card .audit-doc-dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-command-card { overflow: visible; }
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--mono);
}

.stat-label { font-size: 0.8rem; color: var(--text-muted); }
.stat-alert .stat-value { color: var(--warning); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.card h3 {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-weight: 500;
}

.level-bar-row {
  display: grid;
  grid-template-columns: 12px 120px 1fr 32px;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.level-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.level-bar-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.level-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}

.level-count {
  text-align: right;
  font-family: var(--mono);
  color: var(--text-muted);
}

.wizard-hint {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9rem;
  color: var(--text);
}

/* Panel headers */
.panel-header {
  margin-bottom: 1.5rem;
}

.panel-header h2 { font-size: 1.4rem; margin-bottom: 0.25rem; }
.panel-header p { color: var(--text-muted); font-size: 0.9rem; }
.panel-header.row-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th {
  background: #e2e8f0;
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--text);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.data-table td {
  padding: 0.65rem 1rem;
  border-top: 1px solid #e2e8f0;
}

.data-table tr:hover td { background: #f1f5f9; }
.row-alert td { background: #fef2f2; }

code {
  font-family: var(--mono);
  font-size: 0.8rem;
  background: #e2e8f0;
  color: #334155;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.badge {
  display: inline-block;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  color: var(--text);
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  font-size: 0.75rem;
}

.badge-type { color: var(--text-muted); }

/* Toolbar */
.toolbar {
  margin-bottom: 1rem;
}

.toolbar label, .inline-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

select, textarea, input[type="text"] {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.9rem;
}

select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Form */
.scenario-form { max-width: 800px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.field.span-2 { grid-column: span 2; }
.field.span-4 { grid-column: span 4; }

.field textarea, .field select { width: 100%; }

.fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.fieldset legend {
  padding: 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.risk-preview-wrap { justify-content: flex-end; }
.field-label { font-size: 0.8rem; }

.risk-preview {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  background: #e2e8f0;
  color: var(--text);
  border: 1px solid var(--border);
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Buttons */
.btn {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--danger); border-color: var(--danger); }

.btn-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.btn-icon:hover { background: rgba(255,26,0,0.15); color: var(--danger); }

/* Risk pills */
.risk-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #111;
  min-width: 2rem;
  text-align: center;
}

/* Matrix */
.matrix-norm-card {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.1rem;
}
.matrix-norm-card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}
.matrix-norm-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.matrix-legend {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.legend-item {
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #111;
}

.matrix-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.matrix-y-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.5rem;
}

.matrix-x-label {
  grid-column: 2;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.5rem;
}

.risk-matrix-grid {
  display: grid;
  gap: 3px;
  min-height: 400px;
}

.matrix-corner { background: transparent; }

.matrix-axis-x, .matrix-axis-y {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: #e2e8f0;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25rem;
}

.matrix-cell {
  border-radius: 6px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: var(--shadow);
  transition: transform 0.1s;
}

.matrix-cell:hover { transform: scale(1.02); z-index: 1; }

.cell-level {
  font-weight: 700;
  font-size: 1.1rem;
}

.cell-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
}

.bubble {
  border: 1px solid var(--orizon-border);
  background: rgba(255, 255, 255, 0.82);
  color: var(--orizon-ink);
  font-size: 0.6rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--mono);
}

.bubble.more { background: var(--orizon-surface-alt); }

.cell-count {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.7;
}

/* Footer */
.footer {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .header { padding: 1rem; }
  .main { padding: 1rem; }
  .form-grid { grid-template-columns: 1fr; }
  .field.span-2, .field.span-4 { grid-column: span 1; }
  .assets-layout { grid-template-columns: 1fr; }
  .asset-detail { position: static; }
}

/* Assets panel — redesigned */
.assets-shell { display: flex; flex-direction: column; gap: 1.25rem; }

.assets-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}

.assets-header h2 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.assets-header p { color: var(--text-muted); font-size: 0.9rem; }

.assets-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}

.kpi-top { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; }
.kpi-value { font-size: 1.75rem; font-weight: 700; font-family: var(--mono); line-height: 1; }
.kpi-label { font-size: 0.8rem; color: var(--text-muted); }
.kpi-sub { font-size: 0.8rem; color: var(--text-muted); }
.text-warn { color: var(--warning); font-weight: 600; }

.progress-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
  margin: 0.5rem 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), #34d399);
  border-radius: 99px;
  transition: width 0.35s ease;
  width: 0%;
}

.assets-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow);
}

.search-box {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 0.75rem;
}

.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.search-icon { color: var(--text-muted); flex-shrink: 0; }

.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.55rem 0;
  font-family: var(--font);
  font-size: 0.9rem;
  outline: none;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filter-chip select {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  min-width: 110px;
}

.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.view-btn {
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--font);
}

.view-btn:hover { background: #eff6ff; color: var(--accent); }
.view-btn.active { background: var(--accent); color: #fff; }

.btn-compact { padding: 0.4rem 0.75rem; font-size: 0.8rem; }

.assets-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1rem;
  align-items: start;
}

.assets-layout.detail-open { grid-template-columns: 1fr 380px; }
.assets-layout:not(.detail-open) { grid-template-columns: 1fr; }

.assets-list-panel { min-width: 0; }

/* ⚠ Dos reglas del shell hay que anularlas acá, y las dos son globales:
   `body.shell-modern .table-wrap td:first-child` fija la primera columna de
   **toda** tabla envuelta, y `body.risk-focus-mode .assets-table-wrap` le pone
   un alto máximo que reintroduce el scroll interno. Se anulan solo para el
   inventario: sacarlas del shell cambiaría todas las tablas del producto, que es
   más de lo que este rediseño abarca. */
body.shell-modern .assets-table-wrap th:first-child,
body.shell-modern .assets-table-wrap td:first-child {
  position: static !important;
  left: auto !important;
}

body.risk-focus-mode .assets-table-wrap,
.assets-table-wrap {
  max-height: none !important;
  min-height: 0 !important;
}

/* Sin alto máximo, sin scroll propio y sin encabezado fijo. Los tres existían
   para una tabla de quince columnas que no entraba en pantalla; con seis y la
   paginación de a 10, la tabla fluye en la página y hay un solo scroll.

   Los anchos de columna viven en el bloque de la tabla unificada, más abajo:
   acá había medidas de columnas que ya no existen (`col-id`, `col-ref`,
   `col-dept`, `col-cia`), que es lo que hacía que el `sticky` volviera después
   de sacarlo desde otro lado del archivo. */
.assets-table-wrap { overflow-x: auto; }

.asset-row { cursor: pointer; transition: background 0.1s; }
.asset-row:hover td { background: #f1f5f9; }
.asset-row.row-selected td { background: #dbeafe !important; box-shadow: inset 3px 0 0 var(--accent); }

.asset-cell-name { display: flex; flex-direction: column; gap: 0.2rem; }
.asset-name-line { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.asset-indent-0 { padding-left: 0; }
.asset-indent-1 { padding-left: 1.25rem; }
.asset-indent-2 { padding-left: 2rem; }

.type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.type-pr { background: #dcfce7; color: #166534; }
.type-sp { background: #e0e7ff; color: #3730a3; }

.asset-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.cia-mini {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.cia-dot {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--mono);
  color: #111;
  border: 1px solid rgba(0,0,0,0.08);
}

.cia-dot.empty { background: #f1f5f9; color: #94a3b8; border-style: dashed; }

.value-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: #111;
}

.assets-footnote {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  padding-left: 0.25rem;
}

/* Detail panel */
.asset-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.asset-detail.hidden { display: none; }

.detail-header {
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #f8fafc, var(--surface));
}

.detail-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.detail-header h3 { font-size: 1.05rem; line-height: 1.35; margin-bottom: 0.25rem; }
.detail-ref { font-family: var(--mono); font-size: 0.75rem; color: var(--text-muted); }

.detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.25rem;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.detail-info-item { display: flex; flex-direction: column; gap: 0.1rem; }
.detail-info-item span:first-child { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.detail-info-item strong { font-weight: 500; }

.valuation-form { padding: 1rem 1.25rem; }
.detail-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.cia-cards { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }

.cia-card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cia-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.cia-card-head strong { font-family: var(--mono); font-size: 1.1rem; }
.cia-card input[type="range"] { width: 100%; accent-color: var(--accent); }
.cia-card.cia-c input[type="range"] { accent-color: #2563eb; }
.cia-card.cia-i input[type="range"] { accent-color: #7c3aed; }
.cia-card.cia-a input[type="range"] { accent-color: #059669; }
.cia-scale { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--text-muted); }

.valor-hero {
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

.valor-hero-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.valor-hero-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 0.35rem 0; }
.valor-hero strong { font-size: 2.25rem; font-family: var(--mono); line-height: 1; }
.valor-formula { font-size: 0.75rem; color: var(--text-muted); }

.detail-type-field { margin-bottom: 1rem; }
.detail-type-field select { width: 100%; }

/* Estado del guardado de la valoración.
   ⚠ Sin `display` propio: JS lo muestra y lo oculta con el atributo `hidden`, y
   un `display` declarado acá le ganaría (autor > user-agent) y dejaría el cartel
   pegado en pantalla. Es la misma trampa que `.ciso-panel` y `.compliance-state`,
   que sí necesitan el override `[hidden] { display: none !important }` porque
   declaran el suyo. */
.valuation-status {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-muted);
  background: var(--surface-2);
}
.valuation-status-ok { border-color: #86efac; background: #f0fdf4; color: #166534; }
.valuation-status-pending { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.valuation-status-error { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }

.detail-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.btn-block { width: 100%; }

.ciso-advanced {
  border-top: 1px solid var(--border);
  padding: 0.75rem 1.25rem 1rem;
}

.ciso-advanced summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-muted);
  user-select: none;
}

.ciso-advanced pre { margin-top: 0.75rem; }

.parent-readonly-notice {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.8rem;
  color: #166534;
  margin-bottom: 1rem;
}

.value-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #111;
}

.badge-source { font-size: 0.65rem; }
.badge-lr_matrix { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.badge-atenas_borrador { background: #dcfce7; border-color: #86efac; color: #166534; }
.badge-merged { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.badge-pending { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

.row-pending td { background: #fffbeb; }
.row-parent td { background: #f8fafc; }
.row-parent .asset-name-line { font-weight: 600; }

.badge-parent { background: #dcfce7; border-color: #86efac; color: #166534; font-size: 0.7rem; }
.badge-synthetic_parent { background: #f3e8ff; border-color: #d8b4fe; color: #6b21a8; }

@media (max-width: 1100px) {
  .assets-kpis { grid-template-columns: 1fr; }
  .assets-layout,
  .assets-layout.detail-open { grid-template-columns: 1fr; }
  .asset-detail { position: static; max-height: none; }
  /* Sin alto máximo: la tabla ya no tiene scroll propio en ningún tamaño. */
}

@media (max-width: 768px) {
  .main:has(.panel-assets.active) { max-width: 100%; }
  .filter-group { width: 100%; }
  .filter-chip { flex: 1; }
  .filter-chip select { width: 100%; min-width: 0; }
}

.row-selected td { background: #eff6ff; }

.btn-ghost-sm {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost-sm:hover { color: var(--accent); border-color: var(--accent); }

.cia-cell { text-align: center; font-family: var(--mono); font-weight: 600; }
.asset-name { font-weight: 500; }

.btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.btn-sm:hover { background: var(--accent-hover); }

.btn-icon-row {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.btn-icon-row:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.quality-list { list-style: none; font-size: 0.85rem; }
.quality-list li { padding: 0.4rem 0; border-bottom: 1px solid #e2e8f0; }
.qc-error { color: #b91c1c; }
.qc-warn { color: #b45309; }
.qc-info { color: var(--text-muted); }
.qc-ok { color: #166534; }

.analytics-inline { font-size: 0.9rem; color: var(--text-muted); }
.bar-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; align-items: center; margin-bottom: 0.35rem; font-size: 0.85rem; }
.bar-row.clickable { cursor: pointer; border-radius: 6px; padding: 0.25rem 0.35rem; }
.bar-row.clickable:hover { background: #f1f5f9; }
.work-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.work-queue-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  background: var(--surface-2);
}
.work-queue-list .wq-title { font-weight: 600; font-size: 0.92rem; }
.work-queue-list .wq-detail { font-size: 0.8rem; color: var(--text-muted, #64748b); margin-top: 0.15rem; }
.work-queue-list .wq-high { border-left: 3px solid #FF1A00; }
.work-queue-list .wq-medium { border-left: 3px solid #FFA600; }
.work-queue-list .wq-empty { color: var(--text-muted, #64748b); border-style: dashed; }
.audit-bridge-result { margin-bottom: 0.75rem; font-size: 0.85rem; }
.audit-bridge-result table { width: 100%; font-size: 0.8rem; }
.audit-bridge-result.hidden { display: none; }

/* Cabina fullscreen para completar controles de auditoría */
body.audit-cabin-open { overflow: hidden; }

.audit-review-cabin {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
}

.audit-review-cabin.hidden { display: none; }

.audit-cabin-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/*
 * Los tres ejes de `audit_readiness`. Van en una caja con divisiones y no como tres
 * textos sueltos: son magnitudes distintas del mismo expediente y se leen juntas.
 */
.audit-cabin-axes {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.audit-cabin-axis {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.8rem;
  border-right: 1px solid var(--border);
}

.audit-cabin-axis:last-child { border-right: 0; }

.audit-cabin-axis-label {
  font: 500 0.6rem/1.2 var(--mono, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.audit-cabin-axis strong {
  font: 700 1rem/1.15 var(--mono, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Sin base con qué medir, el eje se dibuja apagado para que el «—» no se lea como cero. */
.audit-cabin-axis[data-tone="muted"] strong { color: var(--text-muted); }

.audit-cabin-axis-hint {
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--text-muted);
}

.audit-cabin-axis-hint:empty { display: none; }

.audit-cabin-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.audit-cabin-title strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audit-cabin-eyebrow {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.audit-cabin-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.audit-cabin-progress span { white-space: nowrap; }
.audit-cabin-progress strong { color: var(--text); }

.audit-cabin-save-state {
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

.audit-cabin-save-state[data-state="saving"] { color: var(--accent); }
.audit-cabin-save-state[data-state="error"] { color: var(--danger, #dc2626); }
.audit-cabin-save-state[data-state="pending"] { color: #b45309; }
.audit-cabin-save-state[data-state="complete"] { color: var(--success, #15803d); }

.audit-cabin-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(230px, 296px) minmax(500px, 1fr) minmax(310px, 380px);
}

.audit-cabin-sidebar {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.audit-cabin-sidebar-head {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
}

.audit-cabin-sidebar-head input,
.audit-cabin-sidebar-head select { width: 100%; }

#audit-cabin-queue-summary { padding: 0 0.75rem 0.5rem; }

.audit-cabin-list {
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0 0.55rem 0.75rem;
  list-style: none;
}

.audit-cabin-list li { margin-bottom: 0.35rem; }

.audit-cabin-list button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.audit-cabin-list button:hover { background: var(--surface-2); }
.audit-cabin-list button.active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.audit-cabin-list-ref {
  color: var(--text-muted);
  font: 600 0.7rem/1 var(--mono);
}

.audit-cabin-list-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

/*
 * Los cuatro estados de la cola.
 *
 * Eran tres y el color decía lo contrario de la gravedad: «sin evaluar» caía en
 * `incomplete` y se pintaba rojo —111 de 123 filas en alarma apenas se abre una
 * auditoría— mientras que una brecha real salía en ámbar. Ahora «sin evaluar» es un aro
 * neutro, «empezado» un aro ámbar, la brecha un cuadrado rojo y lo completo un disco
 * lleno: difieren en forma y en claridad, no sólo en tono.
 */
.audit-cabin-list-state {
  width: 0.7rem;
  height: 0.7rem;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  background: var(--surface);
}

.audit-cabin-list-state[data-state="complete"] {
  border-color: #0f766e;
  background: #0f766e;
}

.audit-cabin-list-state[data-state="gap"] {
  border-radius: 3px;
  border-color: #b91c1c;
  background: #b91c1c;
}

.audit-cabin-list-state[data-state="incomplete"] {
  border-color: #d97706;
  background: var(--surface);
}

.audit-cabin-list-state[data-state="unassessed"] {
  border-color: #cbd5e1;
  background: var(--surface);
}

/* Los atajos, dichos donde se usan. */
.audit-cabin-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.68rem;
}

.audit-cabin-keys kbd {
  padding: 0.05rem 0.3rem;
  margin-right: 0.2rem;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: 500 0.62rem/1.4 var(--mono, monospace);
}

.audit-cabin-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.9rem 2rem;
}

/*
 * El riel: las cuatro condiciones que bloquean el cierre.
 *
 * Reemplaza la tira de seis pasos, que decía el orden y no el estado. Cada ítem lleva el
 * dato que lo sostiene —«Conforme», «412 caracteres», «Falta plazo»— porque un ✓ solo
 * obliga a abrir el campo para saber con qué se cumplió. Queda fijo arriba: es el índice
 * del trabajo y hay que poder verlo mientras se escribe el fundamento.
 */
.audit-cabin-rail {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 920px;
  margin: 0 auto;
  padding: 0.55rem 0;
  background: var(--bg);
}

.audit-cabin-rail:empty { display: none; }

.audit-rail-item {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.audit-rail-item.ok {
  border-color: #bbe2dc;
  background: #f0f7f6;
}

.audit-rail-item.missing {
  border: 2px solid #d97706;
  padding: calc(0.5rem - 1px) calc(0.65rem - 1px);
  background: #fffbeb;
}

.audit-rail-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font: 500 0.6rem/1.2 var(--mono, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.audit-rail-label svg {
  flex: none;
  width: 0.72rem;
  height: 0.72rem;
}

.audit-rail-item.ok .audit-rail-label { color: #0f766e; }
.audit-rail-item.missing .audit-rail-label { color: #92400e; }

/* Dos líneas antes que recortar: el valor del riel es el dato, no un adorno. */
.audit-rail-value {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.audit-rail-item.missing .audit-rail-value { color: #92400e; }

.audit-rail-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.audit-cabin-control-head {
  max-width: 920px;
  margin: 1rem auto 0.55rem;
}

.audit-cabin-control-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audit-cabin-control-meta code {
  padding: 0.12rem 0.4rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font: 700 0.72rem/1.4 var(--mono, monospace);
}

.audit-cabin-control-head h2 {
  margin: 0.3rem 0 0.15rem;
  font-size: 1.25rem;
}

.audit-cabin-control-head p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 800px;
  margin-bottom: 0;
}

.audit-cabin-form-slot {
  max-width: 920px;
  margin: 0 auto;
}

.audit-cabin-form-slot .audit-req-form {
  display: block;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.audit-cabin-form-slot .audit-req-form.hidden { display: block; }
.audit-cabin-form-slot .audit-req-form > .tx-editor-head { display: none; }
.audit-cabin-form-slot .audit-req-extras { max-height: none; }
.audit-cabin-form-slot .audit-ai-guidance,
.audit-cabin-form-slot #audit-complete-chips,
.audit-cabin-form-slot .audit-evidence-add { display: none; }
.audit-cabin-form-slot .audit-evaluation-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.audit-cabin-form-slot .audit-summary-field {
  --audit-summary-color: #94a3b8;
  border: 1px solid var(--border);
  border-top-width: 1px;
  background: var(--surface);
  color: var(--text-muted);
}

/* La aclaración de un campo es una oración, no un rótulo: el shell moderno pone las
   etiquetas en versalitas y el `hint` de adentro heredaba el `uppercase`, así que
   «para conformidad vinculá un archivo…» salía gritado. */
.audit-cabin-form-slot .field .hint,
.audit-cabin-form-slot .field span.hint {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--text-muted);
}
.audit-cabin-form-slot .audit-form-submit { display: none; }

.audit-evaluation-summary {
  gap: 0.6rem;
}

.audit-summary-field {
  --audit-summary-color: #2563eb;
  min-width: 0;
  padding: 0.62rem;
  border: 1px solid color-mix(in srgb, var(--audit-summary-color) 28%, var(--border));
  border-top: 3px solid var(--audit-summary-color);
  border-radius: 9px;
  background: color-mix(in srgb, var(--audit-summary-color) 6%, var(--surface));
  color: color-mix(in srgb, var(--audit-summary-color) 78%, var(--text));
  font-size: 0.72rem;
  font-weight: 700;
}

.audit-summary-field select,
.audit-summary-field input {
  width: 100%;
  margin-top: 0.36rem;
  border-color: color-mix(in srgb, var(--audit-summary-color) 25%, var(--border));
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

.audit-summary-result[data-result="compliant"] { --audit-summary-color: #16a34a; }
.audit-summary-result[data-result="partially_compliant"] { --audit-summary-color: #d97706; }
.audit-summary-result[data-result="non_compliant"] { --audit-summary-color: #dc2626; }
.audit-summary-result[data-result="not_applicable"] { --audit-summary-color: #64748b; }
.audit-summary-finding { --audit-summary-color: #7c3aed; }
.audit-summary-owner { --audit-summary-color: #0f766e; }
.audit-summary-due { --audit-summary-color: #ca8a04; }
.audit-summary-due.is-overdue { --audit-summary-color: #dc2626; }

/* Ayuda contextual sin ocupar alto: marcador en la misma línea del rótulo. */
.field-tip {
  display: inline-grid;
  place-items: center;
  width: 0.92rem;
  height: 0.92rem;
  margin-left: 0.28rem;
  vertical-align: text-top;
  border-radius: 50%;
  background: color-mix(in srgb, var(--audit-summary-color, #64748b) 20%, transparent);
  color: color-mix(in srgb, var(--audit-summary-color, #475569) 90%, var(--text));
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  user-select: none;
}
.field-tip:hover,
.field-tip:focus-visible {
  background: color-mix(in srgb, var(--audit-summary-color, #64748b) 38%, transparent);
  outline: none;
}
.audit-summary-field.is-required-gap .field-tip {
  background: #fde68a;
  color: #92400e;
}

/*
 * Cabecera fija · guía que scrollea · muelle de biblioteca. El `aside` scrolleaba entero
 * y `.audit-cabin-context-unified` declaraba un `overflow-y` que nunca se usaba: la
 * cabecera se iba de pantalla al primer scroll y cada re-render devolvía la vista al tope.
 */
.audit-cabin-context {
  min-width: 0;
  min-height: 0;
  /*
   * Flex y no grid: el reparto de altura tiene que ser contra el alto real del panel,
   * que no es el de la ventana —la cabina tiene cabecera y pie propios—. Con el muelle
   * medido en `vh` la guía se quedaba en una franja de 60 px y el buscador se salía por
   * abajo; las dos cosas se vieron en la captura. Acá la guía tiene piso (`min-height`)
   * y el muelle es el que cede.
   */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--surface);
}

.audit-cabin-context-content { padding: 0.85rem; }
.audit-context-heading {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.55rem;
}
.audit-context-checklist,
.audit-context-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}
.audit-context-checklist li,
.audit-context-list li {
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 0.78rem;
}
.audit-context-checklist label {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
}
.audit-context-definition {
  display: grid;
  gap: 0.65rem;
  margin: 0.75rem 0;
}
.audit-context-definition div {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}
.audit-context-definition dt {
  margin-bottom: 0.15rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.audit-context-definition dd {
  margin: 0;
  font-size: 0.8rem;
}
.audit-cabin-context .audit-evidence-picker-layout { grid-template-columns: 1fr; }
.audit-cabin-context .audit-evidence-picker-preview { min-height: 150px; }
.audit-cabin-context .audit-evidence-picker-footer {
  align-items: stretch;
  flex-direction: column;
}

.audit-cabin-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.audit-cabin-footer .btn { min-width: 150px; }

/*
 * El pie dice qué falta antes de apretar. El botón **queda apretable**: la compuerta de
 * verdad vive en `completeCabinRequirement`, y deshabilitarlo con una segunda lectura
 * del mismo estado deja sin salida a quien no entienda por qué no cierra.
 */
.audit-cabin-gate {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
}

.audit-cabin-gate:empty { display: none; }
.audit-cabin-gate[data-state="ok"] { color: #0f766e; }
.audit-cabin-gate[data-state="blocked"] { color: #92400e; }

#audit-cabin-complete-next[data-gate="blocked"] {
  background: var(--surface-2);
  border-color: #d97706;
  color: #92400e;
}

.audit-advanced-fields,
.audit-standard-phrases {
  margin: 0.6rem 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.audit-advanced-fields > summary,
.audit-standard-phrases > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.audit-advanced-fields[open] > summary,
.audit-standard-phrases[open] > summary { margin-bottom: 0.6rem; }

.audit-gap-fields {
  margin: 0.6rem 0;
  padding: 0.7rem;
  border-left: 3px solid #d97706;
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, #d97706 6%, var(--surface));
}

.audit-suggestion-preview {
  display: grid;
  gap: 0.65rem;
  margin: 0.65rem 0;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.audit-suggestion-preview.hidden { display: none; }
.audit-suggestion-fields { display: grid; gap: 0.45rem; }
.audit-suggestion-field {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}
.audit-suggestion-field span { display: grid; gap: 0.15rem; }
.audit-suggestion-field small {
  color: var(--text-muted);
  white-space: pre-wrap;
}

@media (max-width: 1200px) {
  .audit-cabin-body {
    grid-template-columns: 220px minmax(430px, 1fr) 300px;
  }
  .audit-cabin-form-slot .audit-evaluation-summary,
  .audit-cabin-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .audit-cabin-axes .audit-cabin-axis-hint { display: none; }
}

@media (max-width: 850px) {
  .audit-cabin-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .audit-cabin-progress {
    grid-column: 1 / -1;
    order: 3;
    overflow-x: auto;
  }
  .audit-cabin-body { grid-template-columns: 1fr; }
  .audit-cabin-context { display: none; }
  .audit-cabin-sidebar {
    position: fixed;
    inset: auto 0 58px 0;
    z-index: 5;
    max-height: 65dvh;
    border: 1px solid var(--border);
    transform: translateY(110%);
    transition: transform 0.2s ease;
  }
  .audit-cabin-sidebar.open { transform: translateY(0); }
  .audit-cabin-main { padding-inline: 0.65rem; }
  .audit-cabin-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-cabin-footer .btn { padding-inline: 0.6rem; }
  .audit-cabin-form-slot .audit-ai-guidance { display: block; }
}


.analytics-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.analytics-toolbar .an-search { flex: 1; min-width: 180px; }
.analytics-toolbar .an-search input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font);
}

.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.an-kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}
.an-kpi .an-kpi-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.an-kpi .an-kpi-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.an-kpi.warn .an-kpi-value { color: #b45309; }
.an-kpi.danger .an-kpi-value { color: var(--danger); }
.an-kpi.ok .an-kpi-value { color: #0f766e; }
.an-kpi .an-kpi-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }

.analytics-compare {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: -0.35rem 0 1rem;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.risk-mini-trio {
  display: inline-flex;
  gap: 0.2rem;
  margin-left: 0.35rem;
}
.risk-mini-trio .risk-pill {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  min-width: 1.1rem;
  text-align: center;
}

.ciso-pre, #detail-ciso-json {
  font-family: var(--mono);
  font-size: 0.7rem;
  background: #f1f5f9;
  padding: 0.75rem;
  border-radius: 6px;
  overflow-x: auto;
  max-height: 200px;
}

.hint { font-size: 0.85rem; color: var(--text-muted); margin: 0.5rem 0; }

.ciso-proxy-warn {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
  font-size: 0.85rem;
}

.ciso-proxy-warn.hidden { display: none; }

.ciso-sync-hero {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(14, 116, 144, 0.12), transparent 55%),
    linear-gradient(160deg, #f0f7fa 0%, #eef2f6 45%, #f7f8fa 100%);
  border: 1px solid #d7e3ea;
}
.ciso-sync-brand {
  margin: 0 0 0.35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0e7490;
}
.ciso-sync-copy h3 {
  margin: 0 0 0.4rem;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.ciso-sync-lead {
  margin: 0 0 1.1rem;
  max-width: 38rem;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.45;
}
.ciso-sync-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
  max-width: 40rem;
}
.ciso-sync-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  margin-bottom: 0.75rem;
}
.btn-lg {
  padding: 0.85rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
}
.ciso-sync-status {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}
.ciso-sync-status[data-kind="ok"] { color: #047857; font-weight: 600; }
.ciso-sync-status[data-kind="busy"] { color: #0e7490; }
.ciso-sync-status[data-kind="error"] { color: #b91c1c; font-weight: 600; }
.ciso-target-hint {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
}
.ciso-advanced {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.ciso-advanced summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
}
.ciso-advanced .scenario-form { margin-top: 0.75rem; }
.ciso-log-card { margin-top: 0.5rem; }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.metrics-grid.hidden { display: none; }
.metric-block {
  background: rgba(255,255,255,0.72);
  border: 1px solid #dbe4ea;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}
.metric-block h4 {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.metric-block ul { list-style: none; margin: 0; padding: 0; }
.metric-block li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  padding: 0.18rem 0;
  border-bottom: 1px solid #eef2f7;
}
.metric-block li:last-child { border-bottom: 0; }
.metric-block strong { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .ciso-sync-fields { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: 1fr; }
}

.scenario-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
  gap: 1.25rem;
  align-items: start;
}
.scenario-list-col .sc-list-wrap {
  max-height: min(70vh, 720px);
  overflow: auto;
}
.scenario-form-col h3 { margin: 0 0 0.25rem; }
#threat-context-hint { display: block; margin-top: 0.25rem; }
#sc-origin-badge {
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}
tr.row-active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
#gen-threats { min-height: 7rem; }

.sc-tools {
  color: var(--text-muted);
  font-size: 0.82rem;
}
.sc-tools > summary {
  cursor: pointer;
  list-style: none;
  opacity: 0.75;
  padding: 0.25rem 0;
  user-select: none;
}
.sc-tools > summary::-webkit-details-marker { display: none; }
.sc-tools > summary::before { content: '▸ '; font-size: 0.7rem; }
.sc-tools[open] > summary::before { content: '▾ '; }
.sc-tools-body { margin-top: 0.4rem; }

.sc-audit-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.sc-audit-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 4.5rem;
}
.sc-audit-kpi-v {
  font-size: 1.15rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}
.sc-audit-kpi-l {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.sc-audit-kpi.is-warn .sc-audit-kpi-v { color: #b45309; }
.sc-audit-kpi.is-muted .sc-audit-kpi-v { color: var(--text-muted); }

.sc-register {
  padding: 0.85rem 0 0;
}
.sc-filter-bar {
  margin-bottom: 0.65rem;
  gap: 0.4rem;
}
.sc-audit-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
}
.sc-audit-table td { vertical-align: middle; font-size: 0.86rem; }
.sc-ref code {
  font-size: 0.78rem;
  background: transparent;
  padding: 0;
}
.sc-pair { max-width: 18rem; line-height: 1.35; }
.sc-pair-sep {
  display: inline-block;
  margin: 0 0.3rem;
  color: var(--text-muted);
  opacity: 0.7;
}
.sc-plan-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  margin-left: 0.35rem;
  vertical-align: middle;
}
.sc-plan-pending { background: #f59e0b; }
.sc-plan-partial { background: #3b82f6; }
.sc-plan-complete { background: #16a34a; }
.sc-trace {
  display: inline-flex;
  gap: 0.25rem;
  white-space: nowrap;
}
.sc-trace-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.sc-trace-flag.ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.sc-trace-flag.miss {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
  opacity: 0.85;
}

.sc-eval-panel {
  padding: 0.25rem 0 0.5rem;
}
.sc-generator {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
}
.sc-generator > summary {
  cursor: pointer;
  list-style: none;
  opacity: 0.8;
  font-weight: 600;
  color: var(--text);
  user-select: none;
}
.sc-generator > summary::-webkit-details-marker { display: none; }
.sc-generator > summary::before { content: '▸ '; font-size: 0.7rem; color: var(--text-muted); }
.sc-generator[open] > summary::before { content: '▾ '; }
.sc-generator[open] { color: var(--text); }

@media (max-width: 1100px) {
  .scenario-layout { grid-template-columns: 1fr; }
  .scenario-form-col { order: 2; }
  .scenario-list-col { order: 1; }
}

.bulk-valuate-bar {
  margin: 0 0 0.65rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.bulk-valuate-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
  color: var(--text-muted);
  font-weight: 500;
  opacity: 0.72;
  user-select: none;
}
.bulk-valuate-summary::-webkit-details-marker { display: none; }
.bulk-valuate-summary::before {
  content: '▸';
  font-size: 0.7rem;
  opacity: 0.7;
}
.bulk-valuate-bar[open] .bulk-valuate-summary::before { content: '▾'; }
.bulk-valuate-bar[open] .bulk-valuate-summary { opacity: 0.9; }
.bulk-valuate-count:empty { display: none; }
.bulk-valuate-count:not(:empty)::before { content: '· '; }
.bulk-valuate-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-top: 0.35rem;
  padding: 0.4rem 0 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.bulk-val-field {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.bulk-val-field input {
  width: 2.4rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.78rem;
}
.bulk-valuate-body .btn-ghost {
  color: var(--text-muted);
  border-color: transparent;
  opacity: 0.85;
}
.bulk-valuate-body .btn-ghost:hover {
  opacity: 1;
  border-color: var(--border);
}

.assets-table .col-check {
  width: 2rem;
  text-align: center;
}
.assets-table .col-check input { cursor: pointer; opacity: 0.55; }
.assets-table .col-check input:checked { opacity: 1; }

/* Asset CRUD modal */
.asset-modal {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  width: min(920px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  background: #fff;
  color: var(--text);
}
.asset-bulk-modal {
  width: min(760px, calc(100vw - 1.5rem));
}
.asset-bulk-modal .table-wrap {
  max-height: 220px;
  overflow: auto;
  margin-top: 0.5rem;
}
.asset-modal::backdrop {
  background: rgba(148, 163, 184, 0.32);
}
.asset-modal-form { display: flex; flex-direction: column; max-height: calc(100vh - 1.5rem); }
.asset-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.asset-modal-header h3 { margin: 0; font-size: 1.1rem; }
.asset-modal-sub {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.asset-editor-body {
  overflow: auto;
  padding: 0.75rem 1.25rem 0.25rem;
  flex: 1;
}
.ae-section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eef2f7;
}
.ae-section:last-child { border-bottom: 0; margin-bottom: 0.25rem; }
.ae-section-title {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.asset-editor-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 0.85rem;
  padding: 0;
  margin: 0;
  overflow: visible;
}
.asset-editor-grid .field.span-3 { grid-column: span 3; }
/*
 * Los bloques de campos por clase se muestran y ocultan con `hidden` desde JS, y
 * `.form-grid` declara `display: grid`, que le gana al `display: none` del atributo
 * (autor > user-agent). Sin el override los tres bloques se ven a la vez y el
 * formulario le pide a un rol su número de serie — que es exactamente lo que este
 * cambio existe para no hacer. Pasó, y se vio en la primera captura.
 *
 * ⚠ El `display: grid` propio es a propósito, aunque lo herede de `.form-grid`:
 * `legacy-hidden-panels.test.ts` busca la declaración en una regla de **esta**
 * clase y, sin ella, se saltea el componente y el guardián pasa sin verificar
 * nada. Mismo motivo que `.audit-toolbar`.
 */
.ae-class-fields { display: grid; }
.ae-class-fields[hidden] { display: none !important; }
/* La nota de la clase ocupa el ancho del bloque: es un párrafo, no un campo. */
.asset-editor-grid > p.span-3 { grid-column: span 3; margin: 0; }
.asset-editor-grid input[readonly] {
  background: #f8fafc;
  color: #475569;
  cursor: default;
}
.ae-cia-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.asset-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.asset-editor-error {
  margin: 0 1.25rem 0.75rem;
  color: #b91c1c;
  font-size: 0.85rem;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .asset-editor-grid { grid-template-columns: 1fr; }
  .asset-editor-grid .field.span-2,
  .asset-editor-grid .field.span-3 { grid-column: span 1; }
}
.btn-danger-text { color: var(--danger); }
.btn-danger-text:hover { border-color: var(--danger); color: var(--danger); }
.row-actions {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
  white-space: nowrap;
}
.btn-icon-row.danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.col-action { width: 5.5rem; text-align: right; }

/* —— Plan de tratamiento —— */
.panel-treatment .tx-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.tx-guide-card {
  background: linear-gradient(160deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.tx-guide-card h4 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--text);
}
.tx-guide-card p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.tx-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.tx-kpis .kpi-alert .kpi-value { color: #b45309; }
.tx-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
.tx-layout.editor-open {
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 400px);
}
.tx-editor {
  position: sticky;
  top: 0.75rem;
  max-height: calc(100vh - 6rem);
  overflow: auto;
}
.tx-editor-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0.5rem 0;
}
.tx-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.tx-editor-head h3 { margin: 0; font-size: 1.05rem; }
.tx-risk-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.tx-risk-chip {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.tx-risk-chip strong {
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #111;
}
.tx-criterio-hint { margin-top: -0.35rem; margin-bottom: 0.65rem; }
.tx-form-actions { margin-top: 0.75rem; }
.tx-table tbody tr { cursor: pointer; }
.tx-table tbody tr:hover { background: #f1f5f9; }
.tx-action-cell { max-width: 14rem; font-size: 0.82rem; color: var(--text-muted); }
.tx-criterio-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #e2e8f0;
  color: #334155;
}
.tx-criterio-badge.tx-open { background: #fef3c7; color: #92400e; }
.tx-criterio-badge.tx-mitigate { background: #dbeafe; color: #1e40af; }
.tx-criterio-badge.tx-accept { background: #dcfce7; color: #166534; }
.tx-criterio-badge.tx-avoid { background: #ede9fe; color: #5b21b6; }
.tx-criterio-badge.tx-transfer { background: #ffedd5; color: #9a3412; }
.tx-row.tx-pending td:first-child code { border-left: 3px solid #f59e0b; padding-left: 0.35rem; }
.tx-toolbar { margin-bottom: 0.75rem; }
.empty-row { text-align: center; color: var(--text-muted); padding: 1.5rem !important; }
@media (max-width: 960px) {
  .tx-layout.editor-open { grid-template-columns: 1fr; }
  .tx-editor { position: static; max-height: none; }
}

/* —— Auditorías (Compliance Assessment nativo) —— */
.panel-audits .main,
.main:has(.panel-audits.active) { max-width: none; }
.audit-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
/* El índice y la auditoría son alternativas, no vecinas: una sola columna y el que
   corresponda ocupa el ancho entero. Antes el índice era una columna fija de 260–340 px
   al lado del trabajo, para elegir entre una auditoría. */
.audit-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
.audit-layout.audit-list-hidden .audit-list-panel { display: none; }
.audit-list-panel { min-width: 0; }
/* Con la lista a ancho completo las tarjetas se acomodan en grilla en vez de apilarse
   en una columna angosta. */
.audit-list-panel .audit-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.6rem;
}

/* La barra de búsqueda del índice se oculta con `hidden` desde JS. El `display: flex`
   se declara acá y no solo se hereda de `.assets-toolbar` para que el guardián de
   `legacy-hidden-panels.test.ts` —que busca la clase con `display` y su override— lo
   verifique de verdad en vez de saltearlo. */
.audit-toolbar { display: flex; }
.audit-toolbar[hidden] { display: none !important; }

/* Selector de auditoría en la cabecera: reemplaza a la columna del portafolio. */
.audit-switcher {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.audit-switcher .field { margin: 0; min-width: 16rem; }
.audit-switcher[hidden] { display: none !important; }

/* Tres ejes, no un porcentaje solo. */
.audit-hero-axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.audit-hero-axes[hidden] { display: none !important; }
.audit-hero-axis {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.audit-hero-axis-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.audit-hero-axis-value {
  font-size: 1.55rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Sin base evaluada el cumplimiento es «—», y se muestra apagado: un 0 % sobre cero
   evaluaciones se lee «no cumplimos nada» cuando lo cierto es «nadie miró». */
.audit-hero-axis[data-tone='muted'] .audit-hero-axis-value { color: var(--muted); }
.audit-hero-axis-hint { font-size: 0.75rem; color: var(--muted); }
.audit-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.audit-list-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.audit-list-wrap { max-height: min(58vh, 520px); overflow: auto; }
.audit-workspace {
  position: sticky;
  top: 0.75rem;
  max-height: calc(100vh - 5.5rem);
  overflow: auto;
}
.audit-workspace-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: -0.25rem 0 0.75rem;
  padding: 0.45rem 0.55rem;
  background: color-mix(in srgb, var(--surface, #fff) 92%, #e2e8f0);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.audit-req-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.audit-req-nav #audit-req-pos {
  min-width: 4.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.audit-table tbody tr,
.audit-req-table tbody tr { cursor: pointer; }
.audit-table tbody tr:hover,
.audit-req-table tbody tr:hover { background: #f1f5f9; }
.audit-table tr.active,
.audit-req-table tr.active { background: #eff6ff; }
.audit-progress {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
}
.audit-progress .progress-track { flex: 1; height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.audit-progress .progress-fill { height: 100%; background: var(--accent); border-radius: 99px; }
.audit-donut {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0.85rem;
  font-size: 0.82rem;
}
.audit-donut-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
}
.audit-donut-item i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  display: inline-block;
}
.result-pill {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
}
.audit-req-wrap { max-height: 280px; overflow: auto; margin-bottom: 0.75rem; }
.audit-req-form {
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  margin-top: 0.25rem;
}
.audit-requirement-description {
  max-width: 85ch;
  margin: 0.35rem 0 0;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.6;
  white-space: pre-line;
}
.audit-req-table tbody tr:focus-visible,
.audit-tree-group li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.audit-ig-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.audit-ig-checks label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
}
# CSS minimal for GRC lists
#org-domains, #org-perimeters, #org-users, #org-groups {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
#org-domains li, #org-perimeters li, #org-users li, #org-groups li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}
.org-switcher {
  margin-left: auto;
  margin-right: 1rem;
  min-width: 320px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.org-switcher .field { min-width: 130px; margin: 0; font-size: 0.8rem; }
.org-switcher select {
  margin-top: 0.2rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
}

.rbac-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--accent, #1f6feb) 12%, transparent);
  color: var(--text);
  white-space: nowrap;
}
/* Un rol con advertencia se marca en la chapa: el texto vive en el panel del usuario,
   que arranca cerrado, y un aviso que hay que ir a buscar no llega a nadie. */
.rbac-role-badge[data-warn="1"]::after {
  content: "⚠";
  margin-left: 0.3rem;
  color: var(--warning, #9a6700);
}
.rbac-warnings {
  margin: 0.4rem 0 0.6rem;
  padding-left: 1rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--warning, #9a6700);
}
.rbac-warnings li + li { margin-top: 0.35rem; }

.rbac-role-badge[data-role="administrador"] {
  background: color-mix(in srgb, #1a7f37 14%, transparent);
}
.rbac-role-badge[data-role="auditor"] {
  background: color-mix(in srgb, #9a6700 14%, transparent);
}
.rbac-role-badge[data-role="ciso"] {
  background: color-mix(in srgb, #0550ae 14%, transparent);
}
.rbac-role-badge[data-role="cliente"] {
  background: color-mix(in srgb, #8250df 12%, transparent);
}
.rbac-denied {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.2);
}
.rbac-nav-hidden {
  display: none !important;
}
.workspace-sync-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--border));
  color: var(--muted, #5c6570);
  white-space: nowrap;
}
.workspace-sync-badge[data-sync="saving"] {
  color: #8a5a00;
  border-color: color-mix(in srgb, #ffb020 45%, var(--border));
  background: color-mix(in srgb, #ffb020 14%, transparent);
}
.workspace-sync-badge[data-sync="saved"] {
  color: #0f6b3c;
  border-color: color-mix(in srgb, #02a45a 40%, var(--border));
  background: color-mix(in srgb, #02a45a 12%, transparent);
}
.workspace-sync-badge[data-sync="error"] {
  color: #a11212;
  border-color: color-mix(in srgb, #ff1a00 35%, var(--border));
  background: color-mix(in srgb, #ff1a00 10%, transparent);
}
.establishment-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid color-mix(in srgb, #b45309 35%, var(--border));
  border-radius: 0.55rem;
  background: color-mix(in srgb, #b45309 8%, var(--surface, #fff));
}
.establishment-banner.is-ready {
  border-color: color-mix(in srgb, #0f766e 32%, var(--border));
  background: color-mix(in srgb, #0f766e 8%, var(--surface, #fff));
}
.establishment-banner[hidden] { display: none !important; }
.establishment-banner-copy {
  display: grid;
  gap: 0.35rem;
  max-width: 48rem;
}
.establishment-banner-copy strong {
  font-size: 0.95rem;
}
.establishment-banner-copy p,
.establishment-banner-copy ul {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #5c6570);
}
.establishment-banner-copy ul {
  padding-left: 1.1rem;
}
button.is-establishment-locked {
  opacity: 0.72;
}

/* —— Wizard establecimiento SGSI —— */
body.estab-wizard-open { overflow: hidden; }
.estab-wizard {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.estab-wizard.hidden { display: none !important; }
.estab-wizard-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(15 23 42 / 52%);
  backdrop-filter: blur(3px);
}
.estab-wizard-shell {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  height: min(860px, 100%);
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 0 24px 60px rgb(15 23 42 / 28%);
  overflow: hidden;
}
.estab-wizard-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-2));
}
.estab-wizard-header h3 { margin: 0.1rem 0; }
.estab-wizard-header .hint { margin: 0; }
.estab-wizard-progress {
  display: grid;
  gap: 0.35rem;
  min-width: 140px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.estab-wizard-progress > div {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}
.estab-wizard-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.2s ease;
}
.estab-wizard-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 250px 1fr;
}
.estab-wizard-rail {
  min-height: 0;
  overflow: auto;
  padding: 0.85rem 0.7rem;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  gap: 0.35rem;
  align-content: start;
}
.estab-wizard-rail-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  text-align: left;
  padding: 0.55rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.estab-wizard-rail-item strong {
  display: block;
  font-size: 0.78rem;
}
.estab-wizard-rail-item small {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 0.64rem;
}
.estab-wizard-rail-item.is-active {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.estab-wizard-rail-item.is-done .estab-wizard-rail-idx {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.estab-wizard-rail-idx {
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font: 700 0.65rem/1 var(--mono, ui-monospace, monospace);
  color: var(--text-muted);
}
.estab-wizard-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#estab-wizard-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1rem;
}
.estab-wizard-panel-head {
  margin-bottom: 0.9rem;
}
.estab-wizard-panel-head h4 { margin: 0 0 0.25rem; }
.estab-wizard-panel-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}
.estab-wizard-panel .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.estab-wizard-panel .field.span-2 { grid-column: 1 / -1; }
.estab-wizard-panel .field em {
  color: #b45309;
  font-style: normal;
}
.estab-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}
.estab-wizard-actions #estab-wizard-msg {
  margin-right: auto;
  min-height: 1.2em;
}
.estab-wizard-actions #estab-wizard-msg[data-tone="ok"] { color: #0f766e; }
.estab-wizard-actions #estab-wizard-msg[data-tone="warn"] { color: #b45309; }
.estab-wizard-actions #estab-wizard-msg[data-tone="error"] { color: #b42318; }
.estab-wizard-status {
  margin-bottom: 0.85rem;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.86rem;
  font-weight: 600;
}
.estab-wizard-status.is-ok {
  border-color: color-mix(in srgb, #0f766e 35%, var(--border));
  background: color-mix(in srgb, #0f766e 8%, var(--surface));
  color: #0f766e;
}
.estab-wizard-status.is-warn {
  border-color: color-mix(in srgb, #b45309 35%, var(--border));
  background: color-mix(in srgb, #b45309 8%, var(--surface));
  color: #9a3412;
}
.estab-wizard-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 1rem;
}
.estab-wizard-lists h5 { margin: 0 0 0.4rem; font-size: 0.8rem; }
.estab-wizard-lists ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.estab-wizard-lists li {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.estab-wizard-lists li strong { display: block; font-size: 0.84rem; }
.estab-wizard-lists li span,
.estab-wizard-lists li.hint {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 0.74rem;
}
.estab-wizard-milestones {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.estab-wizard-milestones li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.estab-wizard-milestones li.is-done {
  border-color: color-mix(in srgb, #0f766e 30%, var(--border));
  background: color-mix(in srgb, #0f766e 7%, var(--surface));
}
.estab-wizard-milestones strong { display: block; font-size: 0.86rem; }
.estab-wizard-milestones small {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
}
.estab-wizard-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.estab-wizard-cta-grid .span-2 { grid-column: 1 / -1; }
.estab-wizard-blockers {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.estab-wizard-blockers li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, #b45309 28%, var(--border));
  background: color-mix(in srgb, #b45309 7%, var(--surface, #fff));
  border-radius: 8px;
}
.estab-wizard-blockers strong { display: block; font-size: 0.86rem; }
.estab-wizard-blockers small {
  color: var(--text-muted);
  font-size: 0.75rem;
}
.estab-wizard-milestones strong em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.estab-wizard-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.35rem;
}
.estab-wizard-audit-card {
  text-align: left;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.estab-wizard-audit-card:hover:not(:disabled) {
  border-color: color-mix(in srgb, #0f766e 45%, var(--border));
  background: color-mix(in srgb, #0f766e 6%, var(--surface, #fff));
}
.estab-wizard-audit-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.estab-wizard-audit-card strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.92rem;
}
.estab-wizard-audit-card span {
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}
.estab-wizard-actions #estab-wizard-auto {
  border-color: color-mix(in srgb, #0f766e 35%, var(--border));
  margin-left: auto;
}
.estab-wizard-auto-callout {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, #0f766e 28%, var(--border));
  background: color-mix(in srgb, #0f766e 8%, var(--surface, #fff));
  border-radius: 10px;
}
.estab-wizard-auto-callout.compact { padding: 0.7rem 0.85rem; }
.estab-wizard-auto-callout strong { display: block; margin-bottom: 0.25rem; }
.estab-wizard-auto-callout p {
  margin: 0 0 0.65rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.estab-wizard-auto-callout .btn { width: 100%; }
@media (max-width: 860px) {
  .estab-wizard-header {
    grid-template-columns: 1fr auto;
  }
  .estab-wizard-progress { grid-column: 1 / -1; }
  .estab-wizard-layout { grid-template-columns: 1fr; }
  .estab-wizard-rail {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .estab-wizard-rail-item { min-width: 180px; }
  .estab-wizard-panel .form-grid,
  .estab-wizard-lists,
  .estab-wizard-cta-grid,
  .estab-wizard-audit-grid {
    grid-template-columns: 1fr;
  }
}
body.client-portal .audit-iso-tools,
body.client-portal [data-admin-tools],
body.client-portal #btn-bootstrap-scenarios,
body.client-portal .document-overview-grid,
body.client-portal .document-governance-note,
body.client-portal [data-doc-workspace-tab="overview"],
body.client-portal [data-doc-workspace-tab="matrix"],
body.client-portal [data-doc-workspace-tab="packages"],
body.client-portal [data-doc-workspace-view="overview"],
body.client-portal [data-doc-workspace-view="matrix"],
body.client-portal [data-doc-workspace-view="packages"],
body.client-portal .doc-control-explanation,
body.client-portal #evid-lib-semantic-rebuild,
body.client-portal [data-doc-action="reindex"] {
  display: none !important;
}
body.client-portal .document-workspace-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.client-portal .document-workspace-kpis article:nth-child(n+5) {
  display: none !important;
}
body.client-portal .doc-idx-explorer {
  grid-template-columns: 1fr;
}
body.client-portal #evid-lib-preview.has-preview {
  display: block;
  margin-top: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}
body.client-portal #evid-lib-preview:not(.has-preview) {
  display: none;
}
body.client-portal .client-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
body.client-portal .client-doc-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--surface, #fff) 94%, var(--border));
  text-align: left;
}
body.client-portal .client-doc-card.is-selected {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 25%, transparent);
}
body.client-portal .client-doc-card header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}
body.client-portal .client-doc-card h4 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.3;
}
body.client-portal .client-doc-status {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
}
body.client-portal .client-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  font-size: 0.78rem;
  color: var(--muted, #5c6570);
}
body.client-portal .client-doc-file {
  color: #0a7a45;
  font-weight: 600;
}
body.client-portal .client-doc-missing {
  color: #a15c12;
  font-weight: 600;
}
body.client-portal .client-docs-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.35rem 0 0.75rem;
}
body.client-portal .client-docs-kpis > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--surface, #fff);
}
body.client-portal .client-docs-kpis strong {
  font-size: 1.15rem;
}
body.client-portal .client-docs-kpis span {
  font-size: 0.75rem;
  color: var(--muted, #5c6570);
}
body.client-portal .client-docs-kpis .is-warn strong {
  color: #a15c12;
}
body.client-portal .client-doc-facets {
  margin: 0.35rem 0 0.75rem;
}
body.client-portal .doc-idx-filters-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(7rem, 0.7fr));
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}
@media (max-width: 900px) {
  body.client-portal .doc-idx-filters-row,
  body.client-portal .client-docs-kpis,
  body.client-portal .document-workspace-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.home-readiness-queues {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
}
.home-readiness-body {
  margin-top: 0.75rem;
}
.home-readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.65rem;
}
.home-readiness-card {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--surface, #fff) 94%, var(--border));
  padding: 0.75rem 0.85rem;
  display: grid;
  gap: 0.35rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.home-readiness-card:hover,
.home-readiness-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 45%, var(--border));
  outline: none;
}
.home-readiness-card strong {
  font-size: 0.92rem;
}
.home-readiness-card span {
  font-size: 0.8rem;
  color: var(--muted, #5c6570);
}
.home-readiness-card em {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent, #2563eb);
}
.doc-version-panel {
  margin: 0.75rem 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--surface, #fff) 92%, var(--border));
}
.doc-version-active {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.85rem;
}
.doc-version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.doc-version-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.82rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--border);
}
.doc-version-list li:last-child { border-bottom: 0; }
.doc-version-lock {
  opacity: 0.7;
  font-size: 0.75rem;
}

.global-org-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.2rem;
  background: var(--surface);
}

/* Organización: ficha corporativa sin dashboards duplicados */
.panel-organization {
  --org-logo-size: 72px;
  --org-accent-soft: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.org-page-header {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.org-page-header h2 {
  margin: 0.15rem 0 0.2rem;
  font-size: clamp(1.55rem, 2vw, 2rem);
  letter-spacing: -0.025em;
}

.org-page-header p {
  max-width: 68ch;
  margin: 0;
  color: var(--text-muted);
}

.org-page-eyebrow,
.org-profile-section-label {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.org-action-menu {
  position: relative;
}

.org-action-menu > summary {
  list-style: none;
  cursor: pointer;
}

.org-action-menu > summary::-webkit-details-marker { display: none; }

.org-action-menu-body {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 190px;
  display: grid;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.org-action-menu-body button {
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.org-action-menu-body button:hover { background: var(--surface-2); }

.org-profile-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 18px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 14px 30px color-mix(in srgb, #0f172a 12%, transparent);
}

.org-profile-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
  background: #fff;
}

.org-profile-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 6px 18px color-mix(in srgb, #0f172a 5%, transparent);
}

.org-profile-brand {
  position: relative;
  display: grid;
  grid-template-columns: var(--org-logo-size) minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 1rem;
}

.org-profile-logo {
  width: var(--org-logo-size);
  height: var(--org-logo-size);
  font-size: 1.25rem;
}

.org-profile-identity {
  min-width: 0;
}

.org-profile-identity h3 {
  margin: 0.2rem 0 0.1rem;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.org-profile-identity p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.org-profile-tagline {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.org-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.22rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--success, #16a34a) 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--success, #16a34a) 8%, var(--surface));
  color: var(--success, #15803d);
  font-size: 0.68rem;
  font-weight: 700;
}

.org-active-badge i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

.org-profile-hero-actions {
  position: relative;
  align-self: start;
}

.org-profile-editor textarea::placeholder {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.7;
}

.org-profile-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0 1rem 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  margin-top: 0;
  padding-top: 0.7rem;
}

.org-profile-fact {
  min-width: 0;
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.org-profile-fact-icon {
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--org-accent-soft);
  color: var(--accent);
  font: 700 0.52rem/1 var(--mono);
}

.org-profile-fact > span:last-child {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
}

.org-profile-fact small {
  color: var(--text-muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.org-profile-fact strong {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  line-height: 1.35;
}

.org-readiness-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.org-readiness-chip:hover {
  background: var(--org-accent-soft);
  border-color: var(--accent);
}
.org-readiness-chip::before {
  content: '+';
  font-weight: 700;
  font-size: 0.8rem;
}

.org-readiness-has-gaps {
  border-left: 3px solid color-mix(in srgb, var(--warning) 60%, var(--border));
  padding-left: 0.6rem;
  margin-top: 0.35rem;
}

.org-module-metric-secondary {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.org-readiness-card,
.org-profile-editor,
.org-resource-card,
.org-module-grid,
.org-danger-zone {
  margin-top: 0.8rem;
}

.org-profile-tabs,
.org-resource-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.8rem 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}


.org-resource-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.org-profile-tabs button,
.org-resource-tabs button {
  padding: 0.4rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: 600 0.8rem/1.2 var(--font);
}

.org-profile-tabs button.active,
.org-resource-tabs button.active {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--accent);
}

.org-resource-tabs span {
  margin-left: 0.25rem;
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.68rem;
}

.org-info-dot {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  display: inline-grid;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 50% !important;
  background: var(--surface) !important;
  color: var(--accent);
  cursor: help;
  font: 700 0.65rem/1 var(--mono) !important;
}

.org-info-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 50;
  right: -0.4rem;
  bottom: calc(100% + 0.55rem);
  width: min(270px, 70vw);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--orizon-border);
  border-radius: 8px;
  background: var(--orizon-surface);
  color: var(--orizon-text);
  box-shadow: var(--shadow-elevated);
  font: 500 0.72rem/1.45 var(--font);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.org-info-dot:hover::after,
.org-info-dot:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.org-info-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.org-resource-card #org-domains,
.org-resource-card #org-perimeters,
.org-resource-card #org-users,
.org-resource-card #org-groups {
  gap: 0.5rem;
}

.org-resource-card .org-resource-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.org-resource-marker {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--org-accent-soft);
  color: var(--accent);
  font: 700 0.72rem/1 var(--mono);
}

.org-resource-item-copy {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.org-resource-item-copy strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-resource-item-copy small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-profile-tab-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.org-profile-tab-panel .span-2 { grid-column: 1 / -1; }

.org-logo-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.3rem;
}

.org-logo-editor img {
  width: 150px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem;
  background: #fff;
}

.org-profile-form-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.org-profile-editor {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  justify-items: end;
  margin: 0;
}

.org-profile-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(148, 163, 184, 0.32);
  backdrop-filter: blur(2px);
}

.org-profile-editor-shell {
  position: relative;
  width: min(1320px, calc(100vw - 2rem));
  height: 100%;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: -22px 0 58px rgb(15 23 42 / 22%);
  overflow: hidden;
}

.org-profile-editor-header {
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.org-profile-editor-header h3 {
  margin: 0.15rem 0 0.1rem;
  font-size: 1.2rem;
}

.org-profile-editor-header p { margin: 0; }

.org-profile-editor-progress {
  display: grid;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.org-profile-editor-progress > div {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.org-profile-editor-progress i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.2s ease;
}

.org-profile-editor-body {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 245px minmax(460px, 1fr) 260px;
  overflow: hidden;
}

.org-profile-editor .org-profile-tabs {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin: 0;
  padding: 1rem 0.75rem;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.org-profile-editor .org-profile-tabs button {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.6rem;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
}

.org-profile-editor .org-profile-tabs button.active {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.org-profile-tab-icon {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
  font: 700 0.65rem/1 var(--mono);
}

.org-profile-tabs button.active .org-profile-tab-icon {
  background: var(--accent);
  color: #fff;
}

.org-profile-editor .org-profile-tabs button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.org-profile-editor .org-profile-tabs strong { color: var(--text); font-size: 0.78rem; }
.org-profile-editor .org-profile-tabs small { color: var(--text-muted); font-size: 0.64rem; font-weight: 500; }
.org-profile-editor .org-profile-tabs i { color: var(--text-muted); font: 700 0.65rem/1 var(--mono); }

.org-profile-editor-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.org-profile-editor-main form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.org-profile-editor .org-profile-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  gap: 0.8rem;
  padding: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.org-profile-editor .org-profile-tab-panel.hidden {
  display: none !important;
}

.org-profile-field-card,
.org-profile-editor .org-profile-tab-panel:not([data-org-profile-panel="identity"]) {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 3px 14px rgb(15 23 42 / 4%);
}

.org-profile-field-card {
  padding: 0.85rem;
}

.org-profile-field-card h4 {
  margin: 0 0 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.org-profile-field-card .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.org-profile-editor .org-profile-tab-panel:not([data-org-profile-panel="identity"]) {
  margin: 0;
  padding: 1rem;
}

.org-profile-editor .org-profile-form-actions {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  min-height: 64px;
  margin: 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 -8px 22px rgb(15 23 42 / 5%);
  backdrop-filter: blur(8px);
}

.org-profile-change-state {
  margin-right: auto;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.org-profile-change-state.is-dirty { color: #b45309; }

.org-profile-live-preview {
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  border-left: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.org-profile-section-label {
  display: block;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font: 700 0.66rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.org-profile-live-logo {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
  font: 800 1.1rem/1 var(--font);
}

.org-profile-live-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.org-profile-live-preview h4 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.org-profile-live-preview > p { margin: 0.25rem 0 1rem; color: var(--text-muted); font-size: 0.72rem; }

.org-profile-live-facts {
  display: grid;
  gap: 0.55rem;
}

.org-profile-live-facts span {
  display: grid;
  gap: 0.12rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
}

.org-profile-live-facts small { color: var(--text-muted); font-size: 0.62rem; text-transform: uppercase; }
.org-profile-live-facts strong { overflow-wrap: anywhere; font-size: 0.73rem; }

.org-profile-live-note {
  margin-top: 0.9rem;
  padding: 0.7rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

body.org-profile-editor-open { overflow: hidden; }

.iso-risk-summary {
  margin-bottom: 0.85rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.iso-risk-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.65rem;
}

.iso-risk-summary-head h3 { margin: 0.15rem 0 0; font-size: 0.95rem; }
.iso-risk-eyebrow { color: var(--accent); font: 700 0.64rem/1 var(--mono); letter-spacing: 0.08em; }

.iso-risk-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

.iso-risk-summary-grid article {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.iso-risk-summary-grid span { color: var(--text-muted); font-size: 0.64rem; font-weight: 650; }
.iso-risk-summary-grid strong { font-size: 1.25rem; line-height: 1.15; }
.iso-risk-summary-grid small { color: var(--text-muted); font-size: 0.59rem; line-height: 1.35; }

.cia-card > small {
  min-height: 2.3em;
  display: block;
  color: var(--text-muted);
  font-size: 0.63rem;
  line-height: 1.35;
}

.iso27005-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr);
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.8rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow-x: auto;
}

.iso27005-flow > span {
  min-width: 135px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.1rem 0.45rem;
  align-items: center;
}

.iso27005-flow b {
  grid-row: 1 / 3;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  font-size: 0.68rem;
}

.iso27005-flow strong { font-size: 0.7rem; }
.iso27005-flow small { color: var(--text-muted); font-size: 0.59rem; }
.iso27005-flow > i { color: var(--text-muted); font-style: normal; }

.risk-criteria-guide {
  margin-bottom: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.risk-criteria-guide > summary {
  padding: 0.65rem 0.75rem;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
}

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

.risk-criteria-columns h4 { margin: 0 0 0.4rem; font-size: 0.72rem; }
.risk-criterion-row { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.4rem; margin-top: 0.3rem; }
.risk-criterion-row b { color: var(--accent); font: 700 0.68rem/1.35 var(--mono); }
.risk-criterion-row span { display: grid; }
.risk-criterion-row strong { font-size: 0.65rem; }
.risk-criterion-row small { color: var(--text-muted); font-size: 0.59rem; line-height: 1.35; }
.fieldset-help { margin: -0.15rem 0 0.65rem; color: var(--text-muted); font-size: 0.65rem; line-height: 1.4; }

.matrix-information-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.75rem 0;
}

.matrix-information-grid article {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.matrix-information-grid span { color: var(--text-muted); font-size: 0.63rem; }
.matrix-information-grid strong { font-size: 0.9rem; }
.matrix-information-grid small { color: var(--text-muted); font-size: 0.62rem; line-height: 1.35; }
.matrix-cell-above { outline: 3px solid rgb(127 29 29 / 42%); outline-offset: -3px; }
.matrix-cell-tolerated { outline: 1px solid rgb(255 255 255 / 36%); outline-offset: -1px; }

.risk-register-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}

.risk-register-summary span {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.68rem;
}

.risk-register-summary span.is-warn { border-color: #f59e0b; color: #92400e; background: #fffbeb; }
.risk-register-summary strong { color: var(--text); }

.risk-trace-pill {
  display: inline-flex;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
}

.risk-trace-pill.is-complete { background: #dcfce7; color: #166534; }
.risk-trace-pill.is-partial { background: #fef3c7; color: #92400e; }

#register-tbody .risk-pill {
  min-width: 92px;
  display: inline-flex;
  justify-content: center;
  font-size: 0.62rem;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .iso-risk-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .iso-risk-summary-grid,
  .matrix-information-grid,
  .risk-criteria-columns { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .org-profile-editor-body { grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; }
  .org-profile-live-preview { display: none; }
}

@media (max-width: 720px) {
  .org-profile-editor-shell { width: 100vw; max-height: 100dvh; overflow: hidden; }
  .org-profile-editor-header { grid-template-columns: minmax(0, 1fr) auto; }
  .org-profile-editor-progress { display: none; }
  .org-profile-editor-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .org-profile-editor .org-profile-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    padding: 0.55rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .org-profile-editor .org-profile-tabs button {
    width: auto;
    min-width: 130px;
    min-height: 48px;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .org-profile-editor .org-profile-tabs button i,
  .org-profile-editor .org-profile-tabs small { display: none; }
  .org-profile-field-card .form-grid,
  .org-profile-editor .org-profile-tab-panel { grid-template-columns: 1fr; }
  .org-profile-field-card .span-2,
  .org-profile-editor .org-profile-tab-panel .span-2 { grid-column: 1; }
  .org-profile-editor .org-profile-form-actions { flex-wrap: wrap; }
  .org-profile-change-state { width: 100%; order: -1; }
}

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

.org-module-card {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.org-module-card h3 { margin: 0; font-size: 1rem; }
.org-module-card p {
  flex: 1;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.org-module-kicker {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.org-module-metric {
  font-size: 1.15rem;
  font-weight: 700;
}

.org-danger-zone {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.org-danger-zone > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
}

.org-danger-zone[open] > summary { margin-bottom: 0.8rem; }

@media (max-width: 1050px) {
  .org-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .org-switcher {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  .org-switcher .field { flex: 1; min-width: 0; }
  .panel-organization { --org-logo-size: 76px; }
  .org-profile-brand {
    grid-template-columns: var(--org-logo-size) minmax(0, 1fr);
    padding: 1rem;
  }
  .org-profile-hero-actions { grid-column: 1 / -1; }
  .org-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-resource-tabs { align-items: center; }
  .org-profile-tab-panel,
  .org-module-grid { grid-template-columns: 1fr; }
  .org-page-header,
  .org-readiness-card .org-docs-header { align-items: flex-start; }
}

@media (max-width: 480px) {
  .org-profile-brand {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .org-profile-logo { margin: 0 auto; }
  .org-active-badge { justify-self: center; }
  .org-profile-facts { grid-template-columns: 1fr; }
  .org-profile-hero-actions { justify-self: center; }
}
.audit-ops-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: start;
  margin: 0.75rem 0 1rem;
}
.audit-guide-details {
  margin: 0;
  padding: 0.55rem 0.85rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, #e2e8f0);
}
.audit-guide-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  user-select: none;
}
.audit-guide-details > summary::-webkit-details-marker { display: none; }
.audit-guide-details > summary::before { content: '▸ '; font-size: 0.7rem; color: #64748b; }
.audit-guide-details[open] > summary::before { content: '▾ '; }
.audit-guide-details > summary .hint { margin-left: auto; }
.audit-ops-bar .audit-guide {
  grid-column: auto;
  padding: 0.65rem 0 0.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.audit-alert-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.audit-alert {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  min-height: 5.2rem;
}
.audit-alert-kicker {
  font: 800 0.68rem/1.2 var(--font, "DM Sans", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.audit-alert-title {
  font: 800 1.35rem/1.15 var(--font, "DM Sans", sans-serif);
  color: #0f172a;
  letter-spacing: -0.02em;
}
.audit-alert-meta {
  font-size: 0.82rem;
  color: #475569;
}
.audit-alert.is-critical {
  border-color: #fca5a5;
  background: linear-gradient(160deg, #fef2f2, #fff7ed);
}
.audit-alert.is-critical .audit-alert-kicker { color: #b91c1c; }
.audit-alert.is-critical .audit-alert-title { color: #991b1b; }
.audit-alert.is-warn {
  border-color: #fcd34d;
  background: linear-gradient(160deg, #fffbeb, #fff7ed);
}
.audit-alert.is-warn .audit-alert-kicker { color: #b45309; }
.audit-alert.is-warn .audit-alert-title { color: #92400e; }
.audit-alert.is-ok {
  border-color: #86efac;
  background: linear-gradient(160deg, #f0fdf4, #ecfdf5);
}
.audit-alert.is-ok .audit-alert-kicker { color: #047857; }
.audit-alert.is-ok .audit-alert-title { color: #065f46; }
.audit-req-filters {
  margin: 0;
}
.audit-req-filters > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.8rem;
  font-weight: 650;
  color: #64748b;
  padding: 0.35rem 0.55rem;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  user-select: none;
}
.audit-req-filters > summary::-webkit-details-marker { display: none; }
.audit-req-filters[open] > summary {
  border-style: solid;
  color: #0f172a;
  margin-bottom: 0.45rem;
}
.audit-req-filters .filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.audit-auto-check {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.audit-auto-check li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.82rem;
}
.audit-auto-check li[data-ok="1"] {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.audit-auto-check li[data-ok="0"] {
  background: #fff7ed;
  border-color: #fed7aa;
}
.audit-auto-check em {
  font-style: normal;
  color: #64748b;
  font-size: 0.75rem;
}
.audit-meta-ai-hint {
  margin: 0.45rem 0 0.75rem;
}
.audit-guide-head {
  display: grid;
  gap: 0.1rem;
  margin-bottom: 0.65rem;
}
.audit-guide-head h3 {
  margin: 0;
  font-size: 1rem;
}
.audit-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.55rem;
}
.audit-guide-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.45rem;
  row-gap: 0.12rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  min-height: 5.2rem;
}
.audit-guide-card-num {
  grid-row: 1 / span 2;
  align-self: start;
  width: 1.55rem;
  height: 1.55rem;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
}
.audit-guide-card strong {
  font-size: 0.82rem;
  color: #0f172a;
  line-height: 1.25;
}
.audit-guide-card p {
  margin: 0;
  grid-column: 2;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.35;
}
.audit-guide-card-client {
  border-color: #fdba74;
  background: #fff7ed;
}
.audit-guide-card-client .audit-guide-card-num { background: #fed7aa; color: #9a3412; }
.audit-guide-card-ai {
  border-color: #93c5fd;
  background: #eff6ff;
}
.audit-guide-card-ai .audit-guide-card-num { background: #bfdbfe; color: #1d4ed8; }
.audit-guide-card-role {
  border-color: #c4b5fd;
  background: #f5f3ff;
}
.audit-guide-card-role .audit-guide-card-num { background: #ddd6fe; color: #5b21b6; }
.audit-ops-bar .audit-reminders,
.audit-ops-bar .audit-iso-readiness {
  min-width: 0;
}
@media (max-width: 900px) {
  .audit-ops-bar { grid-template-columns: 1fr; }
  .audit-alert-strip { grid-template-columns: 1fr; }
}
.audit-guide ol { margin: 0.35rem 0 0 1.1rem; padding: 0; }

/* Toolbar por fase del ciclo de auditoría */
.audit-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.audit-crumb-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.audit-crumb-link:hover { opacity: 0.85; }
.audit-crumb-sep { opacity: 0.5; }
.audit-crumb-current {
  color: var(--text);
  font-weight: 600;
  max-width: min(420px, 70vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-phase-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding: 0.35rem;
  background: color-mix(in srgb, var(--surface-2) 80%, #e2e8f0);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.audit-phase-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.audit-phase-btn:hover {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.audit-phase-btn.active {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 20%, transparent);
}
.audit-phase-num {
  width: 1.45rem;
  height: 1.45rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #e2e8f0;
  color: inherit;
}
.audit-phase-btn.active .audit-phase-num {
  background: var(--accent);
  color: #fff;
}
.audit-phase-txt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .audit-phase-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .audit-phase-txt { font-size: 0.65rem; }
}

.audit-flow-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}
.audit-flow-toolbar [data-phase-panel] { display: none; }
.audit-flow-toolbar[data-active-phase="start"] [data-phase-panel="start"],
.audit-flow-toolbar[data-active-phase="eval"] [data-phase-panel="eval"],
.audit-flow-toolbar[data-active-phase="docs"] [data-phase-panel="docs"],
.audit-flow-toolbar[data-active-phase="plan"] [data-phase-panel="plan"],
.audit-flow-toolbar[data-active-phase="report"] [data-phase-panel="report"] {
  display: flex;
}
.audit-meta-details {
  margin: 0 0 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.7rem 0.55rem;
  background: color-mix(in srgb, var(--surface, #fff) 96%, #e2e8f0);
}
.audit-meta-details > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.35rem 0;
  user-select: none;
}
.audit-meta-details > summary::-webkit-details-marker { display: none; }
.audit-meta-details > summary::before { content: '▸ '; font-size: 0.7rem; }
.audit-meta-details[open] > summary::before { content: '▾ '; }
.audit-meta-details .audit-meta { margin-top: 0.45rem; }
.audit-eval-anchor { scroll-margin-top: 4.5rem; }
.audit-table tbody tr.active {
  background: #dbeafe;
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -2px;
}
.audit-flow-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.audit-flow-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.85;
}
.audit-flow-tools {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.audit-flow-tools > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.35rem 0.15rem;
  opacity: 0.75;
  user-select: none;
}
.audit-flow-tools > summary::-webkit-details-marker { display: none; }
.audit-flow-tools > summary::before {
  content: '▸ ';
  font-size: 0.7rem;
}
.audit-flow-tools[open] > summary::before { content: '▾ '; }
.audit-flow-tools[open] > summary { opacity: 0.95; }
.audit-flow-tools-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 0.45rem;
  padding: 0.55rem 0 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
@media (max-width: 900px) {
  .audit-flow-tools { margin-left: 0; width: 100%; }
}

.audit-extra-kpis {
  display: none !important;
}
#audit-analytics-grid { margin-bottom: 1rem; }
.audit-analytics-details {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.audit-analytics-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.35rem 0;
  user-select: none;
  opacity: 0.8;
}
.audit-analytics-details > summary::-webkit-details-marker { display: none; }
.audit-analytics-details > summary::before { content: '▸ '; font-size: 0.7rem; }
.audit-analytics-details[open] > summary::before { content: '▾ '; }
.audit-analytics-details[open] > summary { margin-bottom: 0.5rem; opacity: 0.95; }

.audit-fill-panel {
  margin: 0.5rem 0 0.85rem;
  padding: 0.75rem 0.9rem;
}
.audit-fill-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0.5rem 0;
}
.audit-fill-grid .field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}
.audit-req-table-dense { font-size: 0.82rem; }
.audit-req-table-dense td,
.audit-req-table-dense th { padding: 0.28rem 0.4rem; vertical-align: middle; }
.audit-inline-result {
  font: inherit;
  font-size: 0.75rem;
  max-width: 5.5rem;
  padding: 0.15rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}
.audit-flash-suggest {
  margin: 0.5rem 0 0.75rem;
  padding: 0.45rem 0.6rem;
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, #f8fafc);
  border-radius: 6px;
}
.audit-req-actions { flex-wrap: wrap; }
.audit-ai-block .btn-group { margin-top: 0.4rem; }
.audit-bars { display: grid; gap: 0.4rem; }
.audit-bar-row {
  display: grid;
  grid-template-columns: 3rem 1fr 5rem;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
}
.audit-heat { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.audit-heat-cell {
  font-size: 0.72rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  color: #fff;
}
.audit-view-toggle { margin: 0.75rem 0; }

.audit-ai-guidance {
  margin: 0.65rem 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface, #fff));
  font-size: 0.82rem;
}
.audit-ai-guidance.hidden { display: none; }
.audit-ai-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  margin-bottom: 0.35rem;
}
.audit-ai-tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.audit-ai-tag {
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface, #fff);
}
.audit-ai-block { margin: 0.25rem 0; }
.audit-ai-block > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.audit-ai-block > summary::-webkit-details-marker { display: none; }
.audit-ai-block > summary::before { content: '▸ '; font-size: 0.7rem; color: var(--text-muted); }
.audit-ai-block[open] > summary::before { content: '▾ '; }
.audit-ai-block p {
  margin: 0.35rem 0 0.15rem;
  color: var(--text-muted);
  line-height: 1.45;
  white-space: pre-wrap;
}

.audit-flash-card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(160deg, #f8fafc, #eef2ff);
}
.audit-tree-group { margin-bottom: 0.5rem; }
.audit-tree-group ul { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.audit-tree-group li {
  padding: 0.35rem 0.4rem;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.audit-tree-group li:hover { background: #f1f5f9; }
.audit-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.audit-req-extras {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  display: grid;
  gap: 0.65rem;
}
.audit-evidence-panel {
  margin: 0.35rem 0 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #2563eb) 3%, var(--surface, #fff));
}
.audit-evidence-panel-head,
.audit-evidence-card,
.audit-evidence-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.audit-evidence-panel-head {
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.audit-evidence-card {
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  padding: 0.65rem 0;
  border-top: 1px solid var(--border);
}
.audit-evidence-card-main {
  min-width: 0;
  width: 100%;
}
.audit-evidence-card-title {
  align-items: flex-start;
  flex-wrap: wrap;
}
.audit-evidence-card-title strong {
  overflow-wrap: anywhere;
}
.audit-evidence-card-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  padding-top: 0.5rem;
  gap: 0.35rem;
}
.audit-evidence-meta,
.audit-evidence-empty,
.audit-evidence-notes p {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.audit-evidence-id {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
}
.audit-evidence-status,
.audit-evidence-count {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
.audit-evidence-status[data-status="approved"] {
  color: #166534;
  background: #dcfce7;
  border-color: #bbf7d0;
}
.audit-evidence-status[data-status="in_review"] {
  color: #92400e;
  background: #fef3c7;
  border-color: #fde68a;
}
.audit-evidence-status[data-status="obsolete"],
.audit-evidence-status[data-status="rejected"] {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}
.audit-evidence-notes summary,
.audit-evidence-add > summary {
  margin-top: 0.35rem;
  color: var(--accent);
  font-size: 0.78rem;
  cursor: pointer;
}
.audit-evidence-notes p {
  max-width: 90ch;
  overflow-wrap: anywhere;
}
.audit-evidence-add {
  padding: 0.35rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.audit-evidence-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-top: 0.65rem;
}
.audit-evidence-add-grid .field { margin: 0; }
.audit-evidence-picker-intro {
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.audit-evidence-picker-intro p { margin: 0.25rem 0 0; }
.audit-evidence-picker {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface, #fff) 96%, var(--accent, #2563eb));
}
.audit-evidence-picker-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.audit-evidence-picker-tabs .active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--surface, #fff));
}
.audit-evidence-picker-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(150px, 0.32fr));
  gap: 0.5rem;
}
.audit-evidence-picker-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 0.75rem;
  align-items: start;
}
.audit-evidence-picker-results {
  display: grid;
  gap: 0.5rem;
  max-height: 480px;
  overflow: auto;
  padding-right: 0.2rem;
}
.audit-evidence-candidate {
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.audit-evidence-candidate.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--surface, #fff));
}
.audit-evidence-candidate.is-unavailable { opacity: 0.72; }
.audit-evidence-candidate-select {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
}
.audit-evidence-candidate-select input { margin-top: 0.2rem; }
.audit-evidence-candidate-select span { min-width: 0; }
.audit-evidence-candidate-code {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}
.audit-evidence-candidate-meta,
.audit-evidence-candidate-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  font-size: 0.75rem;
}
.audit-evidence-candidate-meta > span {
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.audit-evidence-score {
  color: var(--accent);
  font-weight: 700;
}
.audit-evidence-candidate-reasons {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}
.audit-evidence-picker-preview {
  min-height: 220px;
  max-height: 480px;
  overflow: auto;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.audit-evidence-picker-preview-head,
.audit-evidence-picker-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.audit-evidence-picker-preview-head h5 { margin: 0.15rem 0 0.5rem; }
.audit-evidence-picker-preview-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
.audit-evidence-picker-preview-meta div {
  padding: 0.35rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--border) 30%, transparent);
}
.audit-evidence-picker-preview-meta dt {
  color: var(--muted);
  font-size: 0.7rem;
}
.audit-evidence-picker-preview-meta dd { margin: 0.1rem 0 0; }
.audit-evidence-picker-preview-content pre {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.75rem;
}
.audit-evidence-picker-footer {
  align-items: end;
  justify-content: flex-end;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.audit-evidence-picker-footer label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.75rem;
}
.audit-evidence-role {
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
}
.audit-evidence-link-trace {
  margin: 0.2rem 0;
  color: var(--muted);
  font-size: 0.72rem;
}
.audit-evidence-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 35%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--surface, #fff));
}
.audit-evidence-target {
  background: color-mix(in srgb, var(--accent, #2563eb) 14%, var(--surface, #fff)) !important;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.audit-report-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr);
  gap: 1rem;
  align-items: start;
  margin: 0.75rem 0;
}
.audit-report-editor,
.audit-report-preview-pane {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.audit-report-readiness-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.75rem;
  font-weight: 700;
}
.audit-report-readiness-badge.is-ready {
  border-color: #10b981;
  background: #ecfdf5;
  color: #065f46;
}
.audit-report-validation {
  margin: 0.65rem 0;
  padding: 0.65rem;
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
  color: #78350f;
  font-size: 0.8rem;
}
.audit-report-validation.is-ready {
  border-left-color: #10b981;
  background: #ecfdf5;
  color: #065f46;
}
.audit-report-validation ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.audit-report-form {
  max-height: 62vh;
  overflow: auto;
  padding-right: 0.35rem;
}
.audit-report-preview-pane {
  position: sticky;
  top: 0.5rem;
  max-height: 78vh;
  overflow: auto;
}
.audit-report-preview {
  padding: 1.25rem;
  border: 1px solid var(--border);
  background: #fff;
  color: #1f2937;
}
.audit-report-document {
  max-width: 760px;
  margin: 0 auto;
  font-size: 0.84rem;
  line-height: 1.55;
}
.audit-report-document header {
  padding: 1rem 0 1.4rem;
  border-bottom: 2px solid #1f4f82;
  text-align: center;
}
.audit-report-document h1 { font-size: 1.35rem; }
.audit-report-document h2 {
  margin-top: 1.2rem;
  font-size: 1rem;
  color: #1f4f82;
}
.audit-report-document table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
}
.audit-report-document th,
.audit-report-document td {
  padding: 0.35rem;
  border: 1px solid #cbd5e1;
  vertical-align: top;
  text-align: left;
}
.audit-report-document th { background: #f1f5f9; }
.audit-report-state {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border: 1px solid #d97706;
  border-radius: 999px;
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.audit-report-artifacts { margin-top: 1rem; }
.audit-report-artifact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border);
}
.audit-report-artifact > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.audit-report-mode > .audit-meta-details,
.audit-report-mode > .audit-eval-anchor {
  display: none;
}
@media (max-width: 980px) {
  .audit-report-workspace { grid-template-columns: 1fr; }
  .audit-report-preview-pane { position: static; max-height: none; }
  .audit-report-form { max-height: none; }
}
@media print {
  body.audit-print .panel-audits > *:not(.audit-layout),
  body.audit-print .audit-list-panel,
  body.audit-print .audit-workspace-bar,
  body.audit-print .tx-editor-head,
  body.audit-print .audit-report-editor,
  body.audit-print .audit-report-preview-pane > .row-between {
    display: none !important;
  }
  body.audit-print .audit-layout,
  body.audit-print .audit-workspace,
  body.audit-print .audit-detail,
  body.audit-print .audit-report-workspace,
  body.audit-print .audit-report-preview-pane {
    display: block !important;
    max-height: none !important;
    border: 0 !important;
    padding: 0 !important;
  }
  body.audit-print .audit-report-preview {
    border: 0;
    padding: 0;
  }
  @page { size: A4; margin: 16mm; }
}
@media (max-width: 720px) {
  .audit-evidence-panel-head,
  .audit-evidence-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .audit-evidence-card-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .audit-evidence-picker-filters,
  .audit-evidence-picker-layout {
    grid-template-columns: 1fr;
  }
  .audit-evidence-picker-preview {
    max-height: 380px;
  }
  .audit-evidence-picker-footer {
    align-items: stretch;
    flex-direction: column;
  }
}
.audit-pager { margin: 0.35rem 0 0.75rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.audit-scope-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0.35rem 0 0.65rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #2563eb) 6%, #f8fafc);
  font-size: 0.84rem;
}
.audit-scope-igs {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.audit-complete-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0.6rem;
}
/*
 * `.audit-chip` era una clase sin estilo salvo adentro de `.audit-complete-chips`, así
 * que los mismos chips en la lista de evidencia esperada se veían como texto suelto.
 * La base es global y el contenedor no necesita repetirla.
 */
.audit-chip {
  font-size: 0.7rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.audit-chip.ok {
  color: #166534;
  background: #dcfce7;
  border-color: #bbf7d0;
}
.audit-chip.missing {
  color: #92400e;
  background: #fef3c7;
  border-color: #fde68a;
}
/*
 * Lo que se informa sin frenar el cierre (hoy, la evidencia esperada). Va en gris y con
 * borde punteado: un chip que no bloquea no puede verse igual que uno que sí, o vuelve a
 * pasar lo de antes — el usuario buscando por qué no cierra un control que sí cierra.
 */
.audit-chip.suggest {
  color: var(--text-muted);
  background: transparent;
  border-style: dashed;
}

.audit-complete-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.panel-audits.audit-complete-only #audit-ops-bar,
.panel-audits.audit-complete-only #audit-analytics-details,
.panel-audits.audit-complete-only #audit-kpis,
.panel-audits.audit-complete-only #audit-extra-kpis,
.panel-audits.audit-complete-only .audit-meta-details {
  display: none !important;
}

.audit-flash-mini {
  margin: 0.5rem 0 0.85rem;
  padding: 0.7rem 0.9rem;
  display: grid;
  gap: 0.5rem;
}
.audit-flash-mini .field { margin: 0; }

.audit-inline-edit {
  width: 100%;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.field.is-invalid {
  outline: 1px solid #dc2626;
  border-radius: 4px;
}

@media print {
  body.audit-print header,
  body.audit-print nav,
  body.audit-print .btn-group,
  body.audit-print .audit-list-panel,
  body.audit-print #audit-ops-bar,
  body.audit-print .panel:not(.panel-audits) { display: none !important; }
  body.audit-print .panel-audits { display: block !important; }
  body.audit-print .audit-layout { display: block; }
  body.audit-print .audit-workspace { max-height: none; position: static; }
}

/* Auditorías: workspace profesional con sidebar y tarjetas */
.panel-audits {
  --audit-sidebar-width: 310px;
}

.panel-audits > .panel-header {
  margin-bottom: 0.85rem;
  padding: 0.2rem 0 0.9rem;
  border-bottom: 1px solid var(--border);
}

.audit-page-eyebrow {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.audit-page-tools,
.audit-detail-more {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
}

.audit-page-tools > summary,
.audit-detail-more > summary {
  width: auto;
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.audit-page-tools > summary::-webkit-details-marker,
.audit-detail-more > summary::-webkit-details-marker { display: none; }

.audit-page-tools-menu,
.audit-detail-more-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 220px;
  display: grid;
  gap: 0.15rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 18px 40px color-mix(in srgb, #0f172a 16%, transparent);
}

.audit-page-tools-menu button,
.audit-detail-more-menu button {
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.audit-page-tools-menu button:hover,
.audit-detail-more-menu button:hover { background: var(--surface-2); }
.audit-detail-more-menu button.danger { color: var(--danger); }

.audit-layout,
.audit-layout.audit-focused {
  grid-template-columns: var(--audit-sidebar-width) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.audit-layout.audit-list-hidden,
.audit-layout.audit-focused.audit-list-hidden {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.audit-layout.audit-list-hidden > .audit-list-panel { display: none; }

.audit-list-panel {
  position: sticky;
  top: 0.7rem;
  min-width: 0;
  max-height: calc(100dvh - 5.5rem);
  display: flex;
  flex-direction: column;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent));
  box-shadow: 0 10px 28px color-mix(in srgb, #0f172a 6%, transparent);
}

.audit-list-head { margin-bottom: 0.65rem; }
.audit-list-title {
  margin-top: 0.12rem;
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

.audit-list-panel .audit-toolbar {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.audit-list-panel .audit-toolbar .search-box,
.audit-list-panel .audit-toolbar .filter-group,
.audit-list-panel .audit-toolbar .filter-chip { width: 100%; }

.audit-list-panel .audit-toolbar .filter-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.audit-sidebar-filters {
  display: flex;
  gap: 0.28rem;
  margin-bottom: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.audit-sidebar-filters button {
  flex: 0 0 auto;
  padding: 0.28rem 0.46rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: 600 0.66rem/1.2 var(--font);
}

.audit-sidebar-filters button.active {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
}

.audit-list-wrap.audit-card-list {
  min-height: 0;
  max-height: none;
  display: grid;
  gap: 0.55rem;
  overflow-y: auto;
  padding: 0.1rem 0.1rem 0.2rem;
}

.audit-sidebar-card {
  min-width: 0;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.audit-sidebar-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 8px 18px color-mix(in srgb, #0f172a 7%, transparent);
}

.audit-sidebar-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.audit-sidebar-card-head,
.audit-sidebar-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.audit-sidebar-card h4 {
  margin: 0.48rem 0 0.16rem;
  overflow: hidden;
  font-size: 0.84rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-sidebar-card p {
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La barra de avance de la tarjeta se sacó con el portafolio: ese porcentaje es
   `compute_progress`, o sea cuánto se evaluó, y bajo el rótulo «avance» se leía como
   cumplimiento. La tarjeta dice ahora evaluados, brechas y requisitos sin evidencia,
   que es lo mismo separado por lo que mide. */

.audit-sidebar-card-foot {
  margin-top: 0.45rem;
  color: var(--text-muted);
  font-size: 0.63rem;
}
.audit-sidebar-card-foot .has-gaps { color: #b45309; font-weight: 700; }
.audit-sidebar-card-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.audit-sidebar-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  min-width: 0;
}
.audit-fw-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #e2e8f0;
  color: #334155;
  white-space: nowrap;
}
.audit-fw-chip.fw-27001 { background: #dbeafe; color: #1d4ed8; }
.audit-fw-chip.fw-9001 { background: #dcfce7; color: #15803d; }
.audit-fw-chip.fw-27002 { background: #e0e7ff; color: #4338ca; }
.audit-fw-chip.fw-nist { background: #ffedd5; color: #c2410c; }
.audit-sidebar-auditee,
.audit-sidebar-due {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-lock-badge,
.audit-draft-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.audit-lock-badge { background: #fee2e2; color: #b91c1c; }
.audit-draft-badge { background: #fef3c7; color: #b45309; }
.audit-sidebar-empty {
  padding: 1.2rem 0.7rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.audit-workspace {
  position: static;
  min-width: 0;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.audit-workspace > .tx-editor-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 2rem;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: center;
}

.audit-workspace-bar[hidden] { display: none !important; }

.audit-detail-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 14px;
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 35%),
    var(--surface);
  box-shadow: 0 10px 28px color-mix(in srgb, #0f172a 6%, transparent);
}

.audit-detail-identity h3 {
  margin: 0.42rem 0 0.18rem;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: -0.025em;
}

.audit-detail-identity p { margin: 0; }
.audit-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.audit-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.48rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 700;
}
.audit-status-in_progress { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.audit-status-in_review { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.audit-status-done { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.audit-status-deprecated { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

.audit-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.7rem 0;
}

.audit-workspace-kpi {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.audit-workspace-kpi-dot {
  width: 0.55rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--accent);
}
.audit-workspace-kpi-gaps .audit-workspace-kpi-dot,
.audit-workspace-kpi-overdue .audit-workspace-kpi-dot { background: #d97706; }
.audit-workspace-kpi > div { min-width: 0; }
.audit-workspace-kpi strong,
.audit-workspace-kpi span,
.audit-workspace-kpi small { display: block; }
.audit-workspace-kpi strong { font-size: 1.15rem; line-height: 1; }
.audit-workspace-kpi span { margin-top: 0.16rem; font-size: 0.72rem; font-weight: 700; }
.audit-workspace-kpi small {
  overflow: hidden;
  margin-top: 0.1rem;
  color: var(--text-muted);
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#audit-workspace-phase-slot {
  margin-bottom: 0.7rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

#audit-workspace-phase-slot .audit-phase-nav {
  margin: 0;
  padding: 0.28rem;
  border: 0;
  background: var(--surface-2);
}

#audit-workspace-phase-slot .audit-flow-toolbar {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
}

#audit-workspace-insights-slot > * { margin-bottom: 0.7rem; }

.audit-control-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.7rem 0;
}

.audit-control-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.audit-control-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, #0f172a 8%, transparent);
}
.audit-control-card.active { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.audit-control-compliant { border-left-color: #16a34a; }
.audit-control-partially_compliant { border-left-color: #d97706; }
.audit-control-non_compliant { border-left-color: #dc2626; }
.audit-control-not_applicable { border-left-color: #64748b; }
.audit-control-card-head,
.audit-control-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.audit-control-card h4 {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
}
.audit-control-card > p {
  display: -webkit-box;
  flex: 1;
  overflow: hidden;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.audit-control-completeness {
  padding: 0.16rem 0.38rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.62rem;
  font-weight: 700;
}
.audit-control-completeness.complete { background: #dcfce7; color: #166534; }
.audit-control-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.audit-control-card-tags span {
  padding: 0.16rem 0.35rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.61rem;
}
.audit-control-card-foot {
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.66rem;
}
.audit-control-card-empty {
  grid-column: 1 / -1;
  padding: 1.4rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 1180px) {
  .panel-audits { --audit-sidebar-width: 280px; }
  .audit-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .audit-layout,
  .audit-layout.audit-focused { grid-template-columns: 1fr; }
  .audit-list-panel {
    position: static;
    max-height: none;
  }
  .audit-list-wrap.audit-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 420px;
  }
  .audit-detail-hero { flex-direction: column; }
  .audit-detail-actions { justify-content: flex-start; }
  .audit-control-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .audit-list-wrap.audit-card-list,
  .audit-kpis { grid-template-columns: 1fr; }
  .audit-phase-num { display: none; }
}

.modal.hidden { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(148, 163, 184, 0.32);
}
.modal-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.1rem 1.25rem;
}
.hidden { display: none !important; }
@media (max-width: 960px) {
  .audit-layout { grid-template-columns: 1fr; }
  .audit-workspace { position: static; max-height: none; }
}

/* —— Expediente documental (Organización) —— */
.org-docs-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.org-docs-header h3 { margin: 0 0 0.25rem; }
.org-docs-summary {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f8fafc;
  margin-bottom: 0.85rem;
  line-height: 1.45;
}
.org-docs-table-wrap { overflow-x: auto; margin-top: 0.35rem; }
.org-docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.org-docs-table th,
.org-docs-table td {
  text-align: left;
  padding: 0.3rem 0.45rem;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}
.org-docs-table th {
  font-weight: 600;
  color: var(--text-muted);
  background: #f8fafc;
}
.org-docs-table tr.is-missing td { background: #fff7ed; }
.evid-lib-card {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}
.evid-lib-scroll {
  max-height: 360px;
  overflow: auto;
  margin-top: 0.5rem;
}
.evid-lib-card .org-docs-table td .btn-group {
  flex-wrap: wrap;
  gap: 0.25rem;
}
.org-doc-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.org-doc-pill-ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.org-doc-pill-partial { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.org-doc-pill-gap { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.org-doc-pill-gen { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.doc-idx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: 0.65rem 0 0.4rem;
}
.doc-idx-queues,
.doc-idx-saved-views,
.doc-idx-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.45rem 0;
}
.doc-idx-saved-views {
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}
.doc-idx-filter-pill {
  display: inline-flex;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-muted);
  font-size: 0.72rem;
}
.doc-idx-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 0.75rem;
  align-items: start;
}
.doc-idx-results { min-width: 0; }
.doc-idx-explorer .evid-lib-scroll { max-height: 560px; }
.doc-idx-preview {
  position: sticky;
  top: 0.75rem;
  max-height: 70vh;
  overflow: auto;
  min-height: 220px;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.doc-idx-preview-head,
.doc-idx-preview-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.doc-idx-preview-head h4 { margin: 0.15rem 0 0.5rem; }
.doc-idx-preview-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.doc-idx-preview-meta {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 0.75rem;
}
.doc-idx-preview-meta > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1fr);
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.doc-idx-preview-meta dt {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.doc-idx-preview-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}
.doc-idx-preview-content pre {
  max-height: 42vh;
  overflow: auto;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.doc-idx-preview-family,
.doc-idx-family {
  margin: 0.35rem 0;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.doc-idx-preview-family summary,
.doc-idx-family summary { cursor: pointer; }
.doc-idx-search-excerpt {
  max-width: 70ch;
  margin-top: 0.3rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}
@media (max-width: 980px) {
  .doc-idx-explorer { grid-template-columns: 1fr; }
  .doc-idx-preview {
    position: static;
    max-height: none;
  }
}
.doc-idx-quality { margin: 0.4rem 0; }
.doc-idx-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.doc-control-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 0.5rem;
}
.doc-control-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-height: 68px;
  padding: 0.65rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  text-align: left;
}
button.doc-control-kpi { cursor: pointer; font: inherit; }
button.doc-control-kpi:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgb(15 45 90 / 10%); }
.doc-control-kpi strong { font-size: 1.35rem; line-height: 1; }
.doc-control-kpi span { font-size: 0.76rem; font-weight: 650; }
.doc-control-kpi-primary { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.doc-control-kpi-ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.doc-control-kpi-warn { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.doc-control-kpi-danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.doc-control-kpi-muted { background: #f8fafc; color: #64748b; }
.doc-control-explanation {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid #2563eb;
  border-radius: 0 6px 6px 0;
  background: #f8fafc;
  color: #475569;
  font-size: 0.79rem;
  line-height: 1.45;
}

.audit-doc-dashboard-head {
  gap: 1rem;
  align-items: flex-end;
}

.audit-doc-dashboard-filter {
  min-width: min(360px, 100%);
  margin: 0;
}

.audit-doc-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 0.65rem;
  margin: 1rem 0;
}

.audit-doc-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.audit-doc-kpi strong {
  color: var(--accent);
  font-size: 1.2rem;
}

.audit-doc-kpi span,
.audit-doc-category-meta,
.audit-doc-status-line {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.audit-doc-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.audit-doc-dashboard-grid h4 {
  margin-bottom: 0.65rem;
}

.audit-doc-category {
  margin-bottom: 0.8rem;
}

.audit-doc-category-label {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.28rem;
  font-size: 0.82rem;
}

.audit-doc-category-label span {
  color: var(--text-muted);
  text-align: right;
}

.audit-doc-bar-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.audit-doc-bar-prepared,
.audit-doc-bar-approved {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}

.audit-doc-bar-prepared {
  background: #93c5fd;
}

.audit-doc-bar-approved {
  background: var(--success);
}

.audit-doc-category-meta {
  margin-top: 0.2rem;
}

.audit-doc-rings {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.audit-doc-ring {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) calc(var(--ring-pct) * 1%),
    #e2e8f0 0
  );
}

.audit-doc-ring-approved {
  background: conic-gradient(
    var(--success) calc(var(--ring-pct) * 1%),
    #e2e8f0 0
  );
}

.audit-doc-ring-audit {
  background: conic-gradient(
    var(--warning) calc(var(--ring-pct) * 1%),
    #e2e8f0 0
  );
}

.audit-doc-ring > div {
  width: 76px;
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
}

.audit-doc-ring strong {
  font-size: 1rem;
}

.audit-doc-ring span {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.audit-doc-status-line {
  margin-top: 0.75rem;
  text-align: center;
}

@media (max-width: 820px) {
  .audit-doc-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .audit-doc-category-label {
    flex-direction: column;
    gap: 0.1rem;
  }

  .audit-doc-category-label span {
    text-align: left;
  }
}
.doc-idx-folders { margin: 0.35rem 0 0.5rem; }
.doc-idx-folder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.25rem;
}
.doc-idx-chip {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.doc-idx-chip:hover { background: #e2e8f0; }
.doc-idx-dup-row { background: #fff7ed; }
.doc-confidentiality {
  display: inline-block;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid #cbd5e1;
}
.doc-confidentiality-public { background: #ecfdf5; color: #047857; }
.doc-confidentiality-internal { background: #eff6ff; color: #1d4ed8; }
.doc-confidentiality-confidential { background: #fff7ed; color: #c2410c; }
.doc-confidentiality-restricted { background: #fef2f2; color: #b91c1c; }
.doc-idx-related-views {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}
.doc-idx-related-views .card { padding: 0.75rem; }
.doc-idx-related-views h4 { margin: 0; }
.doc-process-package-grid { display: grid; gap: 0.4rem; }

/* ===========================================================================
   Rediseño del paso 15 · Documentos — sistema de diseño (Fase 1: sólo tokens)
   Spec: docs/designs/documentos-rediseno.md · Dominio: docs/decisiones/documental.md
   Paleta alineada con la paridad Secureframe (sidebar clara). Prefijo --doc-rd-*
   para no colisionar con --doc-accent (tema anterior del panel) ni con --doc-bg-*.
   Scoped a body.shell-modern .panel-documents: no filtra al resto de la plataforma.
   Las vistas (biblioteca, detalle 7.5, cola de firmas) consumen estos tokens en
   las fases siguientes; esta fase no toca markup.
   =========================================================================== */
body.shell-modern .panel-documents {
  /* Superficies */
  --doc-rd-ground: #eff2f7;
  --doc-rd-surface: #ffffff;
  --doc-rd-border: #e4e8f0;
  /* Tinta */
  --doc-rd-ink: #16202e;
  --doc-rd-body: #3d4759;
  --doc-rd-muted: #6c7789;
  /* Primario (azul GAMR) */
  --doc-rd-primary: #2563eb;
  /* Estados del ciclo documental */
  --doc-rd-vigente: #09a35a;
  --doc-rd-revision: #d98a06;
  --doc-rd-obsoleto: #dc2626;
  --doc-rd-borrador: #8a94a5;
  /* Pills de estado: fondo tintado claro + texto oscuro (contraste ≥ 4.5:1) */
  --doc-rd-pill-vigente-bg: #e2f4ec;
  --doc-rd-pill-vigente-fg: #05714a;
  --doc-rd-pill-revision-bg: #fbefd8;
  --doc-rd-pill-revision-fg: #8a5406;
  --doc-rd-pill-obsoleto-bg: #fbe5e5;
  --doc-rd-pill-obsoleto-fg: #b11f1f;
  --doc-rd-pill-generado-bg: #e7effe;
  --doc-rd-pill-generado-fg: #1d4ed8;
  /* Tipografía */
  --doc-rd-font-title: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --doc-rd-font-body: "IBM Plex Sans", system-ui, sans-serif;
  --doc-rd-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  /* Radios */
  --doc-rd-radius-card: 13px;
  --doc-rd-radius-input: 9px;
  --doc-rd-radius-pill: 999px;
}

/* ---------------------------------------------------------------------------
   Rediseño del paso 15 · Fase 2: biblioteca / control documental (re-skin)
   Re-skin del índice maestro (renderEvidenceLibrary en js/grc.js) al sistema de
   diseño. No cambia la lógica: pills de estado con punto, códigos/fechas en mono,
   etiqueta Generado/Cargado, tarjetas de superficie sin borde-izquierdo de color.
   --------------------------------------------------------------------------- */
/* Tira de KPIs de la cabecera del panel */
body.shell-modern .panel-documents .document-workspace-kpis article {
  background: var(--doc-rd-surface);
  border: 1px solid var(--doc-rd-border);
  border-radius: var(--doc-rd-radius-card);
  box-shadow: 0 1px 2px rgba(22, 32, 46, 0.04);
}
body.shell-modern .panel-documents .document-workspace-kpis strong {
  font-family: var(--doc-rd-font-mono);
  color: var(--doc-rd-ink);
}
body.shell-modern .panel-documents .document-workspace-kpis article > span {
  color: var(--doc-rd-body);
}
body.shell-modern .panel-documents .document-workspace-kpis small {
  color: var(--doc-rd-muted);
}

/* Códigos de documento, versiones y fechas ISO en monoespaciada, en todo el panel
   (biblioteca, control, cola de firmas y detalle).
   `!important` para ganarle a `body.shell-modern code { font-family: var(--mono) !important }`
   (línea ~11855), que es el patrón del propio shell moderno. */
body.shell-modern .panel-documents code,
body.shell-modern .panel-documents .doc-rd-mono {
  font-family: var(--doc-rd-font-mono) !important;
  font-size: 0.82em;
  color: var(--doc-rd-body);
}
/* El código se lee como texto mono, no como chip gris (el diseño lo muestra inline) */
body.shell-modern .panel-documents .org-docs-table code {
  background: transparent;
  padding: 0;
}

/* Encabezados de la tabla con la tipográfica de títulos */
body.shell-modern .panel-documents .org-docs-table thead th {
  font-family: var(--doc-rd-font-title);
  color: var(--doc-rd-muted);
  font-weight: 600;
}

/* Pills de estado del ciclo documental: fondo tintado + punto de color */
body.shell-modern .panel-documents .doc-rd-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.18em 0.62em;
  border-radius: var(--doc-rd-radius-pill);
  font-family: var(--doc-rd-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}
body.shell-modern .panel-documents .doc-rd-pill .doc-rd-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
body.shell-modern .panel-documents .doc-rd-pill-vigente {
  background: var(--doc-rd-pill-vigente-bg);
  color: var(--doc-rd-pill-vigente-fg);
}
body.shell-modern .panel-documents .doc-rd-pill-revision {
  background: var(--doc-rd-pill-revision-bg);
  color: var(--doc-rd-pill-revision-fg);
}
body.shell-modern .panel-documents .doc-rd-pill-obsoleto {
  background: var(--doc-rd-pill-obsoleto-bg);
  color: var(--doc-rd-pill-obsoleto-fg);
}
body.shell-modern .panel-documents .doc-rd-pill-borrador {
  background: color-mix(in srgb, var(--doc-rd-borrador) 16%, #fff);
  color: #4a5464;
}

/* Etiqueta de origen: Generado (plataforma) vs. Cargado (empresa) */
body.shell-modern .panel-documents .doc-rd-tag {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.08em 0.5em;
  border-radius: var(--doc-rd-radius-pill);
  font-family: var(--doc-rd-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
body.shell-modern .panel-documents .doc-rd-tag-generado {
  background: var(--doc-rd-pill-generado-bg);
  color: var(--doc-rd-pill-generado-fg);
}
body.shell-modern .panel-documents .doc-rd-tag-cargado {
  background: var(--doc-rd-ground);
  color: var(--doc-rd-muted);
  border: 1px solid var(--doc-rd-border);
}
body.shell-modern .panel-documents .doc-rd-tag-monitoreo {
  background: #dbeafe;
  color: #1e40af;
}
.doc-control-kpi-monitoring {
  background: #dbeafe !important;
  color: #1e40af !important;
  border: 1px solid #93c5fd;
  cursor: pointer;
}
.doc-monitoring-summary {
  font-style: italic;
  color: #1e40af;
  max-width: 40ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Rediseño del paso 15 · Fase 3: detalle del documento — cadena 7.5 (stepper)
   Stepper vertical en el panel de vista previa (#evid-lib-preview). El estado de
   cada eslabón lo deriva cadena75Html en js/grc.js desde el timeline; acá sólo el
   color por estado. Línea de conexión con el color del tramo ya recorrido.
   --------------------------------------------------------------------------- */
body.shell-modern .panel-documents .doc-rd-chain-wrap {
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--doc-rd-surface);
  border: 1px solid var(--doc-rd-border);
  border-radius: var(--doc-rd-radius-card);
}
body.shell-modern .panel-documents .doc-rd-chain-head {
  font-family: var(--doc-rd-font-title);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--doc-rd-muted);
  margin-bottom: 10px;
}
body.shell-modern .panel-documents .doc-rd-chain {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.shell-modern .panel-documents .doc-rd-step {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 0 0 14px 0;
}
body.shell-modern .panel-documents .doc-rd-step:last-child {
  padding-bottom: 0;
}
body.shell-modern .panel-documents .doc-rd-step-node {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  margin-top: 2px;
  border: 2px solid var(--doc-rd-border);
  background: var(--doc-rd-surface);
  position: relative;
  z-index: 1;
}
/* Línea que baja al eslabón siguiente */
body.shell-modern .panel-documents .doc-rd-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--doc-rd-border);
}
body.shell-modern .panel-documents .doc-rd-step-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--doc-rd-font-body);
  line-height: 1.35;
}
body.shell-modern .panel-documents .doc-rd-step-label {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--doc-rd-ink);
}
body.shell-modern .panel-documents .doc-rd-step-when {
  font-size: 0.74rem;
  color: var(--doc-rd-muted);
}
body.shell-modern .panel-documents .doc-rd-step-who {
  font-size: 0.74rem;
  color: var(--doc-rd-body);
}
/* Estados del eslabón */
body.shell-modern .panel-documents .doc-rd-step-done .doc-rd-step-node {
  background: var(--doc-rd-vigente);
  border-color: var(--doc-rd-vigente);
}
body.shell-modern .panel-documents .doc-rd-step-done:not(:last-child)::before {
  background: var(--doc-rd-vigente);
}
body.shell-modern .panel-documents .doc-rd-step-current .doc-rd-step-node {
  border-color: var(--doc-rd-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--doc-rd-primary) 20%, transparent);
}
body.shell-modern .panel-documents .doc-rd-step-current .doc-rd-step-label {
  color: var(--doc-rd-primary);
}
body.shell-modern .panel-documents .doc-rd-step-warn .doc-rd-step-node {
  background: var(--doc-rd-revision);
  border-color: var(--doc-rd-revision);
}
body.shell-modern .panel-documents .doc-rd-step-obsolete .doc-rd-step-node {
  background: var(--doc-rd-obsoleto);
  border-color: var(--doc-rd-obsoleto);
}
body.shell-modern .panel-documents .doc-rd-step-obsolete .doc-rd-step-label {
  color: var(--doc-rd-obsoleto);
}
body.shell-modern .panel-documents .doc-rd-step-pending .doc-rd-step-label,
body.shell-modern .panel-documents .doc-rd-step-muted .doc-rd-step-label {
  color: var(--doc-rd-muted);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Rediseño del paso 15 · Fase 4: cola de firmas (re-skin)
   Re-skin de la vista «Firmas» (renderSignatures en js/document-control.js) al
   sistema de diseño: cabecera de vista, tarjeta «lo que te toca firmar» y la barra
   de lote como superficies. La lógica (previo, motivo, force, paginado) no cambia;
   la compuerta del motivo la valida el servidor.
   --------------------------------------------------------------------------- */
body.shell-modern .panel-documents .doc-rd-view-head {
  margin: 4px 0 14px;
}
body.shell-modern .panel-documents .doc-rd-view-head h3 {
  font-family: var(--doc-rd-font-title);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--doc-rd-ink);
  margin: 0 0 2px;
}
body.shell-modern .panel-documents .doc-rd-view-head p {
  font-family: var(--doc-rd-font-body);
  font-size: 0.84rem;
  color: var(--doc-rd-muted);
  margin: 0;
}
/* Tarjeta «lo que te toca firmar» */
body.shell-modern .panel-documents .dctl-mi-cola {
  background: var(--doc-rd-surface);
  border: 1px solid var(--doc-rd-border);
  border-radius: var(--doc-rd-radius-card);
  box-shadow: 0 1px 2px rgba(22, 32, 46, 0.04);
}
body.shell-modern .panel-documents .dctl-mi-cola[data-tone="warn"] {
  border-color: color-mix(in srgb, var(--doc-rd-revision) 45%, var(--doc-rd-border));
  background: color-mix(in srgb, var(--doc-rd-revision) 6%, var(--doc-rd-surface));
}
body.shell-modern .panel-documents .dctl-mi-cola-head strong {
  font-family: var(--doc-rd-font-title);
  color: var(--doc-rd-ink);
}
body.shell-modern .panel-documents .dctl-mi-cola-cifras b {
  font-family: var(--doc-rd-font-mono);
  color: var(--doc-rd-primary);
}
/* Barra de lote como superficie del sistema */
body.shell-modern .panel-documents .dctl-bulk-bar {
  background: var(--doc-rd-ground);
  border: 1px solid var(--doc-rd-border);
  border-radius: var(--doc-rd-radius-input);
}
body.shell-modern .panel-documents .dctl-bulk-count {
  font-family: var(--doc-rd-font-body);
  font-weight: 600;
  color: var(--doc-rd-ink);
}
/* Títulos de bucket con la tipográfica de títulos */
body.shell-modern .panel-documents .dctl-section > h3 {
  font-family: var(--doc-rd-font-title);
  color: var(--doc-rd-ink);
}

/* ---------------------------------------------------------------------------
   Rediseño del paso 15 · Fase 5: pulido
   - Columna de etiqueta del lateral del detalle con sitio para «Confidencialidad»
     (antes se pegaba al valor).
   - Responsive a ancho de teléfono: la tira de KPIs pasa a 2 columnas (el explorer
     lista+detalle y la tabla con scroll horizontal ya reflowan en el CSS base).
   --------------------------------------------------------------------------- */
body.shell-modern .panel-documents .doc-idx-preview-meta > div {
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
}
@media (max-width: 640px) {
  body.shell-modern .panel-documents .document-workspace-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.shell-modern .panel-documents .doc-rd-view-head h3 {
    font-size: 1rem;
  }
}

.panel-documents {
  --doc-accent: #315b7d;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--doc-accent) 9%, transparent), transparent 28rem),
    var(--bg);
}

.document-workspace-hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--doc-accent) 22%, var(--border));
  border-radius: 14px;
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--doc-accent) 6%, var(--surface)));
  box-shadow: 0 8px 28px rgb(15 23 42 / 6%);
}

.document-workspace-eyebrow {
  color: var(--doc-accent);
  font: 750 0.68rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-workspace-hero h2 {
  margin: 0.25rem 0 0.25rem;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.document-workspace-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--text-muted);
}

.document-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.document-workspace-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.8rem;
}

.document-workspace-kpis article {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgb(15 23 42 / 4%);
}

.document-workspace-kpis span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-workspace-kpis strong {
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1.1;
}

.document-workspace-kpis small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-workspace-tabs {
  position: sticky;
  z-index: 8;
  top: 0;
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  margin-bottom: 0.75rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 4px 16px rgb(15 23 42 / 5%);
  backdrop-filter: blur(9px);
}

.document-workspace-tabs button {
  flex: 0 0 auto;
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: 680 0.75rem/1.2 var(--font);
}

.document-workspace-tabs button:hover {
  color: var(--text);
  background: var(--surface-2);
}

.document-workspace-tabs button.active {
  border-color: color-mix(in srgb, var(--doc-accent) 28%, var(--border));
  background: color-mix(in srgb, var(--doc-accent) 9%, var(--surface));
  color: var(--doc-accent);
}

.document-workspace-view {
  min-height: 180px;
}

.document-workspace-view > .evid-lib-card,
.document-workspace-view > .doc-lifecycle-card,
.document-workspace-view > .card {
  margin: 0 !important;
}

.document-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.document-overview-card {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 16px rgb(15 23 42 / 4%);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.document-overview-card:hover {
  border-color: color-mix(in srgb, var(--doc-accent) 35%, var(--border));
  box-shadow: 0 9px 24px rgb(15 23 42 / 8%);
  transform: translateY(-1px);
}

.document-overview-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--doc-accent) 10%, var(--surface));
  color: var(--doc-accent);
  font: 800 0.7rem/1 var(--mono);
}

.document-overview-card > span:nth-child(2) {
  display: grid;
  gap: 0.28rem;
}

.document-overview-card strong { font-size: 0.9rem; }
.document-overview-card small { color: var(--text-muted); font-size: 0.72rem; line-height: 1.45; }
.document-overview-card i { color: var(--doc-accent); font-size: 1.1rem; }

.document-governance-note {
  margin-top: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--doc-accent) 22%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--doc-accent) 5%, var(--surface));
  color: var(--text-muted);
  font-size: 0.76rem;
}

@media (max-width: 1150px) {
  .document-workspace-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .document-workspace-hero { flex-direction: column; }
  .document-workspace-actions { width: 100%; justify-content: flex-start; }
  .document-workspace-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-overview-grid { grid-template-columns: 1fr; }
}

/* Repositorio documental (Drive) */
.doc-drive-card { margin-top: 0.25rem; }
.doc-drive-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin: 0.55rem 0 0.75rem;
}
.doc-drive-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.84rem;
}
.doc-drive-crumb {
  border: 0;
  background: transparent;
  color: var(--doc-accent, #0f766e);
  cursor: pointer;
  padding: 0.15rem 0.25rem;
  font: inherit;
  font-weight: 600;
}
.doc-drive-crumb:hover { text-decoration: underline; }
.doc-drive-sep { color: var(--text-muted); }
.doc-drive-dropzone {
  position: relative;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--doc-accent, #0f766e));
  border-radius: 10px;
  background: var(--surface);
  min-height: 220px;
  padding: 0.55rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.doc-drive-dropzone.is-dragover {
  border-color: var(--doc-accent, #0f766e);
  background: color-mix(in srgb, var(--doc-accent, #0f766e) 8%, var(--surface));
}
.doc-drive-drop-hint {
  margin: 0.55rem 0 0.15rem;
  text-align: center;
}
.doc-drive-empty {
  padding: 2.2rem 1rem;
  text-align: center;
  color: var(--text-muted);
}
.doc-drive-empty strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.doc-drive-table td { vertical-align: middle; }
.doc-drive-row.is-folder { cursor: pointer; }
.doc-drive-row.is-folder:hover { background: color-mix(in srgb, var(--doc-accent, #0f766e) 6%, transparent); }
.doc-drive-icon {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.4rem;
  border-radius: 2px;
  vertical-align: middle;
}
.doc-drive-icon.is-folder {
  background: color-mix(in srgb, #ca8a04 55%, var(--surface));
  border: 1px solid color-mix(in srgb, #a16207 40%, var(--border));
}
.doc-drive-icon.is-file {
  background: color-mix(in srgb, var(--doc-accent, #0f766e) 35%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--doc-accent, #0f766e) 40%, var(--border));
}
.doc-drive-actions {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
  white-space: nowrap;
}
#doc-drive-msg[data-tone="ok"] { color: #0f766e; }
#doc-drive-msg[data-tone="warn"] { color: #b45309; }
#doc-drive-msg[data-tone="error"] { color: #b42318; }

.doc-drive-ext-panel {
  margin: 0.5rem 0 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, #0f766e 22%, #e2e8f0);
  border-radius: 10px;
  background: color-mix(in srgb, #0f766e 5%, #fff);
}
.doc-drive-ext-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.doc-drive-ext-head p { margin: 0.25rem 0 0; }
.doc-drive-ext-list {
  display: grid;
  gap: 0.55rem;
}
.doc-drive-ext-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.55rem 0.65rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.doc-drive-ext-url {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  word-break: break-all;
  color: #0f766e;
}
.doc-drive-ext-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Ingesta por ZIP.
   El panel hereda el fondo de `.doc-drive-ext-panel` y **no** declara `display`: se
   muestra y se oculta con el atributo `hidden` desde JS, y un `display` de autor le
   gana al del navegador (es la trampa del asistente CISO y la de `.compliance-state`). */
.doc-drive-zip-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.doc-drive-zip-stats strong {
  font-size: 1.05rem;
  color: var(--text);
}
.doc-drive-zip-subtitle {
  margin: 0.9rem 0 0.4rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.doc-drive-zip-props {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 22rem;
  overflow-y: auto;
}
.doc-drive-zip-prop label {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.doc-drive-zip-prop label > span {
  display: grid;
  gap: 0.15rem;
}
.doc-drive-zip-prop input { margin-top: 0.2rem; }
.doc-drive-zip-sigs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.doc-drive-zip-sig {
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.doc-drive-zip-sig[data-strength='fuerte'] {
  border-color: color-mix(in srgb, #0f766e 40%, var(--border));
  background: color-mix(in srgb, #0f766e 8%, var(--surface));
  color: #0f766e;
}
.doc-drive-zip-sig[data-strength='debil'] {
  border-color: color-mix(in srgb, #b45309 40%, var(--border));
  background: color-mix(in srgb, #b45309 8%, var(--surface));
  color: #b45309;
}
/* Hay propuestas con señal fuerte esperando revisión. Es un realce, no una alarma:
   subir documentos sin vincularlos es un estado válido, solo no puede pasar
   desapercibido. */
#doc-drive-links.has-pending {
  border-color: color-mix(in srgb, #0f766e 45%, var(--border));
  background: color-mix(in srgb, #0f766e 10%, var(--surface));
  color: #0f766e;
}

/* Propuestas agrupadas por requisito: el scroll vive en el contenedor de grupos, no
   en cada grupo, para que un requisito con cinco documentos no genere su propia
   barra de scroll de tres filas. */
.doc-drive-zip-groups {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 26rem;
  overflow-y: auto;
}
.doc-drive-zip-groups .doc-drive-zip-props {
  max-height: none;
  overflow-y: visible;
}
.doc-drive-zip-group-head {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.doc-drive-zip-group-head strong { color: var(--text); }
.doc-drive-zip-scope {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin: 0.3rem 0 0.5rem;
  cursor: pointer;
}
.doc-drive-zip-discards {
  margin: 0.4rem 0 0.6rem;
  font-size: 0.8rem;
}
.doc-drive-zip-discards ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  max-height: 12rem;
  overflow-y: auto;
  color: var(--muted);
}

.doc-drive-dup-panel {
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, #b45309 35%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, #b45309 7%, var(--surface));
}
.doc-drive-dup-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.55rem;
}
.doc-drive-dup-head p { margin: 0.2rem 0 0; }
.doc-drive-dup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.doc-drive-dup-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.doc-drive-dup-item small {
  display: block;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.doc-drive-dup-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.doc-drive-dup-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.doc-drive-dup-item.severity-exact .doc-drive-dup-badge {
  color: #b42318;
  border-color: color-mix(in srgb, #b42318 40%, var(--border));
}
.doc-drive-dup-item.severity-high .doc-drive-dup-badge {
  color: #b45309;
  border-color: color-mix(in srgb, #b45309 40%, var(--border));
}

.doc-process-package {
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 0.5rem;
}
.doc-process-package summary {
  cursor: pointer;
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.doc-package-item { padding: 0.22rem 0; border-top: 1px solid #f1f5f9; }
.evid-lib-notes {
  margin-top: 0.2rem;
  max-width: 28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evid-lib-modal .form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.evid-lib-modal .form-grid input,
.evid-lib-modal .form-grid select,
.evid-lib-modal .form-grid textarea {
  font-weight: 400;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.org-doc-clause-partial { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.org-doc-clause-gap { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.doc-upload-dup-warning {
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 0.85rem;
  line-height: 1.55;
}
.doc-upload-dup-warning strong { color: #b45309; }

.doc-lifecycle-card {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}
.doc-lifecycle-pdca-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.65rem 0;
}
.doc-lifecycle-phase {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.15rem;
}
.doc-lifecycle-phase span {
  font-size: 1.35rem;
  font-weight: 700;
}
.doc-lifecycle-phase em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.doc-lifecycle-phase.is-warn { background: #fffbeb; border-color: #fde68a; }
.doc-lifecycle-phase.is-alert { background: #fef2f2; border-color: #fecaca; }
.doc-lifecycle-cycle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}
.doc-lifecycle-chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  cursor: pointer;
  font: inherit;
}
.doc-lifecycle-chip span {
  font-weight: 700;
  color: var(--accent, #2563eb);
}
.doc-lifecycle-alert-summary {
  margin-bottom: 0.45rem;
}
.doc-lifecycle-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.doc-lifecycle-alert-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid #e2e8f0;
}
.compliance-alert-center {
  margin: 0.9rem 0;
  padding: 0.8rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.home-compliance-alerts { margin: 1rem 0; }
.home-compliance-alert-summary { margin: 0.55rem 0; }
.home-compliance-alert-list ul {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-compliance-alert-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.home-compliance-alert-list time {
  color: var(--muted, #64748b);
  font-size: 0.75rem;
}
.compliance-alert-head h4,
.compliance-alert-head p { margin: 0; }
.compliance-alert-head p { margin-top: 0.2rem; }
.compliance-alert-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 0.35fr)) minmax(180px, 1fr);
  gap: 0.45rem;
  margin: 0.7rem 0;
}
.compliance-radar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
}
.compliance-radar-legend span::before {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.25rem;
  border-radius: 2px;
  content: "";
  background: #64748b;
}
.compliance-radar-legend span[data-domain="document"]::before,
.compliance-radar-stack i[data-domain="document"] { background: #2563eb; }
.compliance-radar-legend span[data-domain="evidence"]::before,
.compliance-radar-stack i[data-domain="evidence"] { background: #0f766e; }
.compliance-radar-legend span[data-domain="control"]::before,
.compliance-radar-stack i[data-domain="control"] { background: #7c3aed; }
.compliance-radar-legend span[data-domain="action"]::before,
.compliance-radar-stack i[data-domain="action"] { background: #d97706; }
.compliance-radar-legend span[data-domain="audit"]::before,
.compliance-radar-stack i[data-domain="audit"] { background: #475569; }
.compliance-radar-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(64px, 1fr));
  gap: 0.55rem;
  align-items: end;
  min-height: 240px;
  padding: 0.65rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  overflow-x: auto;
  background: var(--orizon-surface);
}
.compliance-radar-column {
  display: grid;
  grid-template-rows: 170px auto auto;
  gap: 0.2rem;
  align-items: end;
  min-width: 62px;
  padding: 0.3rem;
  border: 0;
  border-radius: 6px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.compliance-radar-column:hover,
.compliance-radar-column:focus-visible {
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  outline: 1px solid var(--accent, #2563eb);
}
.compliance-radar-stack {
  display: flex;
  flex-direction: column-reverse;
  align-self: end;
  width: min(54px, 82%);
  min-height: 4px;
  margin: 0 auto;
}
.compliance-radar-stack i {
  display: block;
  min-height: 3px;
}
.compliance-radar-column strong,
.compliance-radar-column small { text-align: center; }
.compliance-alert-list {
  display: grid;
  gap: 0.45rem;
  max-height: 560px;
  overflow: auto;
  margin-top: 0.7rem;
}
.compliance-alert-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem;
  border: 1px solid var(--border, #e2e8f0);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--surface, #fff);
}
.compliance-alert-item[data-severity="critical"] { border-left-color: var(--danger, #dc2626); }
.compliance-alert-item[data-severity="warning"] { border-left-color: #d97706; }
.compliance-alert-item[data-severity="info"] { border-left-color: var(--accent, #2563eb); }
.compliance-alert-title-row,
.compliance-alert-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.compliance-alert-item-main { min-width: 0; }
.compliance-alert-item-main p { margin: 0.25rem 0; }
.compliance-alert-severity {
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border, #cbd5e1) 55%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}
.audit-cycle-timeline-card { grid-column: 1 / -1; }
.audit-cycle-timeline {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0.5rem 0.25rem;
}
.audit-cycle-node {
  position: relative;
  display: grid;
  gap: 0.2rem;
  flex: 1 0 170px;
  min-width: 170px;
  padding: 0.7rem 0.7rem 0.7rem 2rem;
  border: 0;
  border-top: 2px solid var(--border, #cbd5e1);
  text-align: left;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.audit-cycle-node.is-current {
  border-top-color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 7%, transparent);
}
.audit-cycle-index {
  position: absolute;
  top: -0.75rem;
  left: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 2px solid var(--border, #cbd5e1);
  border-radius: 50%;
  background: var(--surface, #fff);
  font-size: 0.7rem;
  font-weight: 700;
}
.audit-cycle-node.is-current .audit-cycle-index { border-color: var(--accent, #2563eb); }
.audit-cycle-node small,
.audit-cycle-node em {
  color: var(--muted, #64748b);
  font-size: 0.72rem;
}
@media (max-width: 900px) {
  .doc-lifecycle-pdca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compliance-alert-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compliance-alert-item { flex-direction: column; }
  .compliance-radar-chart { min-width: 650px; }
}

/* ── Legibilidad y jerarquía global (WCAG) ────────────────────────────────
   Clases reutilizables:
   .ui-secondary  texto explicativo
   .metric-card / .metric-value / .metric-label  indicadores
   .info-label    etiquetas compactas de fichas
   .section-heading / .section-description  encabezados de sección
   .system-alert  errores de sistema y conectividad
*/
:root {
  --text-muted: #4a5568;
  --text-secondary: #4a5568;
  --muted: #4a5568;
  --metric-emphasis: #1d4ed8;
  --alert-danger-bg: rgba(220, 38, 38, 0.07);
  --alert-danger-border: rgba(185, 28, 28, 0.28);
  --alert-danger-text: #991b1b;
}

.ui-secondary,
.subtitle,
.hint,
.stat-label,
.kpi-label,
.kpi-sub,
.home-kpi-label,
.an-kpi-label,
.an-kpi-sub,
.sc-audit-kpi-l,
.org-page-header p,
.org-profile-identity p,
.org-profile-editor .org-profile-tabs small,
.card > p,
.card header p {
  color: var(--text-secondary);
  font-weight: 500;
}

.subtitle,
.hint,
.org-page-header p,
.org-profile-identity p,
.card > p,
.card header p {
  line-height: 1.55;
}

/* Los indicadores siguen la misma lectura: número dominante, etiqueta debajo. */
.metric-card,
.stat-card,
.kpi-card,
.home-kpi-card,
.an-kpi {
  min-height: 6.5rem;
}

.kpi-top {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.metric-value,
.stat-value,
.kpi-value,
.home-kpi-value,
.an-kpi .an-kpi-value {
  color: var(--metric-emphasis);
  font-family: var(--mono);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.metric-label,
.stat-label,
.kpi-label,
.home-kpi-label,
.an-kpi .an-kpi-label {
  display: block;
  margin-top: 0.45rem;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Etiquetas consistentes para las fichas informativas de la derecha. */
.info-label,
.org-profile-fact small,
.metric-block h4,
.ae-section-title,
.org-profile-section-label {
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

/* Aire vertical entre títulos, descripciones y contenido. */
.section-heading,
.card > h2,
.card > h3,
.card header h2,
.card header h3,
.org-docs-header h3,
.org-profile-field-card h4 {
  margin-bottom: 0.65rem;
}

.section-description,
.card > h2 + p,
.card > h3 + p,
.card header h2 + p,
.card header h3 + p,
.org-docs-header h3 + p,
.org-profile-field-card h4 + p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.org-readiness-card .org-docs-header {
  margin-bottom: 1rem;
}

/* Banner accesible para fallos de sistema/conectividad. */
.system-alert {
  position: relative;
  z-index: 99;
  width: min(1180px, calc(100% - 2rem));
  margin: 0.75rem auto 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--alert-danger-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, var(--alert-danger-bg));
  color: var(--alert-danger-text);
  box-shadow: var(--shadow);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
}

.system-alert[hidden] { display: none; }

.system-alert-icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.1);
  font-size: 0.95rem;
}

.system-alert-message {
  min-width: 0;
  overflow-wrap: anywhere;
}

.system-alert-close {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: 700 1.05rem/1 var(--font);
  cursor: pointer;
}

.system-alert-close:hover,
.system-alert-close:focus-visible {
  background: rgba(220, 38, 38, 0.1);
  outline: 2px solid rgba(185, 28, 28, 0.35);
  outline-offset: 1px;
}

@media (max-width: 720px) {
  .metric-card,
  .stat-card,
  .kpi-card,
  .home-kpi-card,
  .an-kpi {
    min-height: 5.75rem;
  }

  .system-alert {
    width: calc(100% - 1rem);
    margin-top: 0.5rem;
  }
}

@media print {
  .header,
  .auth-portal,
  .nav,
  .system-alert {
    display: none !important;
  }
}

/* ── Navegación modular (heredada por Minimalismo Cálido) ─────────────── */
.nav-btn {
  border-color: var(--orizon-border);
  background: var(--orizon-surface);
  color: var(--orizon-text);
  box-shadow: var(--shadow-base);
}

.nav-btn:hover {
  border-color: var(--orizon-green);
  background: var(--orizon-green-soft);
  color: var(--orizon-ink);
  box-shadow: var(--shadow-base);
}

.nav-btn.active {
  border-color: var(--orizon-green);
  background: var(--orizon-green);
  color: var(--orizon-white);
}

.nav-group {
  border-color: var(--orizon-border);
  background: var(--orizon-bg);
}

.nav-group.is-active {
  border-color: rgba(111, 242, 24, 0.38);
  background: var(--orizon-bg);
}

.nav-group-label {
  color: #6ff218;
}

.nav-admin-btn {
  margin-left: auto;
  border-color: rgba(111, 242, 24, 0.65);
}

.nav-admin-btn::before {
  content: "⚙";
  margin-right: 0.35rem;
  font-size: 0.72rem;
}

.nav-admin-btn.rbac-denied,
.nav-admin-btn[hidden] {
  display: none !important;
}

/* ── Administración de usuarios y roles ───────────────────────────────── */
.panel-admin {
  --admin-green: var(--orizon-green);
}

.admin-page-eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--admin-green);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-org-assign-callout {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
}
.admin-org-assign-callout strong {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1d4ed8;
}
.admin-org-assign-callout > span {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}
.admin-org-assign-callout .hint { margin: 0; }
.admin-org-assign-badge {
  margin: 0.35rem 0 0;
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1e40af;
  font-size: 0.78rem;
  font-weight: 600;
}

.admin-summary-card {
  position: relative;
  min-width: 0;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 1rem 1.1rem;
  border: 1px solid var(--orizon-border);
  border-radius: 16px;
  background: var(--orizon-surface);
  box-shadow: var(--shadow);
}

.admin-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--admin-green);
}

.admin-summary-card > span {
  color: var(--orizon-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.admin-summary-card strong {
  margin: 0.35rem 0;
  color: var(--admin-green);
  font: 750 2rem/1 var(--mono);
}

.admin-summary-card small {
  overflow: hidden;
  color: var(--orizon-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.7fr);
  gap: 1rem;
  align-items: start;
}

.admin-users-card,
.admin-roles-card {
  min-width: 0;
  margin: 0;
}

.admin-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-card-header h3 {
  margin: 0 0 0.25rem;
  color: var(--orizon-ink);
}

.admin-card-header p {
  margin: 0;
}

.admin-search {
  min-width: min(260px, 100%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.75rem;
  border: 1px solid var(--orizon-border);
  border-radius: 9px;
  background: var(--orizon-bg);
  color: var(--orizon-muted);
}

.admin-search:focus-within {
  border-color: var(--admin-green);
  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.08);
}

.admin-search input {
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.admin-user-identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 190px;
}

.admin-user-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 10px;
  background: rgba(4, 120, 87, 0.11);
  color: var(--admin-green);
  font-size: 0.8rem;
  font-weight: 800;
}

.admin-user-identity > span:last-child {
  min-width: 0;
}

.admin-user-identity strong,
.admin-user-identity small {
  display: block;
}

.admin-user-identity strong {
  overflow: hidden;
  color: var(--orizon-ink);
  text-overflow: ellipsis;
}

.admin-user-identity small {
  margin-top: 0.15rem;
  color: var(--orizon-muted);
}

.admin-role-pill,
.admin-status-pill,
.admin-superadmin-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--orizon-border);
  border-radius: 999px;
  background: var(--orizon-surface-alt);
  color: var(--orizon-muted);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-role-pill[data-role="administrador"],
.admin-superadmin-pill {
  border-color: rgba(216, 30, 46, 0.22);
  background: var(--orizon-green-soft);
  color: var(--admin-green);
}

.admin-status-pill.is-active {
  border-color: rgba(216, 30, 46, 0.22);
  background: var(--orizon-green-soft);
  color: var(--orizon-green);
}

.admin-status-pill.is-inactive {
  border-color: rgba(185, 28, 28, 0.23);
  background: rgba(220, 38, 38, 0.08);
  color: var(--semantic-danger);
}

.admin-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.admin-inline-message {
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--orizon-border);
  border-radius: 9px;
  background: var(--orizon-surface-alt);
  color: var(--orizon-muted);
  font-size: 0.78rem;
}

.admin-inline-message[data-tone="success"] {
  border-color: rgba(4, 120, 87, 0.24);
  color: var(--orizon-green);
}

.admin-inline-message[data-tone="error"] {
  border-color: rgba(185, 28, 28, 0.24);
  color: var(--semantic-danger);
}

.admin-backup-card {
  margin: 0 0 1.25rem;
}

.admin-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin: 0.85rem 0 0.5rem;
}

.admin-backup-import-label {
  cursor: pointer;
  margin: 0;
}

.admin-backup-preview {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.9rem;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--orizon-border-solid, #E6EAF0);
  border-radius: 10px;
  background: #F8FAFC;
  color: #334155;
  font: 500 0.75rem/1.45 "JetBrains Mono", ui-monospace, monospace;
  white-space: pre-wrap;
}

.admin-roles-list {
  display: grid;
  gap: 0.6rem;
}

.admin-role-card {
  padding: 0.75rem;
  border: 1px solid var(--orizon-border);
  border-radius: 12px;
  background: var(--orizon-bg);
}

.admin-role-card > div {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.admin-role-card > div > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.admin-role-system {
  padding: 0.16rem 0.38rem;
  border: 1px solid var(--orizon-border);
  border-radius: 999px;
  color: var(--orizon-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-role-actions {
  display: flex;
  gap: 0.15rem;
}

.admin-role-actions .btn {
  padding: 0.2rem 0.35rem;
  font-size: 0.62rem;
}

.admin-role-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-top: 0.32rem;
  border-radius: 50%;
  background: var(--orizon-muted);
}

.admin-role-card[data-role="administrador"] .admin-role-dot {
  background: var(--admin-green);
  box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.08);
}

.admin-role-card strong,
.admin-role-card small {
  display: block;
}

.admin-role-card strong {
  color: var(--orizon-ink);
  font-size: 0.82rem;
}

.admin-role-card small {
  margin-top: 0.2rem;
  color: var(--orizon-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.admin-role-card details {
  margin-top: 0.65rem;
  color: var(--orizon-muted);
  font-size: 0.7rem;
}

.admin-role-card summary {
  cursor: pointer;
  font-weight: 650;
}

.admin-role-card ul {
  max-height: 150px;
  overflow: auto;
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.admin-role-card li {
  margin-bottom: 0.25rem;
}

.admin-user-editor {
  max-width: 980px;
  margin: 1rem auto 0;
  border-color: rgba(4, 120, 87, 0.24);
}

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

.admin-user-form-grid .field small {
  color: var(--orizon-muted);
  font-size: 0.68rem;
}

.admin-active-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem;
  border: 1px solid var(--orizon-border);
  border-radius: 10px;
  background: var(--orizon-bg);
  cursor: pointer;
}

.admin-active-toggle input {
  width: 18px;
  height: 18px;
}

.admin-active-toggle strong,
.admin-active-toggle small {
  display: block;
}

.admin-active-toggle strong {
  color: var(--orizon-ink);
  font-size: 0.8rem;
}

.admin-active-toggle small {
  margin-top: 0.15rem;
  color: var(--orizon-muted);
  font-size: 0.68rem;
}

.admin-permissions-fieldset {
  margin: 0 0 1rem;
  padding: 0.8rem;
  border: 1px solid var(--orizon-border);
  border-radius: 12px;
}

.admin-permissions-fieldset legend {
  padding: 0 0.4rem;
  color: var(--orizon-ink);
  font-size: 0.78rem;
  font-weight: 700;
}

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

.admin-permission-option {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--orizon-border);
  border-radius: 9px;
  background: var(--orizon-bg);
  cursor: pointer;
}

.admin-permission-option:has(input:checked) {
  border-color: rgba(4, 120, 87, 0.32);
  background: rgba(4, 120, 87, 0.045);
}

.admin-permission-option input {
  width: 16px;
  height: 16px;
  margin-top: 0.05rem;
}

.admin-permission-option span {
  min-width: 0;
}

.admin-permission-option strong,
.admin-permission-option code {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-permission-option strong {
  color: var(--orizon-text);
  font-size: 0.68rem;
}

.admin-permission-option code {
  margin-top: 0.16rem;
  color: var(--orizon-muted);
  font-size: 0.6rem;
}

.admin-form-error {
  margin: 0 0 0.8rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(185, 28, 28, 0.25);
  border-radius: 9px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--semantic-danger);
  font-size: 0.78rem;
}

.admin-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 1100px) {
  .admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .nav-admin-btn {
    margin-left: 0;
  }

  .admin-summary-grid,
  .admin-user-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-permissions-grid {
    grid-template-columns: 1fr;
  }

  .admin-card-header {
    flex-direction: column;
  }

  .admin-search {
    width: 100%;
  }

  .admin-row-actions {
    flex-direction: column;
  }
}

/* ── GAMR All Light · Minimalismo Cálido (Arena + Oliva) ─────────────── */
:root {
  color-scheme: only light !important;
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #EFECE6;
  --border: #E4E0D8;
  --text: #444643;
  --text-muted: #6F726C;
  --orizon-bg: #F4F6F9;
  --orizon-surface: #FFFFFF;
  --orizon-surface-alt: #EFECE6;
  --orizon-dark: #EFECE6;
}

html,
body,
body:not(.auth-required),
body:not(.auth-required) .main,
body:not(.auth-required) .panel,
body:not(.auth-required) .panel.active {
  background: #F4F6F9 !important;
  color: #444643;
}

/* Estructuras, marcos y zonas de navegación */
.header,
.footer,
.nav,
.nav-group,
.nav-group.is-active,
.system-alert,
.panel > .panel-header,
.panel > .home-overview-header,
.card,
.table-wrap,
.data-table,
.audit-workspace,
.audit-list-panel,
.audit-report-editor,
.audit-report-preview-pane,
.audit-cabin-sidebar,
.audit-cabin-main,
.audit-cabin-context,
.audit-review-cabin,
.audit-list-panel .audit-toolbar,
.document-workspace-hero,
.org-page-header,
.audit-detail-hero,
.asset-modal,
.asset-modal-header,
.asset-modal-footer,
.org-profile-editor-shell,
.org-profile-editor-header,
.org-profile-form-actions,
.admin-users-card,
.admin-roles-card,
.admin-user-editor {
  border-color: #e5e7eb !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
}

/* Superficies secundarias: siempre grises claras */
.stat-card,
.kpi-card,
.home-kpi-card,
.metric-card,
.an-kpi,
.guide,
.fieldset,
.document-workspace-kpis article,
.document-overview-card,
.home-readiness-card,
.audit-workspace-kpi,
.audit-control-card,
.audit-req-form,
.admin-summary-card,
.admin-role-card,
.admin-permission-option,
.admin-active-toggle,
.doc-control-kpi,
.compliance-alert-item,
.audit-cycle-node,
.admin-inline-message {
  border-color: #e5e7eb !important;
  background: #f8f9fa !important;
  color: #1f2937 !important;
}

/* Autenticación completamente clara */
.auth-portal {
  background: #f4f5f7 !important;
  color: #1f2937 !important;
}

.auth-portal-shell,
.auth-portal-panel {
  border-color: #dbe1e8 !important;
  background: #ffffff !important;
  color: #1f2937 !important;
}

.auth-portal-brand {
  border-right: 1px solid #e5e7eb;
  background:
    radial-gradient(circle at 88% 10%, rgba(216, 30, 46, 0.10), transparent 18rem),
    #f8f9fa !important;
  color: #1f2937 !important;
}

.auth-portal-brand h1,
.auth-portal-brand p,
.auth-portal-brand small,
.auth-trust-list,
.auth-panel-heading h2,
.auth-field,
.auth-mobile-brand {
  color: #1f2937 !important;
}

.auth-portal-brand p,
.auth-portal-brand small,
.auth-panel-heading p,
.auth-check,
.auth-panel-footer {
  color: #64748b !important;
}

.auth-trust-list li span {
  background: var(--orizon-green-soft) !important;
  color: var(--orizon-green) !important;
}

/* Header claro */
.header h1,
.header .header-brand h1,
.header .subtitle,
.header .org-switcher .field,
.header .nav-group-label,
.footer,
.system-alert {
  color: #1f2937 !important;
}

.header .subtitle,
.header .org-switcher .field,
.header .nav-group-label {
  color: #64748b !important;
}

.header .org-switcher select,
.header .rbac-role-badge,
.header .workspace-sync-badge {
  color-scheme: only light !important;
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* Todos los botones parten de una superficie blanca */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.nav-btn,
.subnav-btn,
.header .btn,
.header .btn-secondary,
.header .btn-ghost {
  border-color: #cbd5e1 !important;
  border-radius: 6px;
  background: #ffffff !important;
  color: #1f2937 !important;
  box-shadow: none;
}

button:hover,
.btn:hover,
.nav-btn:hover,
.subnav-btn:hover,
.header .btn:hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1e3a8a !important;
}

/* Solo las acciones principales y estados activos usan verde, nunca oscuro */
.btn-primary,
.auth-submit-btn,
.nav-btn.active {
  border-color: var(--orizon-green) !important;
  background: var(--orizon-green) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.auth-submit-btn:hover,
.nav-btn.active:hover {
  border-color: var(--orizon-green-hover) !important;
  background: var(--orizon-green-hover) !important;
  color: #ffffff !important;
}

/* Global semantic helpers: replaces former inline presentation in index.html. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.work-queue-heading,
.scenario-register-heading {
  align-items: center;
  flex-wrap: wrap;
}

.work-queue-heading {
  margin-bottom: var(--space-3);
}

.work-queue-title,
.scenario-register-title,
.org-group-description {
  margin: 0;
}

.panel-heading-layout {
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.file-picker-action {
  margin: 0;
  cursor: pointer;
}

.scenario-register-heading {
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.scenario-register-description {
  margin: var(--space-1) 0 0;
}

.scenario-evaluation-heading,
.audit-meta-actions {
  margin-bottom: var(--space-3);
}

.scenario-control-action {
  align-self: end;
}

.scenario-generator-actions {
  margin-top: var(--space-3);
}

.risk-level-very-low {
  background: #d3ff4e;
  color: var(--orizon-ink);
}

.risk-level-low {
  background: #02a45a;
  color: var(--orizon-ink);
}

.risk-level-medium {
  background: #ffa600;
  color: var(--orizon-ink);
}

.risk-level-high {
  background: #ff1a00;
  color: var(--orizon-ink);
}

.risk-level-very-high {
  background: #c00000;
  color: var(--orizon-white);
}

.form-field-wide,
.role-description-field {
  grid-column: 1 / -1;
}

.governance-card-spacing {
  margin: var(--space-4) 0;
}

.document-search-field {
  min-width: 280px;
}

.document-filter-control {
  margin: 0;
}

.document-iso-field {
  min-width: 120px;
}

.inline-editor-card {
  margin-top: var(--space-4);
}

/* El panel de procesos automáticos. */
.platform-automations h4 {
  margin: 0.9rem 0 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pf-auto-table th[scope="row"] {
  display: grid;
  gap: 0.1rem;
  text-align: left;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.82rem !important;
}

.pf-auto-table th[scope="row"] small { color: var(--text-muted); font-weight: 400; }
.pf-auto-cad, .pf-auto-cuando { white-space: nowrap; font-size: 0.75rem; }
.pf-auto-resumen { font-size: 0.78rem; }

.pf-auto-escribe {
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.65rem;
  font-weight: 700;
}

.pf-auto-table tr[data-estado="error"] { background: #fef2f2; }
.pf-auto-table tr[data-estado="nunca"] .pf-auto-cuando { color: var(--text-muted); }
.pf-auto-table tr[data-debido="1"] .pf-auto-cad { font-weight: 700; color: #92400e; }

/* La columna «Rigen» del panel y la cola propia de firmas. */
.pf-docs {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pf-docs b { font-weight: 700; }
.pf-docs small { color: var(--text-muted); }
.pf-docs[data-tone="warn"] b { color: #92400e; }
.pf-docs[data-tone="muted"] { color: var(--text-muted); }

.dctl-mi-cola {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  border-left: 3px solid #0f766e;
}

.dctl-mi-cola[data-tone="warn"] { border-left-color: #d97706; background: #fffbf3; }

.dctl-mi-cola-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.dctl-mi-cola-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: baseline;
}

.dctl-mi-cola-cifras b {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.dctl-mi-cola-espera {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #92400e;
}

/*
 * Alta de empresa · el diálogo del proveedor.
 *
 * Reemplaza a la tarjeta que vivía adentro del paso 13 (`.organization-create-card`, que
 * se fue con sus reglas: una regla huérfana es la que revive el bloque en el próximo
 * retoque). Tres pasos, un riel arriba y el resultado del aprovisionamiento al final.
 */
.org-alta-modal {
  /* ⚠ El reset `* { margin: 0 }` del tope del archivo le gana al `margin: auto` con el
     que el navegador centra un `<dialog>`, así que el modal salía pegado al borde
     izquierdo y estirado a todo el alto. Se lo devuelve explícitamente. */
  margin: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  width: min(880px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
  background: #fff;
  color: var(--text);
}

.org-alta-modal::backdrop { background: rgba(15, 23, 42, 0.38); }

.org-alta-form {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: calc(100vh - 2rem);
}

.org-alta-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem 0.65rem;
  border-bottom: 1px solid var(--border);
}

.org-alta-head h3 { margin: 0.15rem 0 0.2rem; font-size: 1.1rem; }

.org-alta-eyebrow {
  color: var(--text-muted);
  font: 500 0.62rem/1.2 var(--mono, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.org-alta-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.org-alta-rail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.org-alta-rail-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font: 700 0.72rem/1 var(--mono, monospace);
}

.org-alta-rail-label { font-size: 0.78rem; font-weight: 600; }

.org-alta-rail-item.active {
  border-color: #0f766e;
  background: #f0f7f6;
  color: #0f766e;
}

.org-alta-rail-item.active .org-alta-rail-num { background: #0f766e; color: #fff; }
.org-alta-rail-item.is-done .org-alta-rail-num { background: #dcfce7; color: #14532d; }

.org-alta-body {
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.15rem;
}

.org-alta-paso[hidden] { display: none; }

.org-alta-nota {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid #0f766e;
  border-radius: 0 8px 8px 0;
  background: #f0f7f6;
  font-size: 0.78rem;
  line-height: 1.45;
}

.org-alta-personas {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.org-alta-persona {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
}

.org-alta-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.org-alta-msg {
  min-width: 0;
  margin: 0;
  flex: 1;
  font-size: 0.8rem;
  font-weight: 600;
}

.org-alta-msg[data-tone="error"] { color: #b91c1c; }
.org-alta-foot .btn-group { margin-left: auto; }

.org-alta-creada {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.org-alta-creada code {
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  background: var(--surface-2);
  font: 600 0.75rem/1.4 var(--mono, monospace);
}

/* El resultado del aprovisionamiento: cuatro casillas, no un cartel. */
.org-alta-pasos,
.org-alta-pasos-lista {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  padding: 0;
  list-style: none;
}

.org-alta-pasos-lista li {
  padding: 0.5rem 0.65rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.org-alta-pasos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.org-alta-pasos li > span:last-child { display: grid; gap: 0.15rem; }
.org-alta-pasos li strong { font-size: 0.82rem; }
.org-alta-pasos li span span { font-size: 0.74rem; color: var(--text-muted); }

.org-alta-paso-icono {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  font: 700 0.75rem/1 inherit;
}

.org-alta-pasos li[data-ok="1"] { border-color: #bbe2dc; background: #f8fdfc; }
.org-alta-pasos li[data-ok="1"] .org-alta-paso-icono { background: #dcfce7; color: #14532d; }
.org-alta-pasos li[data-ok="0"] { border-color: #fde68a; background: #fffbeb; }
.org-alta-pasos li[data-ok="0"] .org-alta-paso-icono { background: #fef3c7; color: #92400e; }
.org-alta-pasos li[data-ok="0"] span span { color: #92400e; }

.org-alta-siguiente {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.85rem;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
  .org-alta-persona { grid-template-columns: minmax(0, 1fr); }
  .org-alta-rail { grid-template-columns: minmax(0, 1fr); }
}

.organization-group-heading {
  margin-bottom: var(--space-2);
}

.asset-bulk-actions {
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

/* Ayuda plegable del modal de carga: PR vs SP y la convención de referencias.
   `<details>` trae su propio `display`, así que no necesita el override de
   `[hidden]` que vigila `legacy-hidden-panels.test.ts`. */
.asset-bulk-help {
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
}

.asset-bulk-help summary {
  cursor: pointer;
  font-weight: 600;
}

.asset-bulk-help ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  display: grid;
  gap: var(--space-2);
}

/* Acción prevista de cada fila en el previo de la carga masiva. */
.import-action {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.import-action-create { background: #e6f4ea; color: #14532d; }
.import-action-update { background: #fef3c7; color: #713f12; }
.import-action-unchanged { background: var(--surface-2, #eee); color: var(--muted, #666); }
.import-action-skip { background: var(--surface-2, #eee); color: var(--muted, #666); }
.import-action-error { background: #fee2e2; color: #7f1d1d; }

.asset-bulk-flag-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.document-modal-body {
  padding: var(--space-4) var(--space-5);
}

.document-modal-body-scroll {
  overflow: auto;
}

.document-modal-form-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 1200px) {
  .doc-idx-filters .document-search-field {
    min-width: 320px;
  }
}

@media (min-width: 980px) and (max-width: 1199px) {
  .doc-idx-filters .document-search-field {
    min-width: 240px;
  }
}

@media (min-width: 820px) and (max-width: 979px) {
  .doc-idx-filters .document-search-field {
    min-width: 220px;
  }
}

@media (min-width: 720px) and (max-width: 819px) {
  .panel-heading-layout,
  .scenario-register-heading {
    align-items: stretch;
  }

  .doc-idx-filters .document-search-field {
    min-width: 200px;
  }
}

@media (max-width: 560px) {
  .panel-heading-layout,
  .work-queue-heading,
  .scenario-register-heading {
    align-items: stretch;
  }

  .panel-heading-layout > *,
  .work-queue-heading > *,
  .scenario-register-heading > *,
  .document-search-field,
  .document-iso-field {
    min-width: 0;
    width: 100%;
  }

  .scenario-control-action {
    align-self: stretch;
  }

  .document-modal-body {
    padding: var(--space-3);
  }
}

/* Controles aplicados · navegación, métricas, filtros y estado vacío */
[data-step="9"] .tab-navigation-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-2);
  border: 1px solid var(--orizon-border);
  border-radius: var(--radius-card);
  background: var(--orizon-surface);
}

[data-step="9"] .tab-item {
  min-height: var(--height-compact);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--orizon-border);
  border-radius: var(--radius-standard);
  background: var(--orizon-bg);
  color: var(--orizon-text);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
}

[data-step="9"] .tab-item:hover {
  border-color: var(--orizon-green);
  color: var(--orizon-green);
}

[data-step="9"] .tab-item.active {
  border-color: var(--orizon-green);
  background: var(--orizon-green);
  color: var(--orizon-white);
}

[data-step="9"] .tab-item:focus-visible {
  outline: 3px solid var(--orizon-blue);
  outline-offset: 2px;
}

[data-step="9"] .metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-5);
}

[data-step="9"] .card-kpi {
  min-width: 0;
  min-height: 85px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--orizon-border);
  border-left: 4px solid var(--orizon-green);
  border-radius: var(--radius-card);
  background: var(--orizon-bg);
  box-shadow: var(--shadow-base);
}

[data-step="9"] .card-kpi .kpi-number {
  color: var(--orizon-green);
  font-family: "JetBrains Mono", monospace;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

[data-step="9"] .card-kpi .kpi-label {
  color: var(--orizon-muted);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

[data-step="9"] .controls-filter-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 0.35fr) minmax(160px, 0.35fr);
  gap: var(--space-3);
  align-items: end;
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--orizon-border);
  border-radius: var(--radius-card);
  background: var(--orizon-surface-alt);
}

[data-step="9"] .controls-filter-bar label {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--orizon-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

[data-step="9"] .controls-filter-bar input,
[data-step="9"] .controls-filter-bar select {
  width: 100%;
  height: var(--height-compact);
  min-height: var(--height-compact);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--orizon-border) !important;
  border-radius: var(--radius-standard);
  background: var(--orizon-bg) !important;
  color: var(--orizon-text) !important;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
}

[data-step="9"] .controls-filter-bar input::placeholder {
  color: var(--orizon-muted);
  opacity: 1;
}

[data-step="9"] .controls-filter-bar input:focus-visible,
[data-step="9"] .controls-filter-bar select:focus-visible {
  border-color: var(--orizon-blue) !important;
  outline: 3px solid var(--orizon-blue);
  outline-offset: 2px;
  box-shadow: none !important;
}

[data-step="9"] .empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 260px;
  padding: var(--space-6);
  border: 1px dashed var(--orizon-border);
  border-radius: var(--radius-card);
  background: var(--orizon-bg);
  color: var(--orizon-text);
  text-align: center;
}

[data-step="9"] .empty-state-container svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: var(--orizon-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-step="9"] .empty-state-title {
  margin: 0;
  color: var(--orizon-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.25;
}

[data-step="9"] .empty-state-desc {
  max-width: 52ch;
  margin: 0;
  color: var(--orizon-muted);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  [data-step="9"] .metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-step="9"] .controls-filter-bar {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(140px, 0.45fr));
  }
}

@media (max-width: 720px) {
  [data-step="9"] .tab-navigation-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  [data-step="9"] .tab-item {
    flex: 0 0 auto;
  }

  [data-step="9"] .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-step="9"] .controls-filter-bar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  [data-step="9"] .metrics-grid {
    grid-template-columns: 1fr;
  }

  [data-step="9"] .card-kpi,
  [data-step="9"] .controls-filter-bar,
  [data-step="9"] .empty-state-container {
    padding: var(--space-4);
  }
}

:root {
  /* Cristal Claro · tema profesional limpio y translúcido */
  --orizon-bg: #F4F6F9;
  --orizon-surface: #FFFFFF;
  --orizon-surface-alt: #EEF2F7;
  --orizon-glass: rgba(255, 255, 255, 0.72);
  --orizon-glass-strong: rgba(255, 255, 255, 0.88);
  --orizon-ink: #0B1220;
  --orizon-text: #3B4559;
  --orizon-muted: #6B778C;
  --orizon-border: rgba(15, 23, 42, 0.10);
  --orizon-border-solid: #E6EAF0;
  --orizon-green: #0F766E;
  --orizon-green-hover: #0D9488;
  --orizon-green-soft: #CCFBF1;
  --orizon-blue: #1D4ED8;
  --orizon-blue-dark: #1E3A8A;
  --orizon-white: #FFFFFF;
  --semantic-danger: #B91C1C;
  --semantic-danger-bg: #FEF2F2;
  --lh-success: #047857;
  --lh-success-bg: #ECFDF5;
  --lh-warning: #B45309;
  --lh-warning-bg: #FFFBEB;
  --lh-info: #0369A1;
  --lh-info-bg: #E0F2FE;
  --lh-input: #D0D7E2;
  --lh-ring: #0F766E;
  --lh-selection: #CCFBF1;
  --lh-row-hover: #F1F5F9;

  /* Compatibilidad con componentes heredados. */
  --bg: var(--orizon-bg);
  --surface: var(--orizon-surface);
  --surface-2: var(--orizon-surface-alt);
  --border: var(--orizon-border);
  --text: var(--orizon-text);
  --text-muted: var(--orizon-muted);
  --text-secondary: var(--orizon-muted);
  --muted: var(--orizon-muted);
  --accent: var(--orizon-green);
  --accent-hover: var(--orizon-green-hover);
  --metric-emphasis: var(--orizon-green);
  --shadow: var(--shadow-base);
  --shadow-md: var(--shadow-elevated);
  --radius: var(--radius-card);

  /* Lectura sostenida · arena cálida */
  --doc-bg-canvas: #F7F5F0;
  --doc-bg-surface: #EFECE6;
  --doc-ink-primary: #1C1D1B;
  --doc-ink-muted: #6F726C;

  /* Espaciado Base (Múltiplos de 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Dimensiones de Control */
  --height-compact: 36px;
  --height-login: 52px;

  /* Radios de Curvatura y Elevación */
  --radius-standard: 6px;
  --radius-card: 10px;
  --radius-portal: 24px;
  --radius-pill: 999px;
  --shadow-base: 0 2px 14px rgba(15, 23, 42, 0.05);
  --shadow-elevated: 0 10px 28px rgba(15, 23, 42, 0.08);
}


.subnav-btn.active,
button[aria-pressed="true"] {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1e3a8a !important;
}

.btn-danger-text,
.btn-danger-text:hover {
  border-color: #fecaca !important;
  background: #fff !important;
  color: #b91c1c !important;
}

/* Formularios, tablas y overlays claros */
input,
select,
textarea,
.auth-input-wrap input,
.admin-search {
  color-scheme: only light !important;
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  color: #1f2937 !important;
}

.data-table th {
  border-color: #e5e7eb !important;
  background: #f4f5f7 !important;
  color: #334155 !important;
}

.data-table td,
.data-table tbody tr:hover td {
  border-color: #e5e7eb !important;
  background: #ffffff !important;
  color: #1f2937 !important;
}

.asset-modal::backdrop,
.org-profile-editor-backdrop {
  background: rgba(148, 163, 184, 0.32) !important;
}

/* Texto que antes estaba preparado para superficies negras */
.panel-header h2,
.home-overview-header h2,
.document-workspace-hero h2,
.org-page-header h2,
.card h3,
.audit-detail-hero h2,
.audit-detail-hero h3,
.admin-card-header h3,
.admin-user-identity strong,
.admin-active-toggle strong,
.admin-permission-option strong {
  color: #111827 !important;
}

.panel-header p,
.home-overview-header p,
.card > p,
.card header p,
.hint,
.subtitle,
.admin-user-identity small,
.admin-role-card small {
  color: #64748b !important;
}

/* Verde accesible sobre blanco: Emerald 700 (contraste WCAG AA). */
.panel-admin {
  --admin-green: var(--orizon-green);
}

.metric-value,
.stat-value,
.kpi-value,
.home-kpi-value,
.an-kpi .an-kpi-value,
.audit-workspace-kpi strong,
.audit-control-card strong,
.admin-summary-card strong,
.admin-page-eyebrow,
.admin-user-avatar,
.auth-eyebrow,
.auth-panel-heading .auth-eyebrow,
.auth-password-toggle,
.auth-text-button,
.home-card-link,
a {
  color: var(--orizon-green);
}

.header .logo,
.auth-brand-mark {
  border-color: var(--orizon-green) !important;
  background: var(--orizon-green) !important;
  color: #ffffff !important;
}

.home-kpi-card::before,
.stat-card::before,
.kpi-card::before,
.an-kpi::before,
.admin-summary-card::before {
  background: var(--orizon-green) !important;
}

.header .workspace-sync-badge[data-sync="saved"],
.admin-role-pill[data-role="administrador"],
.admin-superadmin-pill,
.admin-status-pill.is-active {
  border-color: rgba(216, 30, 46, 0.22) !important;
  background: var(--orizon-green-soft) !important;
  color: var(--orizon-green) !important;
}

.auth-check input,
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--orizon-green);
}

.auth-trust-list li span {
  background: var(--orizon-green-soft) !important;
  color: var(--orizon-green) !important;
}

.btn-primary,
.auth-submit-btn,
.nav-btn.active {
  border-color: var(--orizon-green) !important;
  background: var(--orizon-green) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.auth-submit-btn:hover,
.nav-btn.active:hover {
  border-color: var(--orizon-green-hover) !important;
  background: var(--orizon-green-hover) !important;
  color: #ffffff !important;
}

/* ── Sistema global definitivo de componentes claros ─────────────────── */
.header,
.footer,
.nav,
.subnav,
.qms-tabs,
.document-workspace-tabs,
.org-profile-tabs,
.org-resource-tabs,
.tab-navigation-bar {
  border-color: var(--orizon-border) !important;
  background: var(--orizon-bg) !important;
  color: var(--orizon-text) !important;
}

.nav-btn.active,
.subnav-btn.active,
.qms-tab.active,
.document-workspace-tabs button.active,
.org-profile-tabs button.active,
.org-resource-tabs button.active,
.tab-item.active,
button[aria-pressed="true"] {
  border-color: var(--orizon-green) !important;
  background: var(--orizon-green) !important;
  color: var(--orizon-white) !important;
}

.stat-card,
.kpi-card,
.home-kpi-card,
.an-kpi,
.metric-card,
.audit-workspace-kpi,
.doc-control-kpi,
.admin-summary-card,
.card-kpi {
  min-height: 84px;
  border-left: 4px solid var(--orizon-green) !important;
  background: var(--orizon-bg) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 700;
}

.metric-card:nth-child(even),
.audit-workspace-kpi:nth-child(even),
.doc-control-kpi:nth-child(even),
.card-kpi:nth-child(even) {
  border-left-color: var(--orizon-blue) !important;
}

.metric-value,
.stat-value,
.kpi-value,
.home-kpi-value,
.an-kpi .an-kpi-value,
.audit-workspace-kpi strong,
.doc-control-kpi strong,
.admin-summary-card strong,
.card-kpi .kpi-number {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 700;
}

.table-wrap,
.admin-table-wrap,
.audit-table-wrap,
.document-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.data-table th,
table th {
  background: var(--orizon-surface-alt) !important;
  color: var(--orizon-ink) !important;
  font-weight: 600;
}

input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
select {
  height: var(--height-compact);
  min-height: var(--height-compact);
}

textarea {
  min-height: 88px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--orizon-blue) !important;
  outline-offset: 2px;
}

dialog,
.modal,
.asset-modal,
.document-modal,
.org-profile-editor-shell,
.admin-user-editor {
  border-color: var(--orizon-border) !important;
  background: var(--orizon-surface) !important;
  color: var(--orizon-text) !important;
}

dialog::backdrop,
.modal-backdrop,
.asset-modal::backdrop,
.org-profile-editor-backdrop {
  background: rgba(148, 163, 184, 0.32) !important;
}

.empty-row,
.empty-state-container {
  border: 1px dashed var(--orizon-border) !important;
  background: var(--orizon-surface) !important;
  color: var(--orizon-muted) !important;
  text-align: center;
}

.empty-row {
  min-height: 72px;
  padding: var(--space-5);
}

.empty-state-container {
  min-height: 180px;
  padding: var(--space-6);
}

/* Rangos responsivos finales; conservan las reglas específicas de cada módulo. */
@media (min-width: 1200px) {
  .main {
    padding-inline: clamp(1.5rem, 2vw, 2.5rem);
  }
}

@media (min-width: 980px) and (max-width: 1199px) {
  .main {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 820px) and (max-width: 979px) {
  .admin-summary-grid,
  [data-step="9"] .metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 720px) and (max-width: 819px) {
  .nav,
  .subnav,
  .qms-tabs,
  .document-workspace-tabs,
  .org-profile-tabs,
  .org-resource-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .main {
    padding-inline: var(--space-3);
  }

  .admin-summary-grid,
  .admin-user-form-grid,
  .admin-permissions-grid,
  [data-step="9"] .metrics-grid {
    grid-template-columns: 1fr;
  }

  .nav,
  .subnav,
  .qms-tabs,
  .document-workspace-tabs,
  .org-profile-tabs,
  .org-resource-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .empty-state-container {
    padding: var(--space-4);
  }
}

/* ── Aplicación Minimalismo Cálido · Arena + Oliva ─────────────────── */
html,
body,
body:not(.auth-required) .main,
body:not(.auth-required) .panel,
body:not(.auth-required) .panel.active {
  background: var(--orizon-bg) !important;
  color: var(--orizon-text) !important;
}

.header,
.footer,
.nav,
.nav-group,
.nav-group.is-active,
.subnav,
.qms-tabs,
.document-workspace-tabs,
.org-profile-tabs,
.org-resource-tabs,
.tab-navigation-bar,
.auth-portal {
  background: var(--orizon-bg) !important;
  border-color: var(--orizon-border) !important;
  color: var(--orizon-text) !important;
}

.card,
.table-wrap,
.data-table,
.stat-card,
.kpi-card,
.home-kpi-card,
.metric-card,
.an-kpi,
.audit-workspace-kpi,
.doc-control-kpi,
.admin-summary-card,
.card-kpi,
.guide,
.fieldset,
.document-overview-card,
.home-readiness-card,
.audit-control-card,
.audit-req-form,
.admin-role-card,
.admin-permission-option,
.admin-users-card,
.admin-roles-card,
.admin-user-editor,
.asset-modal,
.asset-modal-header,
.asset-modal-footer,
.org-profile-editor-shell,
.org-profile-editor-header,
.auth-portal-shell,
.auth-portal-panel,
.panel > .panel-header,
.panel > .home-overview-header {
  background: var(--orizon-surface) !important;
  border-color: var(--orizon-border) !important;
  color: var(--orizon-text) !important;
  box-shadow: var(--shadow-base);
}

.auth-portal-brand {
  background:
    radial-gradient(circle at 88% 10%, rgba(216, 30, 46, 0.10), transparent 18rem),
    var(--orizon-surface-alt) !important;
  border-right: 1px solid var(--orizon-border);
  color: var(--orizon-text) !important;
}

.panel-header h2,
.home-overview-header h2,
.document-workspace-hero h2,
.org-page-header h2,
.card h3,
.audit-detail-hero h2,
.audit-detail-hero h3,
.admin-card-header h3,
.auth-panel-heading h2,
.auth-portal-brand h1,
.header h1,
.header .header-brand h1 {
  color: var(--orizon-ink) !important;
}

.hint,
.subtitle,
.panel-header p,
.home-overview-header p,
.card > p,
.auth-panel-heading p,
.auth-check,
.auth-panel-footer,
.admin-user-identity small,
.admin-role-card small {
  color: var(--orizon-muted) !important;
}

.btn-primary,
.auth-submit-btn,
.nav-btn.active,
.subnav-btn.active,
.qms-tab.active,
.tab-item.active,
.document-workspace-tabs button.active,
.org-profile-tabs button.active,
.org-resource-tabs button.active,
button[aria-pressed="true"],
.header .logo,
.auth-brand-mark {
  border-color: var(--orizon-green) !important;
  background: var(--orizon-green) !important;
  color: var(--orizon-white) !important;
}

.btn-primary:hover,
.auth-submit-btn:hover,
.nav-btn.active:hover {
  border-color: var(--orizon-green-hover) !important;
  background: var(--orizon-green-hover) !important;
  color: var(--orizon-white) !important;
}

.metric-value,
.stat-value,
.kpi-value,
.home-kpi-value,
.an-kpi .an-kpi-value,
.audit-workspace-kpi strong,
.audit-control-card strong,
.admin-summary-card strong,
.admin-page-eyebrow,
.admin-user-avatar,
.auth-eyebrow,
.auth-panel-heading .auth-eyebrow,
.auth-password-toggle,
.auth-text-button,
.home-card-link,
a {
  color: var(--orizon-green);
}

.panel-admin { --admin-green: var(--orizon-green); }

.home-kpi-card::before,
.stat-card::before,
.kpi-card::before,
.an-kpi::before,
.admin-summary-card::before {
  background: var(--orizon-green) !important;
}

.header .workspace-sync-badge[data-sync="saved"],
.admin-role-pill[data-role="administrador"],
.admin-superadmin-pill,
.admin-status-pill.is-active,
.auth-trust-list li span {
  border-color: rgba(216, 30, 46, 0.22) !important;
  background: var(--orizon-green-soft) !important;
  color: var(--orizon-green) !important;
}

.auth-check input,
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--orizon-green);
}

.data-table th,
table th {
  background: var(--orizon-surface-alt) !important;
  color: var(--orizon-ink) !important;
}

.data-table td,
.data-table tbody tr:hover td {
  background: var(--orizon-surface) !important;
  color: var(--orizon-text) !important;
  border-color: var(--orizon-border) !important;
}

input,
select,
textarea,
.auth-input-wrap input,
.admin-search {
  border-color: var(--orizon-border) !important;
  background: var(--orizon-surface) !important;
  color: var(--orizon-text) !important;
}

button,
.btn,
.btn-secondary,
.btn-ghost,
.nav-btn,
.subnav-btn {
  border-color: var(--orizon-border) !important;
  background: var(--orizon-surface) !important;
  color: var(--orizon-text) !important;
}

button:hover,
.btn:hover,
.nav-btn:hover,
.subnav-btn:hover {
  border-color: var(--orizon-green) !important;
  background: var(--orizon-green-soft) !important;
  color: var(--orizon-ink) !important;
}

.btn-primary,
.auth-submit-btn,
.nav-btn.active,
.header .logo,
.auth-brand-mark {
  border-color: var(--orizon-green) !important;
  background: var(--orizon-green) !important;
  color: var(--orizon-white) !important;
}

.btn-primary:hover,
.auth-submit-btn:hover,
.nav-btn.active:hover {
  border-color: var(--orizon-green-hover) !important;
  background: var(--orizon-green-hover) !important;
  color: var(--orizon-white) !important;
}

.stat-card,
.kpi-card,
.home-kpi-card,
.an-kpi,
.metric-card,
.audit-workspace-kpi,
.doc-control-kpi,
.admin-summary-card,
.card-kpi {
  background: var(--orizon-surface) !important;
  border-left: 4px solid var(--orizon-green) !important;
}

.empty-state-container,
.empty-row {
  background: var(--orizon-surface-alt) !important;
  border-color: var(--orizon-border) !important;
  color: var(--orizon-muted) !important;
}

.asset-modal::backdrop,
.org-profile-editor-backdrop,
dialog::backdrop {
  background: rgba(68, 70, 67, 0.28) !important;
}

/* ── Rediseño estructural moderno · 14″ ─────────────────────────────── */
/* Tipografía y lectura sostenida (auditorías largas en laptop 14"). */
.shell-modern {
  --font: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --shell-pad-x: clamp(0.9rem, 1.6vw, 1.75rem);
  --shell-pad-y: clamp(0.75rem, 1.2vw, 1.25rem);
  --btn-height: 42px;
  --nav-height: 40px;
  --read-size: 0.965rem;
  --title-size: clamp(1.2rem, 1.5vw, 1.45rem);
}

.shell-modern,
.shell-modern body {
  font-family: var(--font);
}

html:has(.shell-modern),
.shell-modern {
  font-size: 15.5px;
}

.shell-modern {
  line-height: 1.6;
  letter-spacing: -0.011em;
  background: var(--orizon-bg) !important;
  color: var(--orizon-text) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.shell-modern p,
.shell-modern .hint,
.shell-modern .subtitle,
.shell-modern td,
.shell-modern li,
.shell-modern label,
.shell-modern .field {
  font-size: var(--read-size);
  line-height: 1.62;
  color: var(--orizon-text);
}

.shell-modern .hint,
.shell-modern .subtitle {
  color: var(--orizon-muted) !important;
  font-weight: 500;
}

.shell-modern h1,
.shell-modern h2,
.shell-modern h3,
.shell-modern h4,
.shell-modern .panel-header h2,
.shell-modern .home-overview-header h2,
.shell-modern .assets-header h2,
.shell-modern .document-workspace-hero h2,
.shell-modern .org-page-header h2 {
  color: var(--orizon-ink) !important;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.shell-modern .panel-header h2,
.shell-modern .home-overview-header h2,
.shell-modern .assets-header h2,
.shell-modern .document-workspace-hero h2,
.shell-modern .org-page-header h2 {
  font-size: var(--title-size);
  margin-bottom: 0.35rem;
}

/* Shell: header en dos bandas claras, sticky y denso. */
.shell-modern .app-shell-header,
.shell-modern .header.app-shell-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.65rem !important;
  padding: 0.7rem var(--shell-pad-x) 0.8rem !important;
  background: var(--orizon-surface) !important;
  border-bottom: 1px solid var(--orizon-border) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
}

.shell-modern .header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.shell-modern .header-brand {
  gap: 0.75rem;
  min-width: 0;
}

.shell-modern .header-titles {
  min-width: 0;
}

.shell-modern .header h1 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(42vw, 28rem);
}

.shell-modern .header .subtitle {
  font-size: 0.78rem !important;
}

.shell-modern .logo {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 16px rgba(216, 30, 46, 0.28) !important;
}

.shell-modern .org-switcher {
  display: flex;
  align-items: end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.shell-modern .org-switcher .field {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--orizon-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shell-modern .org-switcher select {
  min-width: 9.5rem;
  height: 38px !important;
  font-size: 0.88rem !important;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.shell-modern .rbac-role-badge,
.shell-modern .workspace-sync-badge {
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

/* Navegación: botones resaltantes, agrupados y fáciles de escanear. */
.shell-modern .nav {
  display: flex !important;
  align-items: stretch !important;
  gap: 0.4rem !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  padding: 0.35rem;
  border: 1px solid var(--orizon-border);
  border-radius: 14px;
  background: var(--orizon-bg) !important;
  scrollbar-width: thin;
}

.shell-modern .nav-group {
  flex-direction: row !important;
  align-items: center;
  gap: 0.35rem !important;
  padding: 0.2rem 0.35rem !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  flex: 0 0 auto;
}

.shell-modern .nav-group.is-active {
  background: var(--orizon-green-soft) !important;
}

.shell-modern .nav-group-label {
  display: none;
}

.shell-modern .nav-group-btns {
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.shell-modern .nav-btn {
  flex: 0 0 auto;
  min-height: var(--nav-height) !important;
  padding: 0.45rem 0.95rem !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--orizon-ink) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-shadow: none !important;
}

.shell-modern .nav-btn:hover {
  background: var(--orizon-surface) !important;
  border-color: var(--orizon-border) !important;
  color: var(--orizon-ink) !important;
}

.shell-modern .nav-btn.active,
.shell-modern .nav-btn.active:hover {
  background: var(--orizon-green) !important;
  border-color: var(--orizon-green) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(216, 30, 46, 0.28) !important;
}

.shell-modern .nav-admin-btn {
  margin-left: auto;
}

/* Subnavegación modular: píldoras legibles. */
.shell-modern .subnav,
.shell-modern .tab-navigation-bar,
.shell-modern .qms-tabs,
.shell-modern .document-workspace-tabs {
  gap: 0.4rem !important;
  margin-bottom: 1rem !important;
  padding: 0.4rem !important;
  border: 1px solid var(--orizon-border) !important;
  border-radius: 12px !important;
  background: var(--orizon-surface) !important;
}

.shell-modern .subnav-btn,
.shell-modern .tab-item,
.shell-modern .qms-tab,
.shell-modern .document-workspace-tabs button {
  min-height: 36px !important;
  padding: 0.4rem 0.9rem !important;
  border-radius: 999px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
}

.shell-modern .subnav-btn.active,
.shell-modern .tab-item.active,
.shell-modern .qms-tab.active,
.shell-modern .document-workspace-tabs button.active {
  background: var(--orizon-green) !important;
  border-color: var(--orizon-green) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(216, 30, 46, 0.22) !important;
}

/* Botones de acción: primarios muy visibles. */
.shell-modern .btn,
.shell-modern button.btn {
  min-height: var(--btn-height) !important;
  padding: 0.55rem 1.15rem !important;
  border-radius: 10px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  border-width: 1.5px !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease !important;
}

.shell-modern .btn-primary,
.shell-modern .auth-submit-btn {
  background: var(--orizon-green) !important;
  border-color: var(--orizon-green) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(216, 30, 46, 0.28) !important;
}

.shell-modern .btn-primary:hover,
.shell-modern .auth-submit-btn:hover {
  background: var(--orizon-green-hover) !important;
  border-color: var(--orizon-green-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(216, 30, 46, 0.34) !important;
}

.shell-modern .btn-secondary {
  background: var(--orizon-surface) !important;
  border-color: var(--orizon-border) !important;
  color: var(--orizon-ink) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.shell-modern .btn-secondary:hover {
  border-color: var(--orizon-green) !important;
  background: var(--orizon-green-soft) !important;
  color: var(--orizon-ink) !important;
}

.shell-modern .btn-compact {
  min-height: 36px !important;
  padding: 0.35rem 0.85rem !important;
  font-size: 0.84rem !important;
}

.shell-modern .btn-group {
  gap: 0.55rem;
}

/* Contenido principal: densidad moderna para 14". */
.shell-modern .main {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--shell-pad-y) var(--shell-pad-x) 2.5rem !important;
}

.shell-modern .panel-header,
.shell-modern .home-overview-header,
.shell-modern .assets-header,
.shell-modern .document-workspace-hero,
.shell-modern .org-page-header {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--orizon-border);
  border-radius: 14px;
  background: var(--orizon-surface) !important;
}

.shell-modern .card,
.shell-modern .fieldset,
.shell-modern .guide,
.shell-modern .table-wrap,
.shell-modern .controls-filter-bar {
  border-radius: 12px !important;
  border-color: var(--orizon-border) !important;
}

.shell-modern .card {
  padding: 1rem 1.1rem !important;
  margin-bottom: 1rem;
}

.shell-modern .home-kpi-strip,
.shell-modern .metrics-grid,
.shell-modern .stats {
  gap: 0.75rem !important;
}

.shell-modern .home-kpi-card,
.shell-modern .stat-card,
.shell-modern .kpi-card,
.shell-modern .card-kpi,
.shell-modern .an-kpi,
.shell-modern .admin-summary-card {
  min-height: 92px !important;
  padding: 0.9rem 1rem !important;
  border-radius: 12px !important;
}

.shell-modern .home-kpi-value,
.shell-modern .stat-value,
.shell-modern .kpi-value,
.shell-modern .kpi-number,
.shell-modern .an-kpi-value {
  font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
  line-height: 1.05 !important;
}

.shell-modern .home-kpi-label,
.shell-modern .stat-label,
.shell-modern .kpi-label,
.shell-modern .an-kpi-label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--orizon-muted) !important;
}

/* Tablas legibles en 14". */
.shell-modern .data-table,
.shell-modern table {
  font-size: 0.9rem;
}

.shell-modern .data-table th,
.shell-modern table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.7rem 0.75rem !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.shell-modern .data-table td,
.shell-modern table td {
  padding: 0.72rem 0.75rem !important;
  vertical-align: middle;
}

.shell-modern .table-wrap {
  border: 1px solid var(--orizon-border);
  border-radius: 12px;
  background: var(--orizon-surface) !important;
}

.shell-modern input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.shell-modern select,
.shell-modern textarea {
  font-size: 0.92rem !important;
  border-radius: 10px !important;
}

.shell-modern input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.shell-modern select {
  min-height: 40px !important;
  height: 40px !important;
}

/* Home command grid: más clara en laptop. */
.shell-modern .home-command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.shell-modern .home-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0.85rem 0 1rem;
}

/* Breakpoint principal: pantallas 14" (~1280–1512 CSS px). */
@media (max-width: 1512px) {
  .shell-modern {
    --read-size: 0.95rem;
    --shell-pad-x: 1rem;
  }

  .shell-modern .header h1 {
    max-width: 22rem;
  }

  .shell-modern .home-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shell-modern .home-command-grid {
    grid-template-columns: 1fr 1fr;
  }

  .shell-modern .nav-btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.84rem !important;
  }
}

@media (max-width: 1366px) {
  .shell-modern .header .subtitle {
    display: none;
  }

  .shell-modern .org-switcher .field {
    font-size: 0;
  }

  .shell-modern .org-switcher .field select {
    font-size: 0.86rem !important;
  }

  .shell-modern .home-command-grid {
    grid-template-columns: 1fr;
  }

  .shell-modern .panel-header,
  .shell-modern .home-overview-header,
  .shell-modern .assets-header {
    padding: 0.75rem 0.85rem;
  }
}

@media (max-width: 1100px) {
  .shell-modern .home-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shell-modern .nav-admin-btn {
    margin-left: 0;
  }
}

@media (max-width: 820px) {
  .shell-modern .header-top {
    flex-direction: column;
    align-items: stretch;
  }

  .shell-modern .org-switcher {
    width: 100%;
  }

  .shell-modern .home-kpi-strip {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell-modern .btn,
  .shell-modern .btn-primary:hover {
    transition: none !important;
    transform: none !important;
  }
}

/* ── Cristal Claro · tema profesional limpio ─────────────────────────── */
/*
  Fondo claro translúcido, superficies glass, tipografía DM Sans.
  Acento teal corporativo #0F766E. Contraste AAA en texto continuo.
*/
:root {
  color-scheme: only light !important;
  --orizon-bg: #F4F6F9;
  --orizon-surface: #FFFFFF;
  --orizon-surface-alt: #EEF2F7;
  --orizon-glass: rgba(255, 255, 255, 0.72);
  --orizon-glass-strong: rgba(255, 255, 255, 0.88);
  --orizon-ink: #0B1220;
  --orizon-text: #3B4559;
  --orizon-muted: #6B778C;
  --orizon-border: rgba(15, 23, 42, 0.10);
  --orizon-border-solid: #E6EAF0;
  --orizon-green: #0F766E;
  --orizon-green-hover: #0D9488;
  --orizon-green-soft: #CCFBF1;
  --orizon-blue: #1D4ED8;
  --orizon-blue-dark: #1E3A8A;
  --orizon-white: #FFFFFF;
  --semantic-danger: #B91C1C;
  --semantic-danger-bg: #FEF2F2;
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #EEF2F7;
  --border: #E6EAF0;
  --text: #0B1220;
  --text-muted: #6B778C;
  --text-secondary: #3B4559;
  --muted: #6B778C;
  --accent: #0F766E;
  --accent-hover: #0D9488;
  --metric-emphasis: #0F766E;
  --success: #047857;
  --warning: #B45309;
  --danger: #B91C1C;
  --shadow-base: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-elevated: 0 12px 40px rgba(15, 23, 42, 0.08);
  --font: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

html,
body,
.shell-modern,
.shell-modern.nexus-dark,
body:not(.auth-required),
body:not(.auth-required) .main,
body:not(.auth-required) .panel,
body:not(.auth-required) .panel.active {
  font-family: var(--font) !important;
  background: transparent !important;
  color: var(--orizon-text) !important;
  color-scheme: only light !important;
}

html {
  background: #F7F9FC !important;
}

body,
.shell-modern {
  min-height: 100vh;
  background-color: transparent !important;
  background-image:
    linear-gradient(to right, rgba(15, 118, 110, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 118, 110, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse at 18% 0%, rgba(15, 118, 110, 0.05) 0%, transparent 42%),
    radial-gradient(ellipse at 82% 100%, rgba(29, 78, 216, 0.04) 0%, transparent 42%) !important;
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100% !important;
  background-attachment: fixed !important;
}

.shell-modern {
  --orizon-bg: #F7F9FC;
  --orizon-surface: #FFFFFF;
  --orizon-surface-alt: #EEF2F7;
  --orizon-ink: #0B1220;
  --orizon-text: #3B4559;
  --orizon-muted: #6B778C;
  --orizon-border: rgba(15, 23, 42, 0.10);
  --orizon-green: #0F766E;
  --orizon-green-hover: #0D9488;
  --orizon-green-soft: #CCFBF1;
  --orizon-blue: #1D4ED8;
  --font: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Header / nav glass */
.header,
.shell-modern .app-shell-header,
.shell-modern .header.app-shell-header {
  background: var(--orizon-glass) !important;
  border-bottom: 1px solid var(--orizon-border) !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.shell-modern .nav,
.nav,
.subnav,
.tab-navigation-bar,
.qms-tabs,
.document-workspace-tabs {
  background: var(--orizon-glass-strong) !important;
  border: 1px solid var(--orizon-border) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.card,
.panel > .panel-header,
.panel > .home-overview-header,
.home-overview-header,
.assets-header,
.document-workspace-hero,
.org-page-header,
.table-wrap,
.stat-card,
.kpi-card,
.home-kpi-card,
.metric-card,
.an-kpi,
.card-kpi,
.admin-summary-card,
.admin-role-card,
.admin-users-card,
.admin-roles-card,
.admin-user-editor,
.asset-modal,
.asset-modal-header,
.asset-modal-footer,
.org-profile-editor-shell,
.guide,
.fieldset,
.controls-filter-bar,
.audit-workspace,
.audit-list-panel,
.audit-sidebar-card,
.auth-portal-shell,
.auth-portal-panel {
  background: var(--orizon-glass-strong) !important;
  border-color: var(--orizon-border) !important;
  color: var(--orizon-text) !important;
  box-shadow: var(--shadow-base) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.shell-modern .panel-header,
.shell-modern .home-overview-header,
.shell-modern .assets-header,
.shell-modern .document-workspace-hero,
.shell-modern .org-page-header,
.shell-modern .card {
  background: var(--orizon-glass-strong) !important;
  border: 1px solid var(--orizon-border) !important;
  border-radius: 14px !important;
}

/* Tipografía */
h1, h2, h3, h4,
.panel-header h2,
.home-overview-header h2,
.assets-header h2,
.document-workspace-hero h2,
.org-page-header h2,
.card h3,
.auth-portal-brand h1,
.auth-panel-heading h2,
.header h1,
.shell-modern h1,
.shell-modern h2,
.shell-modern h3 {
  color: var(--orizon-ink) !important;
}

.hint,
.subtitle,
.panel-header p,
.home-overview-header p,
.card > p,
.auth-panel-heading p,
.auth-check,
.auth-panel-footer,
.shell-modern .hint,
.shell-modern .subtitle {
  color: var(--orizon-muted) !important;
}

/* Botones limpios y resaltantes */
.btn-primary,
.auth-submit-btn,
.nav-btn.active,
.subnav-btn.active,
.tab-item.active,
.qms-tab.active,
.document-workspace-tabs button.active,
.org-profile-tabs button.active,
.org-resource-tabs button.active,
button[aria-pressed="true"],
.header .logo,
.auth-brand-mark,
.shell-modern .btn-primary,
.shell-modern .auth-submit-btn,
.shell-modern .nav-btn.active,
.shell-modern .nav-btn.active:hover,
.shell-modern .subnav-btn.active,
.shell-modern .tab-item.active,
.shell-modern .qms-tab.active {
  background: #0F766E !important;
  border-color: #0F766E !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.22) !important;
  font-weight: 700 !important;
}

.btn-primary:hover,
.auth-submit-btn:hover,
.nav-btn.active:hover,
.shell-modern .btn-primary:hover,
.shell-modern .auth-submit-btn:hover {
  background: #0D9488 !important;
  border-color: #0D9488 !important;
  color: #FFFFFF !important;
}

button,
.btn,
.btn-secondary,
.btn-ghost,
.nav-btn,
.subnav-btn,
.shell-modern .nav-btn,
.shell-modern .btn-secondary {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid var(--orizon-border) !important;
  color: var(--orizon-ink) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(8px);
}

button:hover,
.btn:hover,
.nav-btn:hover,
.subnav-btn:hover,
.btn-secondary:hover,
.shell-modern .nav-btn:hover,
.shell-modern .btn-secondary:hover {
  background: #CCFBF1 !important;
  border-color: rgba(15, 118, 110, 0.35) !important;
  color: var(--orizon-ink) !important;
}

.btn-primary,
.auth-submit-btn,
.nav-btn.active,
.header .logo,
.auth-brand-mark {
  background: #0F766E !important;
  border-color: #0F766E !important;
  color: #FFFFFF !important;
}

a,
.home-card-link,
.auth-eyebrow,
.auth-password-toggle,
.auth-text-button,
.metric-value,
.stat-value,
.kpi-value,
.home-kpi-value,
.kpi-number,
.admin-page-eyebrow,
.admin-user-avatar {
  color: #0F766E !important;
}

.home-kpi-card::before,
.stat-card::before,
.kpi-card::before,
.an-kpi::before,
.admin-summary-card::before {
  background: #0F766E !important;
}

.shell-modern .home-kpi-card,
.shell-modern .stat-card,
.shell-modern .kpi-card,
.shell-modern .card-kpi,
.shell-modern .an-kpi,
.shell-modern .admin-summary-card,
.stat-card,
.kpi-card,
.home-kpi-card,
.card-kpi {
  background: var(--orizon-glass-strong) !important;
  border-left: 4px solid #0F766E !important;
}

.shell-modern .card-kpi:nth-child(even),
.shell-modern .metric-card:nth-child(even) {
  border-left-color: #1D4ED8 !important;
}

.shell-modern .nav-group.is-active {
  background: rgba(15, 118, 110, 0.08) !important;
}

/* Forms limpios */
input,
select,
textarea,
.auth-input-wrap input,
.admin-search,
.shell-modern input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.shell-modern select,
.shell-modern textarea {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #D0D7E2 !important;
  color: #0B1220 !important;
  color-scheme: only light !important;
}

input::placeholder,
textarea::placeholder {
  color: #6B778C !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.35) !important;
  outline-offset: 2px;
}

.data-table th,
table th {
  background: rgba(238, 242, 247, 0.92) !important;
  color: #0B1220 !important;
  border-color: #E6EAF0 !important;
}

.data-table td,
.data-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #3B4559 !important;
  border-color: #E6EAF0 !important;
}

.data-table tbody tr:nth-child(even) td {
  background: rgba(244, 246, 249, 0.65) !important;
}

.data-table tbody tr:hover td {
  background: #F1F5F9 !important;
}

/* Auth portal cristal */
.auth-portal {
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(15, 118, 110, 0.10), transparent 50%),
    radial-gradient(ellipse 60% 45% at 90% 90%, rgba(29, 78, 216, 0.08), transparent 48%),
    linear-gradient(160deg, #F8FAFC, #EEF2F7) !important;
}

.auth-portal-shell {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.10) !important;
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}

.auth-portal-brand {
  background:
    linear-gradient(160deg, rgba(15, 118, 110, 0.08), transparent 55%),
    rgba(255, 255, 255, 0.45) !important;
  border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: var(--orizon-text) !important;
}

.auth-portal-panel {
  background: rgba(255, 255, 255, 0.72) !important;
}

.auth-trust-list li span,
.header .workspace-sync-badge[data-sync="saved"],
.admin-role-pill[data-role="administrador"],
.admin-superadmin-pill,
.admin-status-pill.is-active {
  background: #CCFBF1 !important;
  border-color: rgba(15, 118, 110, 0.25) !important;
  color: #0F766E !important;
}

.auth-check input,
input[type="checkbox"],
input[type="radio"] {
  accent-color: #0F766E;
}

.rbac-role-badge,
.workspace-sync-badge {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: var(--orizon-border) !important;
  color: var(--orizon-text) !important;
}

.empty-state-container,
.empty-row {
  background: rgba(238, 242, 247, 0.7) !important;
  border-color: var(--orizon-border) !important;
  color: var(--orizon-muted) !important;
}

.asset-modal::backdrop,
.org-profile-editor-backdrop,
dialog::backdrop,
.modal-backdrop {
  background: rgba(15, 23, 42, 0.28) !important;
  backdrop-filter: blur(4px);
}

::selection {
  background: #CCFBF1;
  color: #0B1220;
}

.panel-admin { --admin-green: #0F766E; }

.main,
.shell-modern .main {
  background: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   UX Sprint · 50 mejoras visuales (Cristal Claro)
   Tipografía · botones · cards · nav · tablas · forms · feedback · layout
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --font: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, sans-serif !important;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace !important;
  --orizon-muted: #5B6577 !important;
  --text-muted: #5B6577 !important;
  --muted: #5B6577 !important;
  --ux-radius-card: 12px;
  --ux-radius-control: 10px;
  --ux-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
  --ux-content-max: 1360px;
  --ux-space: 8px;
  --ux-focus: 0 0 0 3px rgba(15, 118, 110, 0.35);
}

html {
  font-size: 16px !important;
}

body.shell-modern.theme-cristal,
body.shell-modern {
  font-family: var(--font) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em;
}

body.shell-modern p,
body.shell-modern .hint,
body.shell-modern .empty-state-desc,
body.shell-modern .auth-portal p,
body.shell-modern .panel > p {
  line-height: 1.6 !important;
  color: var(--orizon-text);
}

body.shell-modern .hint,
body.shell-modern .subtitle,
body.shell-modern .stat-label,
body.shell-modern .home-kpi-label,
body.shell-modern .empty-state-desc,
body.shell-modern .text-muted {
  color: #5B6577 !important;
}

/* #5 titles */
body.shell-modern .panel > header h2,
body.shell-modern .home-overview-header h2,
body.shell-modern h2 {
  font-size: 1.25rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em;
  color: var(--orizon-ink) !important;
  line-height: 1.3 !important;
}

body.shell-modern h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--orizon-ink) !important;
}

/* #6 form labels */
body.shell-modern label.field,
body.shell-modern .field > span:first-child,
body.shell-modern .auth-field > span:first-child,
body.shell-modern label.field {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #5B6577 !important;
}

/* #2 mono only KPIs / IDs / codes */
body.shell-modern,
body.shell-modern button,
body.shell-modern input,
body.shell-modern select,
body.shell-modern textarea,
body.shell-modern td,
body.shell-modern th {
  font-variant-numeric: proportional-nums;
}

body.shell-modern .home-kpi-value,
body.shell-modern .stat-value,
body.shell-modern .mono,
body.shell-modern code,
body.shell-modern .ctrl-code,
body.shell-modern .asset-id,
body.shell-modern .scenario-ref,
body.shell-modern td:first-child .mono,
body.shell-modern [data-mono] {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
}

/*
 * ⚠ El shell le pone `display: inline-flex` a todo `.btn`, así que el atributo `hidden`
 * dejaba de esconderlos: un botón que JS oculta seguía en pantalla y en el árbol de
 * accesibilidad. Es el mismo pisotón que ya obligó al override en media docena de
 * paneles; acá se arregla para todos los botones de una vez, y
 * `legacy-hidden-panels.test.ts` lo vigila.
 */
body.shell-modern .btn[hidden],
body.shell-modern button.btn[hidden] { display: none !important; }

/* ── Buttons #9–16 ─────────────────────────────────────────────────── */
body.shell-modern .btn,
body.shell-modern button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.55rem 1rem;
  border-radius: var(--ux-radius-control) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

body.shell-modern .btn-primary,
body.shell-modern button.btn-primary,
body.shell-modern .auth-submit-btn {
  min-height: 44px !important;
  padding: 0.7rem 1.25rem !important;
  border-radius: var(--ux-radius-control) !important;
  background: #0F766E !important;
  border: 1.5px solid #0F766E !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 118, 110, 0.2);
}

body.shell-modern .btn-primary:hover,
body.shell-modern .auth-submit-btn:hover {
  background: #0D9488 !important;
  border-color: #0D9488 !important;
  transform: translateY(-1px);
}

body.shell-modern .btn-secondary,
body.shell-modern button.btn-secondary {
  min-height: 40px !important;
  padding: 0.55rem 1rem !important;
  background: #fff !important;
  border: 1.5px solid #CBD5E1 !important;
  color: var(--orizon-ink) !important;
}

body.shell-modern .btn-secondary:hover {
  border-color: #0F766E !important;
  color: #0F766E !important;
  background: #F0FDFA !important;
}

body.shell-modern .btn-ghost {
  min-height: 40px;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  color: #3B4559 !important;
}

body.shell-modern .btn-ghost:hover {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
}

body.shell-modern .btn-compact {
  min-height: 32px !important;
  padding: 0.35rem 0.7rem !important;
  font-size: 0.8125rem !important;
}

/* #14 disabled */
body.shell-modern .btn:disabled,
body.shell-modern button:disabled,
body.shell-modern .btn[aria-disabled="true"] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* #15 danger outline */
body.shell-modern .btn-danger,
body.shell-modern .btn-danger-text,
body.shell-modern button.btn-danger {
  background: transparent !important;
  border: 1.5px solid #B91C1C !important;
  color: #B91C1C !important;
  box-shadow: none !important;
}

body.shell-modern .btn-danger:hover,
body.shell-modern .btn-danger-text:hover {
  background: #FEF2F2 !important;
  color: #991B1B !important;
}

/* #16 button groups */
body.shell-modern .btn-group,
body.shell-modern .row-between > .btn-group,
body.shell-modern .toolbar,
body.shell-modern .table-actions,
body.shell-modern .filters-row {
  gap: 0.55rem !important;
}

/* #12 one primary per toolbar: demote siblings */
body.shell-modern .toolbar .btn-primary ~ .btn-primary,
body.shell-modern .row-between > .btn-group .btn-primary ~ .btn-primary,
body.shell-modern .card > .row-between .btn-primary ~ .btn-primary {
  background: #fff !important;
  border: 1.5px solid #CBD5E1 !important;
  color: var(--orizon-ink) !important;
  box-shadow: none !important;
  min-height: 40px !important;
}

/* ── Cards #17–24 ──────────────────────────────────────────────────── */
body.shell-modern .card,
body.shell-modern .stat-card,
body.shell-modern .home-command-card,
body.shell-modern .guide,
body.shell-modern .audit-doc-dashboard {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--orizon-border-solid) !important;
  border-radius: var(--ux-radius-card) !important;
  box-shadow: var(--ux-shadow) !important;
  padding: 1rem 1.15rem !important;
}

body.shell-modern .card .card,
body.shell-modern .card .stat-card,
body.shell-modern .nested-card {
  border-color: #EEF2F7 !important;
  box-shadow: none !important;
  background: #FAFBFC !important;
}

body.shell-modern .filters-card,
body.shell-modern .card.filters,
body.shell-modern [data-role="filters"],
body.shell-modern .ctrl-filters,
body.shell-modern .filter-bar {
  background: #F8FAFC !important;
  border-style: dashed !important;
  box-shadow: none !important;
}

body.shell-modern .home-kpi-card {
  min-height: 88px !important;
  padding: 0.9rem 1rem !important;
  border-radius: var(--ux-radius-card) !important;
  border: 1px solid var(--orizon-border-solid) !important;
  border-left-width: 3px !important;
  background: #fff !important;
  box-shadow: var(--ux-shadow) !important;
}

body.shell-modern .home-kpi-value,
body.shell-modern .stat-value {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--orizon-ink) !important;
}

body.shell-modern .header,
body.shell-modern .header.app-shell-header,
body.shell-modern .nav {
  background: var(--orizon-glass-strong) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}

/* ── Nav #25–30 ────────────────────────────────────────────────────── */
body.shell-modern .header {
  position: sticky;
  top: 0;
  z-index: 40;
}

body.shell-modern .nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.35rem !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 0.45rem 1rem 0.55rem !important;
  border-top: 1px solid var(--orizon-border);
}

body.shell-modern .nav-btn {
  flex: 0 0 auto;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 0.75rem !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

body.shell-modern .nav-group {
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.35rem 0 0.55rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid #D5DBE5 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.shell-modern .nav-group-label {
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5B6577 !important;
  padding: 0 0.25rem 0 0;
}

body.shell-modern .nav-group-btns {
  display: inline-flex;
  gap: 0.25rem;
}

body.shell-modern .nav-btn .nav-badge,
body.shell-modern .nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.3rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #CCFBF1;
  color: #0F766E;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--mono);
  line-height: 1;
}

body.shell-modern .nav-badge.is-warn {
  background: #FEF3C7;
  color: #B45309;
}

body.shell-modern .nav-badge.is-danger {
  background: #FEE2E2;
  color: #B91C1C;
}

body.shell-modern .nav-more {
  position: relative;
  flex: 0 0 auto;
  display: none;
}

body.shell-modern .nav-more > summary {
  list-style: none;
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3B4559;
  border: 1px solid transparent;
}

body.shell-modern .nav-more > summary::-webkit-details-marker { display: none; }

body.shell-modern .nav-more[open] > summary,
body.shell-modern .nav-more > summary:hover {
  background: #F1F5F9;
  border-color: #E2E8F0;
}

body.shell-modern .nav-more-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--orizon-border-solid);
  border-radius: 10px;
  box-shadow: var(--ux-shadow);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media (max-width: 1365px) {
  body.shell-modern .nav-admin-btn.nav-admin-inline { display: none !important; }
  body.shell-modern .nav-more { display: inline-block; }
}

@media (min-width: 1366px) {
  body.shell-modern .nav-more { display: none !important; }
  body.shell-modern .nav-admin-btn.nav-admin-inline { display: inline-flex !important; }
}

/* Breadcrumb #27 */
.ux-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--ux-content-max);
  margin: 0 auto;
  padding: 0.55rem 1.25rem 0.15rem;
}

.ux-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: #5B6577;
  min-height: 28px;
}

.ux-crumb-group { font-weight: 500; }
.ux-crumb-sep { opacity: 0.5; }
.ux-crumb-current {
  color: var(--orizon-ink);
  font-weight: 650;
}

.ux-context-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Subnav sticky #28 */
body.shell-modern .subnav,
body.shell-modern .panel-tabs,
body.shell-modern .tab-bar,
body.shell-modern .audit-subnav,
body.shell-modern .filters-sticky {
  position: sticky;
  top: 7.5rem;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  padding: 0.45rem 0;
  border-bottom: 1px solid #EEF2F7;
}

/* ── Tables #31–36 ─────────────────────────────────────────────────── */
body.shell-modern table {
  font-size: 0.875rem !important;
  border-collapse: separate;
  border-spacing: 0;
}

body.shell-modern thead th,
body.shell-modern th {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #5B6577 !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 0.65rem 0.75rem !important;
  white-space: nowrap;
}

body.shell-modern tbody td {
  padding: 0.65rem 0.75rem !important;
  border-bottom: 1px solid #F1F5F9 !important;
  vertical-align: middle;
}

body.shell-modern tbody tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.02);
}

body.shell-modern tbody tr:hover td {
  background: #F1F5F9 !important;
}

body.shell-modern .table-wrap,
body.shell-modern .table-scroll,
body.shell-modern .data-table-wrap {
  overflow: auto;
  border-radius: 10px;
  border: 1px solid #E6EAF0;
  background: #fff;
}

body.shell-modern .table-wrap table,
body.shell-modern .table-scroll table {
  min-width: 720px;
}

body.shell-modern .table-wrap th:first-child,
body.shell-modern .table-wrap td:first-child,
body.shell-modern .table-scroll th:first-child,
body.shell-modern .table-scroll td:first-child,
body.shell-modern .sticky-col th:first-child,
body.shell-modern .sticky-col td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  box-shadow: 1px 0 0 #E6EAF0;
}

body.shell-modern .table-wrap thead th:first-child,
body.shell-modern .table-scroll thead th:first-child {
  z-index: 3;
  background: #F8FAFC !important;
}

/* Row kebab #33 */
.ux-row-menu {
  position: relative;
  display: inline-flex;
}

.ux-row-menu > summary {
  list-style: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: #fff;
  cursor: pointer;
  color: #3B4559;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ux-row-menu > summary::-webkit-details-marker { display: none; }

.ux-row-menu[open] > summary,
.ux-row-menu > summary:hover {
  border-color: #0F766E;
  color: #0F766E;
  background: #F0FDFA;
}

.ux-row-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  box-shadow: var(--ux-shadow);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ux-row-menu-panel .btn,
.ux-row-menu-panel button {
  width: 100%;
  justify-content: flex-start !important;
  min-height: 34px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ux-row-menu-panel .btn:hover,
.ux-row-menu-panel button:hover {
  background: #F1F5F9 !important;
}

/* Empty + skeleton #35 #36 */
body.shell-modern .empty-state-container,
body.shell-modern .empty-row {
  background: #F8FAFC !important;
  color: #5B6577 !important;
  border-color: #E6EAF0 !important;
}

body.shell-modern .empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2rem 1.25rem !important;
  border-radius: 12px;
  border: 1px dashed #CBD5E1;
}

.ux-skeleton {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem 0;
}

.ux-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #EEF2F7 25%, #F8FAFC 50%, #EEF2F7 75%);
  background-size: 200% 100%;
  animation: ux-shimmer 1.2s ease-in-out infinite;
}

.ux-skeleton-line.w-40 { width: 40%; }
.ux-skeleton-line.w-60 { width: 60%; }
.ux-skeleton-line.w-80 { width: 80%; }
.ux-skeleton-line.w-100 { width: 100%; }

@keyframes ux-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ux-skeleton-line { animation: none; }
}

/* ── Forms #37–40 ──────────────────────────────────────────────────── */
body.shell-modern input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.shell-modern select,
body.shell-modern .auth-input-wrap input {
  min-height: 40px !important;
  height: 40px;
  padding: 0.45rem 0.7rem !important;
  border-radius: var(--ux-radius-control) !important;
  border: 1.5px solid #D5DBE5 !important;
  background: #fff !important;
  font-size: 0.9375rem !important;
  color: var(--orizon-ink) !important;
}

body.shell-modern textarea {
  min-height: 96px !important;
  padding: 0.65rem 0.75rem !important;
  border-radius: var(--ux-radius-control) !important;
  border: 1.5px solid #D5DBE5 !important;
  line-height: 1.55 !important;
}

body.shell-modern input:focus,
body.shell-modern select:focus,
body.shell-modern textarea:focus,
body.shell-modern .btn:focus-visible,
body.shell-modern .nav-btn:focus-visible,
body.shell-modern a:focus-visible {
  outline: none !important;
  box-shadow: var(--ux-focus) !important;
  border-color: #0F766E !important;
}

.ux-field-error {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #B91C1C;
  font-weight: 600;
}

body.shell-modern .is-invalid,
body.shell-modern input.aria-invalid,
body.shell-modern [aria-invalid="true"] {
  border-color: #B91C1C !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15) !important;
}

body.shell-modern details.ux-collapse,
body.shell-modern .editor-long details {
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  padding: 0.35rem 0.75rem;
  background: #FAFBFC;
  margin-bottom: 0.75rem;
}

body.shell-modern details.ux-collapse > summary,
body.shell-modern .editor-long details > summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--orizon-ink);
  padding: 0.45rem 0;
}

/* Sync badge #40 */
body.shell-modern .workspace-sync-badge {
  min-height: 28px;
  padding: 0.25rem 0.65rem !important;
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  font-weight: 650 !important;
  border: 1px solid #E2E8F0 !important;
}

body.shell-modern .workspace-sync-badge[data-sync="saving"] {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #F59E0B !important;
}

body.shell-modern .workspace-sync-badge[data-sync="saved"] {
  background: #D1FAE5 !important;
  color: #065F46 !important;
  border-color: #10B981 !important;
}

body.shell-modern .workspace-sync-badge[data-sync="error"] {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  border-color: #EF4444 !important;
}

body.shell-modern .workspace-sync-badge[data-sync="idle"],
body.shell-modern .workspace-sync-badge[data-sync="offline"] {
  background: #F1F5F9 !important;
  color: #475569 !important;
}

/* ── Feedback #41–44 ───────────────────────────────────────────────── */
.ux-toast-host {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}

.ux-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.8rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  color: var(--orizon-ink);
  font-size: 0.875rem;
  line-height: 1.45;
  animation: ux-toast-in 0.18s ease-out;
}

.ux-toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.ux-toast-info { border-left: 3px solid #0F766E; }
.ux-toast-success { border-left: 3px solid #047857; background: #F0FDF4; }
.ux-toast-error { border-left: 3px solid #B91C1C; background: #FEF2F2; }
.ux-toast-msg { flex: 1; }
.ux-toast-close {
  border: 0;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: #5B6577;
  padding: 0 0.15rem;
}

@keyframes ux-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Semantic status chips with text #44 */
body.shell-modern .badge,
body.shell-modern .status-pill,
body.shell-modern .result-badge,
body.shell-modern .risk-level {
  font-weight: 650 !important;
  letter-spacing: 0.01em;
}

body.shell-modern .badge::after,
body.shell-modern .status-pill::after { content: none; }

/* ── Layout #45–50 ─────────────────────────────────────────────────── */
body.shell-modern .main {
  max-width: var(--ux-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 1rem 1.25rem 2.5rem !important;
}

body.shell-modern .header-top,
body.shell-modern .nav {
  max-width: var(--ux-content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

body.shell-modern .panel {
  display: none;
}

body.shell-modern .panel.active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1rem !important;
}

body.shell-modern .home-command-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

body.shell-modern .home-kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}

@media (max-width: 1366px) {
  body.shell-modern .home-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.shell-modern .home-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  body.shell-modern .home-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.shell-modern .home-command-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  body.shell-modern .home-kpi-strip {
    grid-template-columns: 1fr !important;
  }
  .ux-context-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Optional Nexus dark #49 */
body.shell-modern.theme-nexus-dark {
  color-scheme: dark !important;
  --orizon-bg: #0A1428 !important;
  --orizon-surface: #111C33 !important;
  --orizon-surface-alt: #16233F !important;
  --orizon-glass: rgba(17, 28, 51, 0.82) !important;
  --orizon-glass-strong: rgba(17, 28, 51, 0.92) !important;
  --orizon-ink: #F8FAFC !important;
  --orizon-text: #D7DEEA !important;
  --orizon-muted: #9AA6BA !important;
  --orizon-border-solid: #243352 !important;
  --orizon-green: #7CFF4D !important;
  --orizon-green-hover: #A6FF7A !important;
  --bg: #0A1428 !important;
  --surface: #111C33 !important;
  --text: #F8FAFC !important;
  --text-muted: #9AA6BA !important;
  --accent: #7CFF4D !important;
}

body.shell-modern.theme-nexus-dark,
body.shell-modern.theme-nexus-dark .main {
  background: #0A1428 !important;
  color: #D7DEEA !important;
}

body.shell-modern.theme-nexus-dark .card,
body.shell-modern.theme-nexus-dark .home-kpi-card,
body.shell-modern.theme-nexus-dark .stat-card,
body.shell-modern.theme-nexus-dark .guide {
  background: #111C33 !important;
  border-color: #243352 !important;
  color: #D7DEEA !important;
}

body.shell-modern.theme-nexus-dark .btn-primary {
  background: #7CFF4D !important;
  border-color: #7CFF4D !important;
  color: #0A1428 !important;
}

body.shell-modern.theme-nexus-dark .nav,
body.shell-modern.theme-nexus-dark .header {
  background: rgba(10, 20, 40, 0.9) !important;
}

#ux-theme-select {
  min-height: 32px !important;
  font-size: 0.75rem !important;
}


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

body.shell-modern .ux-theme-field {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  min-width: 7.5rem;
}

body.shell-modern .ux-theme-field > span,
body.shell-modern label.ux-theme-field {
  font-size: 0.65rem !important;
}

body.shell-modern #ux-theme-select {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 0.45rem !important;
  font-size: 0.75rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* #24 filter vs result surfaces */
body.shell-modern .controls-filter-bar,
body.shell-modern .filter-group,
body.shell-modern .sc-filter-bar,
body.shell-modern .assets-toolbar,
body.shell-modern .audit-sidebar-filters,
body.shell-modern .doc-idx-filters,
body.shell-modern .compliance-alert-filters {
  background: #F8FAFC !important;
  border: 1px dashed #D5DBE5 !important;
  border-radius: 12px !important;
  padding: 0.75rem 0.9rem !important;
  box-shadow: none !important;
}

/* #13: critical actions keep visible text labels (no icon-only) */
body.shell-modern .btn-primary,
body.shell-modern .btn-danger,
body.shell-modern .btn-danger-text {
  letter-spacing: 0.01em;
}


/* ── Slate Blue · tema corporativo (default) ─────────────────────────── */
body.shell-modern.theme-slate {
  color-scheme: only light !important;
  --orizon-bg: #F3F5F8 !important;
  --orizon-surface: #FFFFFF !important;
  --orizon-surface-alt: #E8EDF4 !important;
  --orizon-glass: rgba(255, 255, 255, 0.78) !important;
  --orizon-glass-strong: rgba(255, 255, 255, 0.92) !important;
  --orizon-ink: #0F172A !important;
  --orizon-text: #334155 !important;
  --orizon-muted: #475569 !important;
  --orizon-border: rgba(15, 23, 42, 0.10) !important;
  --orizon-border-solid: #E2E8F0 !important;
  --orizon-green: #1D4ED8 !important;
  --orizon-green-hover: #2563EB !important;
  --orizon-green-soft: #DBEAFE !important;
  --orizon-blue: #1D4ED8 !important;
  --orizon-blue-dark: #1E3A8A !important;
  --semantic-danger: #B91C1C !important;
  --semantic-danger-bg: #FEF2F2 !important;
  --bg: #F3F5F8 !important;
  --surface: #FFFFFF !important;
  --surface-2: #E8EDF4 !important;
  --border: #E2E8F0 !important;
  --text: #0F172A !important;
  --text-muted: #475569 !important;
  --text-secondary: #334155 !important;
  --muted: #475569 !important;
  --accent: #1D4ED8 !important;
  --accent-hover: #2563EB !important;
  --metric-emphasis: #1D4ED8 !important;
  --success: #047857 !important;
  --warning: #B45309 !important;
  --danger: #B91C1C !important;
  --ux-focus: 0 0 0 3px rgba(29, 78, 216, 0.32) !important;
}

html:has(body.theme-slate),
body.shell-modern.theme-slate,
body.shell-modern.theme-slate .main {
  background: #F3F5F8 !important;
  color: #334155 !important;
}

body.shell-modern.theme-slate .hint,
body.shell-modern.theme-slate .subtitle,
body.shell-modern.theme-slate .stat-label,
body.shell-modern.theme-slate .home-kpi-label,
body.shell-modern.theme-slate .empty-state-desc,
body.shell-modern.theme-slate .text-muted {
  color: #475569 !important;
}

body.shell-modern.theme-slate .btn-primary,
body.shell-modern.theme-slate button.btn-primary,
body.shell-modern.theme-slate .auth-submit-btn {
  background: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.22);
}

body.shell-modern.theme-slate .btn-primary:hover,
body.shell-modern.theme-slate .auth-submit-btn:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
}

body.shell-modern.theme-slate .btn-secondary:hover {
  border-color: #1D4ED8 !important;
  color: #1D4ED8 !important;
  background: #EFF6FF !important;
}

body.shell-modern.theme-slate input:focus,
body.shell-modern.theme-slate select:focus,
body.shell-modern.theme-slate textarea:focus,
body.shell-modern.theme-slate .btn:focus-visible,
body.shell-modern.theme-slate .nav-btn:focus-visible,
body.shell-modern.theme-slate a:focus-visible {
  box-shadow: var(--ux-focus) !important;
  border-color: #1D4ED8 !important;
}

body.shell-modern.theme-slate .nav-btn.active,
body.shell-modern.theme-slate .nav-btn[aria-current="page"] {
  background: #DBEAFE !important;
  color: #1E3A8A !important;
  border-color: #BFDBFE !important;
}

body.shell-modern.theme-slate .nav-badge {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}

body.shell-modern.theme-slate .ux-toast-info {
  border-left-color: #1D4ED8 !important;
}

body.shell-modern.theme-slate .workspace-sync-badge[data-sync="saved"] {
  background: #D1FAE5 !important;
  color: #065F46 !important;
  border-color: #10B981 !important;
}

body.shell-modern.theme-slate .home-kpi-card {
  border-left-color: #1D4ED8 !important;
}

body.shell-modern.theme-slate .home-kpi-warn {
  border-left-color: #D97706 !important;
}

body.shell-modern.theme-slate .home-kpi-danger {
  border-left-color: #B91C1C !important;
}

body.shell-modern.theme-slate .status-dot,
body.shell-modern.theme-slate .panel-admin {
  --admin-green: #1D4ED8;
}

body.shell-modern.theme-slate ::selection {
  background: #DBEAFE !important;
  color: #0F172A !important;
}

body.shell-modern.theme-slate .ux-row-menu[open] > summary,
body.shell-modern.theme-slate .ux-row-menu > summary:hover {
  border-color: #1D4ED8 !important;
  color: #1D4ED8 !important;
  background: #EFF6FF !important;
}

body.shell-modern.theme-slate .auth-brand-mark,
body.shell-modern.theme-slate .auth-submit-btn {
  background: #1D4ED8 !important;
}

body.shell-modern.theme-slate .auth-portal {
  --accent: #1D4ED8;
}

body.shell-modern.theme-slate input[type="checkbox"],
body.shell-modern.theme-slate input[type="radio"] {
  accent-color: #1D4ED8;
}


/* ── Shell chrome · logo / theme badge / user dock ───────────────────── */
body.shell-modern .org-switcher-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

body.shell-modern .org-logo-badge {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--accent, #1D4ED8), color-mix(in srgb, var(--accent, #1D4ED8) 40%, #93C5FD)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1D4ED8) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.shell-modern .global-org-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0.3rem !important;
  background: #fff !important;
}

body.shell-modern .global-org-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font: 700 0.72rem/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--accent, #1D4ED8);
  background: color-mix(in srgb, var(--accent, #1D4ED8) 10%, #fff);
}

body.shell-modern .org-select-field {
  min-width: 148px;
  margin: 0;
}

/* User insignia in page footer */
body.shell-modern .app-footer,
body.shell-modern footer.footer.app-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--ux-content-max, 1360px);
  margin: 1.5rem auto 0 !important;
  padding: 0.85rem 1.25rem !important;
  width: 100%;
  box-sizing: border-box;
  text-align: left !important;
  border-top: 1px solid var(--orizon-border-solid, #E2E8F0);
  background: transparent !important;
}

body.shell-modern .footer-brand {
  color: #64748B;
  font-size: 0.78rem;
  font-weight: 500;
}

body.shell-modern .ux-user-insignia,
body.shell-modern .ux-user-dock {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  max-width: min(340px, 100%);
  padding: 0.35rem 0.45rem 0.35rem 0.35rem;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--accent, #1D4ED8) 28%, #E2E8F0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 3px color-mix(in srgb, var(--accent, #1D4ED8) 10%, transparent);
}

body.auth-required .ux-user-insignia,
body.auth-required .ux-user-dock {
  visibility: hidden;
  pointer-events: none;
}

body.shell-modern .ux-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, #1D4ED8);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}

body.shell-modern .ux-user-copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1;
  padding-right: 0.15rem;
}

body.shell-modern .ux-user-copy strong {
  font-size: 0.78rem;
  color: var(--orizon-ink, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

body.shell-modern .ux-user-insignia .rbac-role-badge,
body.shell-modern .ux-user-dock .rbac-role-badge {
  width: fit-content;
  max-width: 100%;
  min-height: 18px;
  padding: 0.05rem 0.4rem !important;
  font-size: 0.65rem !important;
  border-radius: 999px !important;
}

body.shell-modern .ux-user-menu {
  position: relative;
  flex: 0 0 auto;
}

body.shell-modern .ux-user-menu > summary {
  list-style: none;
  cursor: pointer;
  min-height: 26px;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #1D4ED8) 22%, #E2E8F0);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent, #1D4ED8);
  background: color-mix(in srgb, var(--accent, #1D4ED8) 8%, #fff);
}

body.shell-modern .ux-user-menu > summary::-webkit-details-marker { display: none; }

body.shell-modern .ux-user-menu-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 240px;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  z-index: 70;
  display: grid;
  gap: 0.55rem;
}

@media (max-width: 820px) {
  body.shell-modern .app-footer,
  body.shell-modern footer.footer.app-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  body.shell-modern .ux-user-insignia,
  body.shell-modern .ux-user-dock {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }
}

/* Highlight Riesgos + Documentación */
body.shell-modern .nav-group-emphasis {
  background: color-mix(in srgb, var(--accent, #1D4ED8) 10%, #fff) !important;
  border-left: 3px solid var(--accent, #1D4ED8) !important;
  border-radius: 10px !important;
  padding-left: 0.45rem !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #1D4ED8) 18%, transparent);
}

body.shell-modern .nav-group-emphasis .nav-group-label {
  color: var(--accent, #1D4ED8) !important;
  font-weight: 700 !important;
}

body.shell-modern .nav-doc-emphasis {
  background: color-mix(in srgb, var(--accent, #1D4ED8) 12%, #fff) !important;
  color: var(--accent, #1D4ED8) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #1D4ED8) 28%, #E2E8F0) !important;
  font-weight: 700 !important;
}

body.shell-modern .home-risk-emphasis,
body.shell-modern .home-docs-emphasis {
  border-color: color-mix(in srgb, var(--accent, #1D4ED8) 28%, #E2E8F0) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #1D4ED8) 10%, transparent), var(--ux-shadow) !important;
}

body.shell-modern .home-risk-emphasis h3,
body.shell-modern .home-docs-emphasis h3 {
  color: var(--accent, #1D4ED8) !important;
}

/* Home charts restored */
body.shell-modern .home-charts-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1.2fr 0.9fr;
  gap: 1rem !important;
}

body.shell-modern .home-chart-card {
  min-height: 100%;
}

body.shell-modern .home-grc-kpis,
body.shell-modern #grc-dash.audit-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}

body.shell-modern .home-docs-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

body.shell-modern .home-docs-metrics div {
  padding: 0.55rem;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  display: grid;
  gap: 0.15rem;
}

body.shell-modern .home-docs-metrics strong {
  font: 700 1.15rem/1 var(--mono);
  color: var(--orizon-ink, #0F172A);
}

body.shell-modern .home-docs-metrics span {
  font-size: 0.7rem;
  color: #64748B;
}

@media (max-width: 1366px) {
  body.shell-modern .home-charts-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 900px) {
  body.shell-modern .home-charts-grid {
    grid-template-columns: 1fr !important;
  }
  body.shell-modern .home-docs-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ── Header org strip · solo logo/org/sync/tema/auth ─────────────────── */
body.shell-modern .org-switcher-top {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem !important;
  flex-wrap: nowrap !important;
  margin-left: auto;
}

/* Header derecho: solo logo + código + selector organización */
body.shell-modern .org-switcher-top > :not(.org-code-badge):not(.org-select-field):not(#global-org-select) {
  display: none !important;
}
body.shell-modern .org-switcher-top .org-logo-badge,
body.shell-modern .org-switcher-top .global-org-logo,
body.shell-modern .org-switcher-top .global-org-logo-fallback {
  display: none !important;
}

body.shell-modern #ux-theme-select[hidden],
body.shell-modern .org-switcher-top #ux-theme-select {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

body.shell-modern .org-logo-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

body.shell-modern .org-code-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #1D4ED8) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #1D4ED8) 28%, #E2E8F0);
  color: var(--accent, #1D4ED8);
  font: 700 0.72rem/1 var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

body.shell-modern .org-select-field {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.shell-modern .org-select-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748B !important;
  white-space: nowrap;
}

body.shell-modern .org-select-field select {
  min-height: 32px !important;
  height: 32px !important;
  min-width: 88px;
  max-width: 140px;
  padding: 0 0.55rem !important;
  border-radius: 999px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
}

body.shell-modern .org-switcher-top .workspace-sync-badge,
body.shell-modern .org-switcher-top .auth-chip-btn {
  min-height: 32px !important;
  border-radius: 999px !important;
}

body.shell-modern .org-switcher-top .auth-chip-btn[hidden] {
  display: none !important;
}

@media (max-width: 1100px) {
  body.shell-modern .org-select-label { display: none; }
  body.shell-modern .org-select-field select { max-width: 110px; }
}


body.shell-modern .app-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

body.shell-modern .footer-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-left: auto;
}

body.shell-modern .footer-controls .workspace-sync-badge,
body.shell-modern .footer-controls .auth-chip-btn {
  min-height: 30px !important;
  border-radius: 999px !important;
}

body.shell-modern .footer-controls .auth-chip-btn[hidden] {
  display: none !important;
}

body.shell-modern .footer-controls #ux-theme-select[hidden] {
  display: none !important;
}


body.shell-modern .footer-controls { display: none !important; }
body.shell-modern #ux-hidden-controls {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}


/* Administración en footer (fuera de la nav principal) */
body.shell-modern .nav .nav-admin-btn,
body.shell-modern .nav .nav-more {
  display: none !important;
}

body.shell-modern .app-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

body.shell-modern .footer-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

body.shell-modern .footer-admin-btn.nav-btn,
body.shell-modern .footer-admin-btn {
  min-height: 30px !important;
  height: auto !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 999px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

body.shell-modern .footer-admin-btn.nav-btn.active,
body.shell-modern .footer-admin-btn:hover {
  border-color: var(--accent, #1D4ED8) !important;
  color: var(--accent, #1D4ED8) !important;
  background: color-mix(in srgb, var(--accent, #1D4ED8) 8%, #fff) !important;
}

body.shell-modern .footer-admin-btn.rbac-denied,
body.shell-modern .footer-admin-btn[hidden] {
  display: none !important;
}


/* Nav por zonas GRC */
body.shell-modern .nav {
  gap: 0.55rem !important;
}

body.shell-modern .nav-group {
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.4rem 0.2rem 0.5rem !important;
  border-left: 1px solid #D5DBE5 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.shell-modern .nav-group[data-group="core"] {
  border-left: 0 !important;
  padding-left: 0 !important;
}

body.shell-modern .nav-group-label {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748B !important;
  white-space: nowrap;
}

body.shell-modern .nav-group.is-active .nav-group-label {
  color: var(--accent, #1D4ED8) !important;
}

body.shell-modern .nav-group-emphasis {
  background: color-mix(in srgb, var(--accent, #1D4ED8) 8%, #fff) !important;
  border-radius: 10px !important;
  border-left: 3px solid var(--accent, #1D4ED8) !important;
}

body.shell-modern .footer-zone-admin,
body.shell-modern .footer-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

body.shell-modern .footer-zone-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748B;
}


/* ── Inicio sprint visual ─────────────────────────────────────────────── */
/* Nunca forzar display en .panel-home sin .active: ocultaría mal el resto de módulos. */
body.shell-modern .panel-home.active {
  gap: 1rem !important;
}

body.shell-modern .home-overview-header {
  align-items: center;
  gap: 1rem;
}

body.shell-modern .home-kpi-strip-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}

body.shell-modern .home-kpi-tone {
  margin-top: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748B;
}

body.shell-modern .home-kpi-card[data-kpi="gaps"] .home-kpi-tone,
body.shell-modern .home-kpi-card[data-kpi="due"] .home-kpi-tone { color: #B45309; }
body.shell-modern .home-kpi-card[data-kpi="risk"] .home-kpi-tone { color: #B91C1C; }
body.shell-modern .home-kpi-card[data-kpi="progress"] .home-kpi-tone { color: #047857; }

body.shell-modern .home-kpi-delta {
  display: block;
  font-size: 0.72rem;
  font-weight: 650;
  margin-top: 0.15rem;
  min-height: 1em;
}
body.shell-modern .home-kpi-delta.is-up { color: #047857; }
body.shell-modern .home-kpi-delta.is-down { color: #B91C1C; }

/* Foco ejecutivo */
body.shell-modern .home-focus-grid {
  display: grid !important;
  grid-template-columns: 1.55fr 1fr !important;
  gap: 1rem !important;
}

body.shell-modern .home-focus-trend,
body.shell-modern .home-focus-side {
  min-height: 260px;
}

body.shell-modern .home-donut-layout {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.65rem;
}

body.shell-modern .home-donut {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  mask: radial-gradient(circle, transparent 42%, #000 43%);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%);
}

body.shell-modern .home-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.8rem;
}

body.shell-modern .home-donut-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

body.shell-modern .home-focus-actions-title {
  margin: 0.85rem 0 0.35rem;
  font-size: 0.82rem;
}

body.shell-modern .home-focus-actions {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

body.shell-modern .home-command-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

body.shell-modern .home-ops-strip {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

body.shell-modern .home-insights-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

body.shell-modern .home-insights-grid .hm-card {
  min-height: 200px;
}

body.shell-modern .hm-area {
  width: 100%;
  height: auto;
  display: block;
}

body.shell-modern .hm-heat-bars {
  display: grid;
  gap: 0.4rem;
}

body.shell-modern .hm-heat-bar-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 1.6rem;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.78rem;
}

body.shell-modern .hm-heat-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #475569;
}

body.shell-modern .hm-heat-bar-track {
  height: 8px;
  border-radius: 999px;
  background: #FEE2E2;
  overflow: hidden;
}

body.shell-modern .hm-heat-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: #B91C1C;
}

body.shell-modern .hm-caption {
  margin-top: 0.45rem;
  font-size: 0.72rem;
}

body.shell-modern .home-grc-more .home-grc-kpis {
  margin-top: 0.65rem;
}

body.shell-modern .audit-doc-home-moved {
  margin-bottom: 1rem;
}

body.shell-modern .audit-doc-dashboard-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}

body.shell-modern .audit-doc-dashboard-summary::-webkit-details-marker { display: none; }

body.shell-modern .home-readiness-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

body.shell-modern .home-readiness-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  cursor: pointer;
  font: inherit;
}

body.shell-modern .home-readiness-chip:hover {
  border-color: var(--accent, #1D4ED8);
  background: color-mix(in srgb, var(--accent, #1D4ED8) 8%, #fff);
}

body.shell-modern .home-readiness-chip strong {
  font-size: 0.78rem;
  color: var(--orizon-ink, #0F172A);
}

body.shell-modern .home-readiness-chip span {
  font-size: 0.72rem;
  color: var(--accent, #1D4ED8);
  font-weight: 650;
}

@media (max-width: 1100px) {
  body.shell-modern .home-focus-grid,
  body.shell-modern .home-insights-grid,
  body.shell-modern .home-command-grid-2,
  body.shell-modern .home-ops-strip {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  body.shell-modern .home-kpi-strip-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.shell-modern .home-donut-layout {
    grid-template-columns: 96px 1fr;
  }
}

body.shell-modern .home-docs-metrics-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-bottom: 0.75rem;
}

body.shell-modern .work-queue-list-compact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

body.shell-modern .work-queue-list-compact > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
}

body.shell-modern .wq-more {
  justify-content: center !important;
  border-style: dashed !important;
}

@media (max-width: 1200px) {
  body.shell-modern .home-kpi-strip-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.shell-modern .home-focus-grid,
  body.shell-modern .home-insights-grid,
  body.shell-modern .home-command-grid-2,
  body.shell-modern .home-ops-strip {
    grid-template-columns: 1fr !important;
  }
}


/* ── Home insights charts ─────────────────────────────────────────────── */
body.shell-modern .hm-card {
  min-height: 200px;
}

body.shell-modern .hm-card h3 {
  margin: 0 0 0.15rem;
}

body.shell-modern .hm-body {
  margin-top: 0.65rem;
}

body.shell-modern .hm-spark,
body.shell-modern .hm-area,
body.shell-modern .hm-radar {
  width: 100%;
  height: auto;
  display: block;
}

body.shell-modern .hm-svg-label {
  font-size: 9px;
  fill: #64748B;
  font-family: inherit;
}

body.shell-modern .hm-trend-meta {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

body.shell-modern .hm-trend-meta strong {
  font: 700 1.25rem/1 var(--mono);
  color: var(--orizon-ink, #0F172A);
}

body.shell-modern .hm-trend-meta .is-up { color: #047857; font-weight: 650; font-size: 0.8rem; }
body.shell-modern .hm-trend-meta .is-down { color: #B91C1C; font-weight: 650; font-size: 0.8rem; }

body.shell-modern .hm-heat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.4rem;
}

body.shell-modern .hm-heat-cell {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.45rem;
  border: 0;
  border-radius: 10px;
  text-align: left;
  cursor: default;
  font: inherit;
  color: #7F1D1D;
}

body.shell-modern .hm-heat-cell strong {
  font-size: 0.78rem;
}

body.shell-modern .hm-heat-cell span {
  font: 700 1.05rem/1 var(--mono);
}

body.shell-modern .hm-heat-cell small {
  font-size: 0.65rem;
  opacity: 0.8;
}

body.shell-modern .hm-burn-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: end;
  min-height: 140px;
}

body.shell-modern .hm-burn-col {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
}

body.shell-modern .hm-burn-stack {
  position: relative;
  width: 100%;
  height: 110px;
  background: #F1F5F9;
  border-radius: 8px 8px 4px 4px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

body.shell-modern .hm-burn-bar {
  display: block;
  width: 100%;
  background: #1D4ED8;
  border-radius: 6px 6px 0 0;
}

body.shell-modern .hm-burn-bar.is-warn { background: #D97706; }
body.shell-modern .hm-burn-bar.is-danger { background: #B91C1C; }

body.shell-modern .hm-burn-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #0F172A;
  opacity: 0.55;
}

body.shell-modern .hm-burn-col strong {
  font: 700 0.85rem/1 var(--mono);
}

body.shell-modern .hm-burn-col small {
  font-size: 0.65rem;
  color: #64748B;
  text-align: center;
}

body.shell-modern .hm-radar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: #64748B;
}

@media (max-width: 1100px) {
  body.shell-modern .home-insights-grid {
    grid-template-columns: 1fr !important;
  }
  body.shell-modern .hm-burn-bars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Cumplimiento IA · hub Gobierno / Mejora / SoA / work modes (2026-07-31) ── */
:root {
  --font: "DM Sans", "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

body.shell-modern {
  font-family: var(--font);
}

.ux-work-modes {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--border, #e6eaf0);
  border-radius: 8px;
  background: var(--surface, #fff);
}

.ux-work-mode-btn {
  border: 0;
  background: transparent;
  color: var(--text-muted, #6b778c);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.ux-work-mode-btn.active,
.ux-work-mode-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent, #1d4ed8) 12%, #fff);
  color: var(--accent, #1d4ed8);
}

.home-kpi-strip-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  .home-kpi-strip-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gobierno-hub-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.gobierno-hub-card {
  text-align: left;
  border: 1px solid var(--border, #e6eaf0);
  background: var(--surface, #fff);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: grid;
  gap: 4px;
}

.gobierno-hub-card strong {
  font-size: 14px;
  color: var(--text, #1f2937);
}

.gobierno-hub-card span {
  font-size: 12px;
  color: var(--text-muted, #6b778c);
}

.gobierno-hub-card.active,
.gobierno-hub-card:hover {
  border-color: color-mix(in srgb, var(--accent, #1d4ed8) 45%, var(--border, #e6eaf0));
  background: color-mix(in srgb, var(--accent, #1d4ed8) 6%, #fff);
}

.mejora-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 960px) {
  .mejora-board,
  .gobierno-hub-links {
    grid-template-columns: 1fr;
  }
}

.audit-flow-hint {
  align-self: center;
  font-size: 12px;
}

/* Work modes: hide advanced audit chrome for executive / owner focus */
body[data-work-mode="executive"] .audit-advanced-only,
body[data-work-mode="executive"] .audit-page-tools,
body[data-work-mode="executive"] .audit-flow-tools,
body[data-work-mode="owner"] .audit-advanced-only {
  display: none !important;
}

body[data-work-mode="executive"] .nav-group[data-group="risks"] .nav-group-btns .nav-btn:not([data-step="5"]),
body[data-work-mode="executive"] .nav-group[data-group="ops"],
body[data-work-mode="executive"] .nav-group[data-group="more"] {
  opacity: 0.55;
}

body[data-work-mode="owner"] .audit-secondary-eval {
  display: none;
}


/* ── Auditorías · workspace Evidencias + cabina steps (2026-07-31) ── */
.audit-docs-workspace {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.audit-docs-workspace.hidden {
  display: none !important;
}

#audit-eval-workspace.hidden {
  display: none !important;
}

.audit-docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.audit-docs-bulk-candidates {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  margin: 8px 0 12px;
}

.audit-docs-matrix-wrap tr.is-gap {
  background: color-mix(in srgb, #dc2626 6%, #fff);
}

.audit-expected-checklist li.is-matched { color: #047857; }
.audit-expected-checklist li.is-missing { color: #b45309; }

@media (max-width: 1100px) {
  .audit-docs-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Inicio · Intro tarjetas + PDCA (2026-07-31) ── */
.home-section-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6b778c);
  margin-bottom: 4px;
}

.home-section-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--text, #1f2937);
}

.home-section-label-row {
  margin: 8px 0 12px;
}

.home-intro {
  margin: 0 0 1.25rem;
}

.home-intro-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.home-intro.is-collapsed .home-intro-grid {
  display: none;
}

.home-intro-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.home-intro-card {
  display: grid;
  gap: 6px;
  text-align: left;
  padding: 16px 16px 14px;
  border: 1px solid var(--border, #e6eaf0);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  cursor: pointer;
  font: inherit;
  min-height: 132px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.home-intro-card:hover,
.home-intro-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #1d4ed8) 45%, var(--border, #e6eaf0));
  background: color-mix(in srgb, var(--accent, #1d4ed8) 5%, #fff);
  outline: none;
}

.home-intro-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: var(--accent, #1d4ed8);
  background: color-mix(in srgb, var(--accent, #1d4ed8) 10%, #fff);
}

.home-intro-card strong {
  font-size: 0.98rem;
  font-weight: 650;
}

.home-intro-card span {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted, #6b778c);
}

.home-intro-card i {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--accent, #1d4ed8);
  margin-top: auto;
}

.home-guide-promoted {
  margin-bottom: 1.25rem;
  border: 1px solid var(--border, #e6eaf0);
  border-radius: 12px;
  background: var(--surface, #fff);
  padding: 14px 16px;
}

.home-pdca,
.home-phva,
.home-focus-block,
.home-exec-charts {
  margin-bottom: 1.35rem;
}

.home-pdca-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.home-pdca-card {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--border, #e6eaf0);
  border-radius: 12px;
  background: var(--surface, #fff);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.home-pdca-card:hover {
  border-color: color-mix(in srgb, var(--accent, #1d4ed8) 40%, var(--border, #e6eaf0));
}

.home-pdca-letter {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 750;
  color: #fff;
  background: var(--accent, #1d4ed8);
}

.home-pdca-card[data-pdca="plan"] .home-pdca-letter { background: #1d4ed8; }
.home-pdca-card[data-pdca="do"] .home-pdca-letter { background: #0f766e; }
.home-pdca-card[data-pdca="check"] .home-pdca-letter { background: #b45309; }
.home-pdca-card[data-pdca="act"] .home-pdca-letter { background: #be123c; }

.home-pdca-card strong {
  font-size: 0.92rem;
}

.home-pdca-card em {
  font-style: normal;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.home-pdca-card span {
  font-size: 0.78rem;
  color: var(--text-muted, #6b778c);
  line-height: 1.4;
}

/* Mando ejecutivo: KPIs + FODA + SoA */
.home-exec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) auto;
  gap: 12px;
  align-items: stretch;
}

.home-exec-row .home-kpi-strip {
  margin: 0;
}

.home-foda-card {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid var(--border, #e6eaf0);
  border-radius: 12px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent, #1d4ed8) 6%, #fff) 0%, #fff 70%);
}

.home-foda-card strong {
  font-size: 0.95rem;
}

.home-foda-card em {
  font-style: normal;
  font-size: 1.15rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.home-foda-card em[data-tone="ok"],
.home-foda-card[data-tone="ok"] em { color: #047857; }
.home-foda-card em[data-tone="warn"],
.home-foda-card[data-tone="warn"] em { color: #b45309; }
.home-foda-card em[data-tone="muted"],
.home-foda-card[data-tone="muted"] em { color: #64748b; }

.home-foda-card .hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.home-foda-meta {
  font-size: 0.72rem;
  color: var(--text-muted, #6b778c);
}

.home-soa-chip {
  display: grid;
  place-content: center;
  gap: 2px;
  min-width: 88px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e6eaf0);
  border-radius: 12px;
  background: var(--surface, #fff);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.home-soa-chip span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6b778c);
}

.home-soa-chip strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.home-soa-chip:hover {
  border-color: color-mix(in srgb, var(--accent, #1d4ed8) 40%, var(--border, #e6eaf0));
}

/* PHVA anillo + cards */
.home-phva {
  margin-bottom: 1.35rem;
}

.home-phva-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.home-phva-ring {
  width: 168px;
  height: 168px;
  flex-shrink: 0;
}

.home-phva-ring svg {
  display: block;
  width: 100%;
  height: auto;
}

.home-phva-ring-letter {
  font-size: 11px;
  font-weight: 750;
}

.home-phva-ring-avg {
  font-size: 22px;
  font-weight: 750;
  fill: var(--text, #0f172a);
}

.home-phva-ring-caption {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--text-muted, #6b778c);
}

.home-exec-charts {
  margin-bottom: 1.35rem;
}

.home-exec-charts .home-focus-grid {
  margin-bottom: 12px;
}

.home-readiness-inline {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e6eaf0);
}

.home-intro.is-collapsed .home-intro-head {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .home-exec-row {
    grid-template-columns: 1fr 1fr;
  }
  .home-soa-chip {
    grid-column: 2;
    justify-self: end;
  }
  .home-phva-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

@media (max-width: 640px) {
  .home-exec-row {
    grid-template-columns: 1fr;
  }
  .home-soa-chip {
    grid-column: auto;
    justify-self: stretch;
  }
}

.home-ops-strip-compact {
  margin-top: 12px;
}

.home-more-details {
  margin-top: 0.5rem;
  border: 1px solid var(--border, #e6eaf0);
  border-radius: 12px;
  background: var(--surface, #fff);
  padding: 0 4px 4px;
}

.home-more-details > summary {
  cursor: pointer;
  padding: 12px 12px;
  font-weight: 650;
  color: var(--text-muted, #6b778c);
}

@media (max-width: 1100px) {
  .home-intro-grid,
  .home-pdca-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-intro-grid,
  .home-pdca-grid {
    grid-template-columns: 1fr;
  }
}

/* Ejecutivo: intro más compacta */
body[data-work-mode="executive"] .home-intro-card {
  min-height: 112px;
}

.audit-pdca-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.audit-pdca-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, #e6eaf0);
  color: var(--text-muted, #6b778c);
  background: #fff;
}
.audit-pdca-chip.is-active {
  color: var(--accent, #1d4ed8);
  border-color: color-mix(in srgb, var(--accent, #1d4ed8) 40%, #e6eaf0);
  background: color-mix(in srgb, var(--accent, #1d4ed8) 8%, #fff);
}
.audit-phase-pdca {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted, #6b778c);
}
.audit-phase-btn.active .audit-phase-pdca {
  color: var(--accent, #1d4ed8);
}

/* ═══ App shell · sidebar izquierda + topbar (2026-07-31) ═══════════════ */
:root {
  --sb-w: 244px;
  --sb-w-collapsed: 68px;
  --tb-h: 52px;
  --header-sticky-offset: calc(var(--tb-h) + 4px);

  --sb-bg: #0f172a;
  --sb-bg-soft: rgba(255,255,255,.04);
  --sb-line: rgba(148,163,184,.1);
  --sb-ink: #F1F5F9;
  --sb-muted: #94a3b8;
  --sb-accent: #14b8a6;

  --app-bg: #F7F9FC;
  --app-wallpaper-grid: rgba(15, 118, 110, 0.035);
  --app-wallpaper-glow-a: rgba(15, 118, 110, 0.05);
  --app-wallpaper-glow-b: rgba(29, 78, 216, 0.04);
  --app-panel: #FFFFFF;
  --app-line: #CBD5E1;
  --app-ink: #0F172A;
  --app-muted: #52627A;

  --dom-core: #64748B;
  --dom-comms: #38BDF8;
  --dom-compliance: #14B8A6;
  --dom-risks: #F59E0B;
  --dom-ops: #F472B6;
  --dom-admin: #A78BFA;
}

/* ── Wallpaper «portal suave»: grilla táctica del login en tono claro ─── */
html:has(body.shell-modern),
html:has(body.theme-slate) {
  background: var(--app-bg) !important;
}

body.shell-modern,
body.shell-modern.theme-slate {
  background-color: var(--app-bg) !important;
  background-image:
    linear-gradient(to right, var(--app-wallpaper-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--app-wallpaper-grid) 1px, transparent 1px),
    radial-gradient(ellipse at 18% 0%, var(--app-wallpaper-glow-a) 0%, transparent 42%),
    radial-gradient(ellipse at 82% 100%, var(--app-wallpaper-glow-b) 0%, transparent 42%) !important;
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100% !important;
  background-attachment: fixed !important;
  color: #1E293B !important;
}

body.shell-modern.theme-slate .main,
body.shell-modern .main {
  background: transparent !important;
  color: #1E293B !important;
}

body.shell-modern.theme-slate {
  --orizon-bg: #F7F9FC !important;
  --bg: #F7F9FC !important;
  --orizon-surface-alt: #EEF2F8 !important;
  --surface-2: #EEF2F8 !important;
  --border: #CBD5E1 !important;
  --orizon-border-solid: #CBD5E1 !important;
  --orizon-border: rgba(15, 23, 42, 0.14) !important;
  --text-muted: #52627A !important;
  --orizon-muted: #52627A !important;
}

/* Login: el portal oscuro cubre todo; evitamos que asome la grilla clara */
body.auth-required.shell-modern {
  background-image: none !important;
  background-color: #0A1428 !important;
}

@media (max-width: 720px) {
  body.shell-modern,
  body.shell-modern.theme-slate {
    --app-wallpaper-grid: rgba(15, 118, 110, 0.022);
    --app-wallpaper-glow-a: rgba(15, 118, 110, 0.035);
    --app-wallpaper-glow-b: rgba(29, 78, 216, 0.028);
  }
}

/* Tarjetas y superficies: blanco puro + borde definido = separación clara */
body.shell-modern .card,
body.shell-modern .panel > .panel-header,
body.shell-modern .home-overview-header,
body.shell-modern .home-kpi-card,
body.shell-modern .home-command-card,
body.shell-modern .guide,
body.shell-modern .table-wrap,
body.shell-modern .stat-card,
body.shell-modern .kpi-card,
body.shell-modern .home-chart-card,
body.shell-modern .home-intro-card,
body.shell-modern .home-pdca-card {
  background: var(--app-panel) !important;
  border: 1px solid var(--app-line) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
/* z-index bajo .modal (80) para no tapar diálogos y cabinas. */
#app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  width: var(--sb-w);
  display: flex;
  flex-direction: column;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-line);
  color: var(--sb-ink);
  overflow: hidden;
  transition: width 0.16s ease, transform 0.18s ease;
}

body.shell-modern:not(.auth-required) {
  padding-left: var(--sb-w);
  transition: padding-left 0.16s ease;
}

body.sidebar-collapsed:not(.auth-required) { padding-left: var(--sb-w-collapsed); }
body.sidebar-collapsed #app-sidebar { width: var(--sb-w-collapsed); }
body.auth-required #app-sidebar,
body.auth-required .app-topbar { display: none !important; }

#app-sidebar .sb-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tb-h);
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--sb-line);
}

#app-sidebar .sb-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}

#app-sidebar .sb-mark {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(20,184,166,.15);
  color: var(--sb-accent);
  font: 800 0.95rem/1 var(--font, "DM Sans", sans-serif);
}

#app-sidebar .sb-brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

#app-sidebar .sb-brand-copy strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

#app-sidebar .sb-brand-copy small {
  font-size: 0.62rem;
  color: var(--sb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#app-sidebar .sb-collapse {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--sb-line);
  border-radius: 7px;
  background: var(--sb-bg-soft);
  color: var(--sb-muted);
  font-size: 0.75rem;
  cursor: pointer;
}

#app-sidebar .sb-collapse:hover { color: #fff; border-color: #35496B; }

#app-sidebar .sb-org {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.6rem 0.6rem 0.35rem;
  padding: 0.2rem 0.35rem 0.2rem 0.25rem;
  border: 1px solid var(--sb-line);
  border-radius: 9px;
  background: var(--sb-bg-soft);
  cursor: pointer;
}

#app-sidebar .sb-org-code {
  flex: 0 0 auto;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  background: rgba(96, 165, 250, 0.16);
  color: var(--sb-accent);
  font: 700 0.62rem/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#app-sidebar .sb-org select,
#app-sidebar #global-org-select {
  flex: 1;
  min-width: 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 1rem 0 0.2rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #E2E8F0 !important;
  font: 600 0.8rem/1 var(--font, "DM Sans", sans-serif) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2393A4BD' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.15rem center !important;
  background-size: 8px 5px !important;
}

#app-sidebar #global-org-select option { color: #0F172A; }

/* Nav vertical */
#app-sidebar .sb-nav.nav,
#app-sidebar #app-primary-nav {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0.15rem !important;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 !important;
  padding: 0.35rem 0.5rem 0.75rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #2B3C57 transparent;
}

#app-sidebar .nav-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.1rem !important;
  margin: 0 0 0.35rem !important;
  padding: 0.35rem 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app-sidebar .nav-group[data-group="core"] { --dom: var(--dom-core); }
#app-sidebar .nav-group[data-group="comms"] { --dom: var(--dom-comms); }
#app-sidebar .nav-group[data-group="compliance"] { --dom: var(--dom-compliance); }
#app-sidebar .nav-group[data-group="risks"] { --dom: var(--dom-risks); }
#app-sidebar .nav-group[data-group="ops"] { --dom: var(--dom-ops); }
#app-sidebar .nav-group[data-group="admin"] { --dom: var(--dom-admin); }

#app-sidebar .nav-group-label {
  display: block !important;
  padding: 0 0.55rem 0.25rem !important;
  font: 700 0.6rem/1 var(--font, "DM Sans", sans-serif) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7A8CA8 !important;
  white-space: nowrap;
}

#app-sidebar .nav-group.is-active .nav-group-label { color: var(--dom) !important; }

#app-sidebar .nav-group-btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.1rem !important;
  flex-wrap: nowrap !important;
}

#app-sidebar .nav-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem;
  width: 100%;
  min-height: 34px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.4rem 0.55rem !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #C7D3E4 !important;
  font: 600 0.83rem/1.2 var(--font, "DM Sans", sans-serif) !important;
  text-align: left;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
}

#app-sidebar .nav-btn::before {
  content: attr(data-icon);
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-size: 0.8rem;
  color: #7A8CA8;
  display: none;
}
#app-sidebar .nav-btn .sb-icon {
  flex: 0 0 auto;
  width: 18px !important; height: 18px !important;
  min-width: 18px; max-width: 18px;
  color: #7A8CA8;
  overflow: visible;
}
#app-sidebar .nav-btn .sb-icon,
#app-sidebar .nav-btn .sb-icon path,
#app-sidebar .nav-btn .sb-icon rect,
#app-sidebar .nav-btn .sb-icon line,
#app-sidebar .nav-btn .sb-icon polyline,
#app-sidebar .nav-btn .sb-icon polygon,
#app-sidebar .nav-btn .sb-icon circle {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#app-sidebar .nav-btn .sb-icon circle[fill="currentColor"],
#app-sidebar .nav-btn .sb-icon .sb-fill {
  fill: currentColor !important;
  stroke: none !important;
}
#app-sidebar .nav-btn:hover .sb-icon { color: #cbd5e1; }
#app-sidebar .nav-btn.active .sb-icon { color: #14b8a6; }

#app-sidebar .nav-btn:hover {
  background: var(--sb-bg-soft) !important;
  color: #fff !important;
}

#app-sidebar .nav-btn:hover::before { color: var(--dom, #93A4BD); }

#app-sidebar .nav-btn.active,
#app-sidebar .nav-btn.active:hover {
  background: var(--sb-bg-soft) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--sb-accent) !important;
}

#app-sidebar .nav-btn.active::before { color: var(--sb-accent); }

#app-sidebar .nav-btn .nav-badge {
  margin-left: auto;
  background: #DC2626 !important;
  color: #fff !important;
  border: 0 !important;
}

#app-sidebar .nav-btn.rbac-denied,
#app-sidebar .nav-btn[hidden] { display: none !important; }

#app-sidebar .nav-group-admin { margin-top: auto !important; }

/* Pie del sidebar: usuario */
#app-sidebar .sb-foot {
  flex: 0 0 auto;
  padding: 0.5rem;
  border-top: 1px solid var(--sb-line);
}

#app-sidebar .sb-user { position: relative; }

#app-sidebar .sb-user > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.4rem;
  border-radius: 9px;
  cursor: pointer;
}

#app-sidebar .sb-user > summary::-webkit-details-marker { display: none; }
#app-sidebar .sb-user > summary:hover { background: var(--sb-bg-soft); }

#app-sidebar .ux-user-avatar {
  flex: 0 0 auto;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2563EB !important;
  color: #fff !important;
  font: 700 0.78rem/1 var(--font, "DM Sans", sans-serif);
  box-shadow: none !important;
}

#app-sidebar .sb-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.15;
}

#app-sidebar .sb-user-meta strong {
  font-size: 0.78rem;
  color: #F1F5F9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#app-sidebar .rbac-role-badge {
  width: fit-content;
  max-width: 100%;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sb-muted) !important;
  font: 600 0.64rem/1.3 var(--font, "DM Sans", sans-serif) !important;
  text-transform: capitalize;
}

#app-sidebar .sb-user-caret { color: var(--sb-muted); font-size: 0.6rem; }
#app-sidebar .sb-user[open] .sb-user-caret { transform: rotate(180deg); }

#app-sidebar .sb-user-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: 232px;
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--app-line);
  box-shadow: 0 16px 32px rgba(2, 8, 23, 0.28);
  color: var(--app-ink);
}

#app-sidebar .sb-user-panel .ux-user-email { margin: 0; font-size: 0.75rem; }

/* Colapsado: solo iconos */
body.sidebar-collapsed #app-sidebar .sb-brand-copy,
body.sidebar-collapsed #app-sidebar .sb-org-code,
body.sidebar-collapsed #app-sidebar .nav-group-label,
body.sidebar-collapsed #app-sidebar .sb-user-meta,
body.sidebar-collapsed #app-sidebar .sb-user-caret { display: none !important; }

body.sidebar-collapsed #app-sidebar .sb-head { justify-content: center; padding: 0.5rem 0.35rem; }
body.sidebar-collapsed #app-sidebar .sb-brand { flex: 0 0 auto; }
body.sidebar-collapsed #app-sidebar .sb-collapse { position: absolute; top: 0.6rem; right: 0.35rem; opacity: 0; }
body.sidebar-collapsed #app-sidebar:hover .sb-collapse { opacity: 1; }
body.sidebar-collapsed #app-sidebar .sb-collapse span { transform: rotate(180deg); display: block; }
body.sidebar-collapsed #app-sidebar .sb-org { justify-content: center; margin: 0.5rem 0.5rem 0.35rem; }
body.sidebar-collapsed #app-sidebar .sb-org select { display: none !important; }
body.sidebar-collapsed #app-sidebar .sb-org::after {
  content: "ORG";
  font: 700 0.6rem/1 var(--mono, ui-monospace, monospace);
  color: var(--sb-accent);
}
body.sidebar-collapsed #app-sidebar .nav-btn {
  justify-content: center;
  font-size: 0;
  padding: 0.45rem 0 !important;
  gap: 0;
}
body.sidebar-collapsed #app-sidebar .nav-btn::before { font-size: 0.95rem; width: auto; }
body.sidebar-collapsed #app-sidebar .nav-group { border-top: 1px solid var(--sb-line); }
body.sidebar-collapsed #app-sidebar .nav-group:first-child { border-top: 0; }
body.sidebar-collapsed #app-sidebar .sb-user > summary { justify-content: center; }
body.sidebar-collapsed #app-sidebar .sb-user-panel { left: calc(100% + 8px); bottom: 0; }

/* ── Topbar ──────────────────────────────────────────────────────────── */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tb-h);
  padding: 0.4rem 1.25rem;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--app-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.16s ease;
}

.app-topbar.is-elevated { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }

.app-topbar .tb-menu {
  display: none;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #fff;
  color: var(--app-ink);
  font-size: 0.95rem;
  cursor: pointer;
}

.app-topbar .tb-crumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--app-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-topbar .tb-crumb .ux-crumb-current { color: var(--app-ink); font-weight: 650; }
.app-topbar .tb-crumb .ux-crumb-sep { opacity: 0.55; }

.app-topbar .tb-spacer { flex: 1 1 auto; }

.app-topbar .tb-cmd {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 15rem;
  min-width: 0;
  min-height: 34px;
  padding: 0 0.4rem 0 0.75rem;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: #fff;
  color: var(--app-muted);
  font: 500 0.8rem/1 var(--font, "DM Sans", sans-serif);
  cursor: pointer;
}

.app-topbar .tb-cmd:hover { border-color: #94A3B8; color: #334155; }

.app-topbar .tb-cmd-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.app-topbar .tb-kbd {
  flex: 0 0 auto;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  background: #F1F5F9;
  color: var(--app-muted);
  font: 600 0.65rem/1 var(--mono, ui-monospace, monospace);
}

.app-topbar .tb-modes.ux-work-modes {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: #EEF2F8;
}

.app-topbar .tb-modes .ux-work-mode-btn {
  border: 0;
  background: transparent;
  color: var(--app-muted);
  font: 650 0.72rem/1 var(--font, "DM Sans", sans-serif);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
}

.app-topbar .tb-modes .ux-work-mode-btn.active,
.app-topbar .tb-modes .ux-work-mode-btn[aria-pressed="true"] {
  background: #fff;
  color: #1D4ED8;
  box-shadow: 0 0 0 1px #BFDBFE;
}

.app-topbar .tb-sync.workspace-sync-badge {
  flex: 0 0 auto;
  width: 9px !important;
  height: 9px !important;
  min-height: 9px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden;
  background: #94A3B8 !important;
}

.app-topbar .tb-sync[data-sync="saved"] { background: #059669 !important; }
.app-topbar .tb-sync[data-sync="saving"] { background: #D97706 !important; }
.app-topbar .tb-sync[data-sync="error"] { background: #DC2626 !important; }

.sb-scrim {
  position: fixed;
  inset: 0;
  z-index: 68;
  background: rgba(2, 8, 23, 0.45);
  border: 0;
}
.sb-scrim[hidden] { display: none; }

/* Contenido: sin doble centrado ahora que hay rail */
body.shell-modern .main,
body.shell-modern .app-footer,
body.shell-modern footer.footer.app-footer {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.shell-modern .subnav,
body.shell-modern .panel-tabs,
body.shell-modern .tab-bar,
body.shell-modern .audit-subnav,
body.shell-modern .filters-sticky {
  top: var(--header-sticky-offset) !important;
}

body[data-work-mode="executive"] #app-sidebar .nav-group[data-group="risks"] .nav-btn:not([data-step="5"]),
body[data-work-mode="executive"] #app-sidebar .nav-group[data-group="ops"] .nav-btn[data-step="11"],
body[data-work-mode="executive"] #app-sidebar .nav-group[data-group="ops"] .nav-btn[data-step="12"] {
  opacity: 0.5;
}

/* ── Command palette ─────────────────────────────────────────────────── */
.header-cmd-dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(2, 8, 23, 0.28);
  background: #fff;
}
.header-cmd-dialog::backdrop { background: rgba(2, 8, 23, 0.45); }
.header-cmd-form { display: grid; gap: 0; }
.header-cmd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem 0.35rem;
}
.header-cmd-head h2 { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--app-ink); }
.header-cmd-input {
  margin: 0 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
}
.header-cmd-list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  max-height: min(50vh, 22rem);
  overflow: auto;
}
.header-cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
  border-top: 1px solid #EEF2F8;
}
.header-cmd-item.is-active,
.header-cmd-item:hover { background: #F1F5F9; }
.header-cmd-item-label { font-weight: 650; color: var(--app-ink); }
.header-cmd-item-group {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--app-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.header-cmd-empty { padding: 1rem; text-align: center; color: var(--app-muted); font-size: 0.85rem; }
.header-cmd-hint { margin: 0; padding: 0.55rem 1rem 0.75rem; font-size: 0.7rem; color: #94A3B8; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .app-topbar .tb-cmd { flex-basis: 2.8rem; padding: 0 0.55rem; justify-content: center; }
  .app-topbar .tb-cmd-label { display: none; }
  .app-topbar .tb-kbd { border: 0; background: transparent; padding: 0; }
}

@media (max-width: 960px) {
  body.shell-modern:not(.auth-required),
  body.sidebar-collapsed:not(.auth-required) { padding-left: 0; }

  #app-sidebar {
    width: var(--sb-w) !important;
    transform: translateX(-100%);
    box-shadow: none;
  }

  body.sidebar-open #app-sidebar {
    transform: translateX(0);
    box-shadow: 0 24px 48px rgba(2, 8, 23, 0.35);
  }

  body.sidebar-collapsed #app-sidebar .sb-brand-copy,
  body.sidebar-collapsed #app-sidebar .nav-group-label,
  body.sidebar-collapsed #app-sidebar .sb-user-meta { display: flex !important; }
  body.sidebar-collapsed #app-sidebar .nav-btn { font-size: 0.83rem; justify-content: flex-start; padding: 0.4rem 0.55rem !important; gap: 0.6rem; }
  body.sidebar-collapsed #app-sidebar .sb-org select { display: block !important; }
  body.sidebar-collapsed #app-sidebar .sb-org::after { content: none; }

  #app-sidebar .sb-collapse { display: none; }
  .app-topbar .tb-menu { display: inline-grid; }
  .app-topbar .tb-modes { display: none; }
}

@media (max-width: 640px) {
  .app-topbar { padding: 0.4rem 0.85rem; }
  body.shell-modern .main { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
}

/* ── Búsqueda semántica ISO emb (Gobierno · Índice Maestro) ──────────── */
/* La caja de la consulta ya no es propia: el Índice tiene **una** caja con modo
 * (`.doc-idx-search`), así que acá queda sólo el panel donde cae el ranking. */
.evid-lib-semantic-panel {
  margin: 0.65rem 0 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #BFDBFE;
  border-radius: 12px;
  background: #F8FBFF;
}

.evid-lib-semantic-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}

.evid-lib-semantic-head strong {
  color: #1E3A8A;
  font-size: 0.85rem;
}

.evid-lib-semantic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.evid-lib-semantic-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: inherit;
}

.evid-lib-semantic-item:hover {
  border-color: #93C5FD;
  background: #EFF6FF;
}

.evid-lib-semantic-rank {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #DBEAFE;
  color: #1D4ED8;
  font: 700 0.72rem/1 var(--mono, ui-monospace, monospace);
}

.evid-lib-semantic-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.evid-lib-semantic-copy strong {
  font-size: 0.84rem;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.evid-lib-semantic-copy small {
  font-size: 0.72rem;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.evid-lib-semantic-score {
  flex: 0 0 auto;
  font: 700 0.78rem/1 var(--mono, ui-monospace, monospace);
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 999px;
  padding: 0.28rem 0.5rem;
}

/* Evidence picker · ISO embedding badges */
.audit-evidence-emb {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font: 700 0.7rem/1 var(--mono, ui-monospace, monospace);
  color: #1D4ED8;
  background: #DBEAFE;
  border: 1px solid #93C5FD;
}
.audit-evidence-emb.is-strong {
  color: #047857;
  background: #ECFDF5;
  border-color: #6EE7B7;
}
.audit-evidence-candidate.is-ai-strong {
  border-color: #6EE7B7;
  box-shadow: inset 3px 0 0 #10B981;
}
#audit-evidence-picker-ai-top {
  white-space: nowrap;
}


/* Biblioteca · solo búsqueda IA */
.doc-idx-filters-ai-only {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0 0.25rem;
}


/* Compact facets + AI improve panel */
.doc-idx-folders-compact { margin: 0.35rem 0 0.5rem; }
.doc-idx-facets > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  color: #475569;
  user-select: none;
}
.doc-idx-facets > summary::-webkit-details-marker { display: none; }
.doc-idx-facets > summary::before {
  content: "▸ ";
  color: #94A3B8;
}
.doc-idx-facets[open] > summary::before { content: "▾ "; }
.doc-idx-facet-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.doc-idx-facet-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0.4rem;
  align-items: start;
}
.doc-idx-facet-row > span {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 0.28rem;
}
.doc-idx-facet-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.doc-idx-folders-compact .doc-idx-chip {
  font-size: 0.72rem;
  padding: 0.18rem 0.45rem;
  line-height: 1.2;
}
.doc-idx-active-filters {
  margin: 0.25rem 0 0.4rem;
  font-size: 0.78rem;
}
.doc-control-explanation { display: none; }
.doc-preview-ai-panel {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #BFDBFE;
  background: #F8FBFF;
  border-radius: 8px;
}
.doc-preview-ai-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.doc-preview-ai-text {
  max-height: 22rem;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0 0 0.65rem;
}

.doc-idx-missing-file {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #B45309;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
}
.doc-preview-ai-empty {
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem;
  border: 1px dashed #F59E0B;
  background: #FFFBEB;
  border-radius: 8px;
}
.doc-preview-ai-empty strong { display: block; margin-bottom: 0.25rem; }

/* Evidence picker IA status */
.audit-evidence-picker-ai-status {
  margin: 0.35rem 0 0;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #0F172A;
  color: #CBD5E1;
  font-size: 0.78rem;
}
.audit-evidence-picker-ai-status[data-state="ready"] {
  border-color: #166534;
  background: #052e16;
  color: #BBF7D0;
}
.audit-evidence-picker-ai-status[data-state="empty"],
.audit-evidence-picker-ai-status[data-state="error"] {
  border-color: #92400E;
  background: #451A03;
  color: #FDE68A;
}
#audit-evidence-picker-ai-top:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.audit-expected-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0.35rem 0;
}
.audit-expected-checklist .audit-expected-label {
  flex: 1 1 12rem;
  min-width: 0;
}
.audit-expected-checklist .is-missing {
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
}
.audit-expected-checklist .is-matched {
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}
#audit-expected-ai-status {
  margin-top: 0.5rem;
  color: #334155;
}

.audit-cabin-context-head {
  min-width: 0;
  flex: none;
  padding: 0.6rem 0.85rem 0.4rem;
  border-bottom: 1px solid #E2E8F0;
  background: var(--surface);
}
/*
 * Identidad del control: el ref y el nombre viven en la columna del medio, arriba, así
 * que a mitad del panel ya no se sabe de qué control es la guía. Una línea, recortada,
 * con el nombre completo en el `title`: la cabecera tiene que seguir siendo corta.
 */
.audit-guide-control {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.3rem 0 0;
  min-width: 0;
}
.audit-guide-control:empty { display: none; }
.audit-guide-control code {
  flex: none;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
  font: 700 0.7rem/1.3 var(--mono, monospace);
}
.audit-guide-control span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0F172A;
}
/*
 * El índice del panel. Nada se pliega: los chips llevan a su sección y marcan cuál está
 * a la vista, que es lo que faltaba —la navegación existía en el rail de pasos de la
 * columna del medio y nada la anunciaba acá—.
 */
.audit-guide-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.45rem;
}
.audit-guide-rail button {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #F8FAFC;
  color: #475569;
  cursor: pointer;
  font: 600 0.68rem/1.2 inherit;
  white-space: nowrap;
}
.audit-guide-rail button:hover { border-color: var(--accent); color: var(--accent); }
.audit-guide-rail button.is-current {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--accent);
}
.audit-guide-rail button.is-done { color: #166534; }
.audit-guide-rail button.is-done.is-current { color: var(--accent); }
/* Sección escondida por «Solo faltantes»: el chip es lo que dice que sigue estando. */
.audit-guide-rail button.is-hidden {
  border-style: dashed;
  opacity: 0.6;
}
.audit-guide-rail button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Por qué está resaltada esta sección: el paso que se está llenando en el formulario. */
.audit-guide-step-note {
  margin-left: auto;
  color: var(--accent);
  font-size: 0.63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.audit-guide-step-note:empty { display: none; }
/*
 * Muelle de biblioteca: es la sección que más se busca y la que más crece (el buscador se
 * monta adentro), así que sale del scroll y queda al pie, siempre alcanzable. Vivía además
 * dentro del HTML que se reescribe en cada autoguardado, o sea que se cerraba sola.
 */
.audit-guide-dock {
  min-width: 0;
  /* Cede altura antes que la guía, y su buscador scrollea adentro. */
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.audit-guide-dock-bar { flex: none; }
.audit-guide-dock.is-active {
  box-shadow: inset 0 3px 0 var(--accent);
}
.audit-guide-dock-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  flex-wrap: wrap;
}
.audit-cabin-context-head .audit-cabin-eyebrow {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748B;
}
.audit-cabin-context-unified {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem 1rem;
  /* Piso de la guía: abrir el muelle no puede dejarla en una franja ilegible. */
  flex: 1 1 0;
  min-height: 150px;
  overflow-y: auto;
}
.audit-guide-section { scroll-margin-top: 0.4rem; }
.audit-guide-section {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #F8FAFC;
  padding: 0.65rem 0.75rem 0.8rem;
  transition: opacity 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.audit-guide-section.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, #E2E8F0);
  box-shadow: inset 3px 0 0 var(--accent);
  background: #fff;
}
.audit-guide-section.is-dimmed {
  opacity: 0.58;
}
.audit-guide-section.is-drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}
.audit-guide-section header {
  display: grid;
  gap: 0.1rem;
  margin-bottom: 0.45rem;
}
.audit-guide-section header strong {
  font-size: 0.92rem;
  color: #0F172A;
}
.audit-cabin-context-head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.audit-guide-only-missing {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: #475569;
  white-space: nowrap;
}
.audit-guide-mini-complete {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}
.audit-guide-shortcuts {
  margin: 0.35rem 0 0;
  font-size: 0.68rem;
}
.audit-guide-shortcuts kbd {
  display: inline-block;
  padding: 0.05rem 0.28rem;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  background: #fff;
  font-size: 0.65rem;
}
.audit-guide-resolve {
  margin-bottom: 0.15rem;
}
.audit-guide-ai-top {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px dashed #CBD5E1;
}
.audit-guide-ai-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.audit-guide-ai-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
}
.audit-guide-ai-list em {
  color: #1d4ed8;
  font-style: normal;
  font-weight: 700;
  margin-left: 0.25rem;
}
.audit-guide-drop-hint {
  margin-top: 0.45rem;
}
/* Abierto, el buscador toma media columna y scrollea solo: el resto del panel sigue ahí. */
.audit-cabin-library-inline {
  border-top: 1px dashed #CBD5E1;
  padding: 0.55rem 0.75rem 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 360px;
  overflow-y: auto;
}
.audit-cabin-library-inline[hidden] { display: none; }

/* —— Sidebar visualization upgrades —— */
#app-sidebar .sb-org-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin: 0.65rem 0.6rem 0.4rem;
}

#app-sidebar .sb-org-logo {
  flex: 0 0 auto;
  width: 66px; /* +200% vs 22px original */
  height: 66px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(148, 163, 184, 0.18);
  color: #E2E8F0;
  font: 700 1.05rem/1 var(--mono, ui-monospace, monospace);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.22);
}
#app-sidebar .sb-org-logo.has-image { background: #fff; }
#app-sidebar .sb-org-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 4px;
}

#app-sidebar .sb-org-block .sb-org {
  width: 100%;
  margin: 0;
}

#app-sidebar .nav-group-label {
  display: block !important;
  width: auto;
  cursor: default;
  pointer-events: none;
}

#app-sidebar .nav-btn:focus-visible,
#app-sidebar .sb-collapse:focus-visible,
#app-sidebar .sb-org select:focus-visible {
  outline: 2px solid #60A5FA;
  outline-offset: 2px;
}

#app-sidebar .rbac-role-badge[data-role="administrador"] {
  background: rgba(59, 130, 246, 0.22);
  color: #93C5FD;
}
#app-sidebar .rbac-role-badge[data-role="auditor"] {
  background: rgba(16, 185, 129, 0.2);
  color: #6EE7B7;
}
#app-sidebar .rbac-role-badge[data-role="ciso"] {
  background: rgba(168, 85, 247, 0.22);
  color: #D8B4FE;
}
#app-sidebar .rbac-role-badge[data-role="cliente"] {
  background: rgba(148, 163, 184, 0.18);
  color: #CBD5E1;
}

body.sidebar-collapsed #app-sidebar .sb-org-block { display: none !important; }

/* SoA checklist process */
.soa-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: 0.55rem 0 0.45rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, #0f766e);
}
.soa-strip-progress {
  display: grid;
  grid-template-columns: auto minmax(88px, 140px) auto;
  gap: 0.4rem;
  align-items: center;
  min-width: min(240px, 100%);
}
.soa-strip-pct {
  font: 800 1rem/1 var(--font, "DM Sans", sans-serif);
  color: #0f766e;
  letter-spacing: -0.02em;
}
.soa-strip-progress .progress-track {
  height: 0.45rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.soa-strip-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0f766e, #14b8a6);
}
.soa-strip-caption {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.soa-strip-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  align-items: center;
  font-size: 0.78rem;
  color: #475569;
}
.soa-strip-metrics b {
  color: #0f172a;
  font-weight: 750;
}
.soa-strip-metrics .is-warn b { color: #b45309; }
.soa-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
}
.soa-status-chip[data-status="approved"] {
  border-color: #6ee7b7;
  background: #ecfdf5;
  color: #047857;
}
.soa-status-chip[data-status="pending_approval"] {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #b45309;
}
.soa-status-chip[data-status="reopen_requested"] {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.soa-seal-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  align-items: center;
  margin: 0 0 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #a7f3d0;
  background: linear-gradient(160deg, #ecfdf5, #f0fdfa);
}
.soa-seal-banner.is-pending {
  border-color: #fcd34d;
  background: linear-gradient(160deg, #fffbeb, #fff7ed);
}
.soa-seal-banner.is-reopen {
  border-color: #93c5fd;
  background: linear-gradient(160deg, #eff6ff, #f8fafc);
}
.soa-seal-banner strong {
  font-size: 0.88rem;
  color: #065f46;
}
.soa-seal-banner.is-pending strong { color: #92400e; }
.soa-seal-banner.is-reopen strong { color: #1e40af; }
.soa-seal-banner span {
  flex: 1;
  min-width: 180px;
  font-size: 0.8rem;
  color: #475569;
}
.panel-soa.soa-sealed .soa-checklist-table textarea,
.panel-soa.soa-sealed .soa-switch {
  opacity: 0.85;
}
.soa-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin: 0.75rem 0 0.35rem;
}
.soa-toolbar .input {
  min-width: min(280px, 100%);
  flex: 1;
}
.soa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
}
.soa-filters .chip {
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  cursor: pointer;
}
.soa-filters .chip.is-active {
  border-color: color-mix(in srgb, #0f766e 45%, var(--border));
  background: color-mix(in srgb, #0f766e 12%, var(--surface, #fff));
  color: #0f766e;
  font-weight: 600;
}
.soa-checklist-table textarea {
  width: 100%;
  min-width: 180px;
  resize: vertical;
  font: inherit;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
}
.soa-checklist-table textarea.is-invalid {
  border-color: #b45309;
  background: #fffbeb;
}
.soa-row.is-excluded td { background: color-mix(in srgb, #b45309 6%, transparent); }
.soa-row.is-dirty td { box-shadow: inset 3px 0 0 #0f766e; }
.soa-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
}
.soa-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}
.soa-badge.ok { color: #0f766e; background: #ecfdf5; }
.soa-badge.warn { color: #b45309; background: #fffbeb; }
.soa-lib-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--surface, #fff) 92%, #0f766e);
  border: 1px dashed color-mix(in srgb, #0f766e 25%, var(--border));
  border-radius: 10px;
}
.soa-lib-group h5 { margin: 0 0 0.4rem; font-size: 0.8rem; }
.soa-lib-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  max-height: 220px;
  overflow: auto;
}
.soa-lib-group li label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem;
  align-items: start;
  font-size: 0.8rem;
}
.soa-msg.is-ok { color: #0f766e; }
.soa-msg.is-warn { color: #b45309; }
.soa-msg.is-error { color: #b91c1c; }
@media (max-width: 900px) {
  .soa-lib-picker { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Encabezados de sección unificados (page-hero) + paleta de datos
   ========================================================================== */

:root {
  --chart-1: #1D4ED8;
  --chart-2: #0EA5E9;
  --chart-3: #0F766E;
  --chart-4: #7C3AED;
  --chart-5: #D97706;
  --chart-6: #BE123C;
  --chart-neutral: #94A3B8;
  --chart-grid: #E6EBF2;
  --chart-axis: #7A889C;
  --chart-track: #EDF1F7;
  --chart-ok: #047857;
  --chart-warn: #B45309;
  --chart-danger: #BE123C;
}

/* --- Encabezado de página centrado ------------------------------------- */

/* Clase duplicada a propósito: gana a `.panel-header.row-between`
   y a los headers propios de cada módulo sin recurrir a !important. */
.page-hero.page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.55rem;
  margin: 0 auto 1.85rem;
  padding: 0 0 1.35rem;
  width: 100%;
  max-width: 68rem;
  position: relative;
}

.page-hero.page-hero > * {
  max-width: 100%;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 22rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent, #1D4ED8) 38%, transparent),
    transparent
  );
}

.page-hero-eyebrow,
.page-hero .audit-page-eyebrow,
.page-hero .org-page-eyebrow,
.page-hero .admin-page-eyebrow,
.page-hero .document-workspace-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #1D4ED8) 22%, transparent);
  background: color-mix(in srgb, var(--accent, #1D4ED8) 8%, #fff);
  color: color-mix(in srgb, var(--accent, #1D4ED8) 82%, #0F172A);
  font: 700 0.68rem/1.1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-hero h2 {
  margin: 0.15rem 0 0;
  font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-wrap: balance;
}

.page-hero > div > p {
  margin: 0.15rem auto 0;
  max-width: 58ch;
  font-size: 0.9rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.page-hero.page-hero > div:first-child,
.page-hero.page-hero .panel-heading-layout > div,
.page-hero.page-hero .assets-header-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}

.page-hero .btn-group,
.page-hero .document-workspace-actions,
.page-hero > .row-between {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-hero.page-hero .panel-heading-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  gap: 0.7rem;
}

.page-hero .audit-crumb,
.page-hero > div > nav {
  justify-content: center;
}

@media (max-width: 720px) {
  .page-hero {
    margin-bottom: 1.35rem;
    padding-bottom: 1.1rem;
  }
  .page-hero .btn-group { width: 100%; }
}

/* --- Encabezados internos del Inicio ------------------------------------ */

body.shell-modern .home-section-label-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
}

body.shell-modern .home-section-label-row .hint {
  max-width: 54ch;
  margin-inline: auto;
}

body.shell-modern .home-section-eyebrow {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #1D4ED8) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #1D4ED8) 18%, transparent);
  color: color-mix(in srgb, var(--accent, #1D4ED8) 80%, #0F172A);
  font: 700 0.66rem/1.1 var(--font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body.shell-modern .home-section-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Gráficas del Inicio ------------------------------------------------ */

body.shell-modern .hm-svg-label {
  font-size: 9px;
  fill: var(--chart-axis);
  font-family: inherit;
  font-weight: 600;
}

body.shell-modern .hm-heat-bar-track,
body.shell-modern .hm-burn-stack {
  background: var(--chart-track);
}

body.shell-modern .hm-heat-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--chart-1), var(--chart-6));
  box-shadow: 0 1px 3px color-mix(in srgb, var(--chart-6) 28%, transparent);
  transition: width 0.35s ease;
}

body.shell-modern .hm-heat-bar-row strong {
  font: 700 0.78rem/1 var(--mono);
  color: var(--chart-6);
  text-align: right;
}

body.shell-modern .hm-burn-stack {
  border-radius: 10px 10px 5px 5px;
}

body.shell-modern .hm-burn-col .hm-burn-stack {
  background: linear-gradient(180deg, var(--chart-1), color-mix(in srgb, var(--chart-1) 62%, #fff));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.shell-modern .hm-burn-col.is-warn .hm-burn-stack {
  background: linear-gradient(180deg, var(--chart-5), color-mix(in srgb, var(--chart-5) 60%, #fff));
}

body.shell-modern .hm-burn-col.is-danger .hm-burn-stack {
  background: linear-gradient(180deg, var(--chart-6), color-mix(in srgb, var(--chart-6) 60%, #fff));
}

body.shell-modern .hm-burn {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: end;
  min-height: 148px;
}

body.shell-modern .hm-burn-col {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 0.3rem;
  justify-items: center;
  align-content: end;
  height: 128px;
}

body.shell-modern .hm-burn-col strong {
  font: 700 0.85rem/1 var(--mono);
  color: var(--text);
}

body.shell-modern .hm-burn-col span {
  font-size: 0.66rem;
  color: var(--chart-axis);
  text-align: center;
}

body.shell-modern .hm-trend-meta strong {
  font: 700 1.5rem/1 var(--mono);
  color: var(--chart-1);
}

body.shell-modern .hm-trend-meta .is-up { color: var(--chart-ok); }
body.shell-modern .hm-trend-meta .is-down { color: var(--chart-danger); }

body.shell-modern .home-risk-donut {
  filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.1));
}

body.shell-modern .hm-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.shell-modern .hm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.09);
}

/* --- Donut de riesgo y KPIs del Inicio ---------------------------------- */

body.shell-modern .home-donut-wrap {
  position: relative;
  width: 112px;
  height: 112px;
}

body.shell-modern .home-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  pointer-events: none;
}

body.shell-modern .home-donut-center strong {
  font: 700 1.35rem/1 var(--mono);
  color: var(--text);
}

body.shell-modern .home-donut-center span {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chart-axis);
}

body.shell-modern .home-donut-legend li {
  display: grid;
  grid-template-columns: 0.6rem 1fr auto auto;
  gap: 0.45rem;
  align-items: center;
}

body.shell-modern .home-donut-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.shell-modern .home-donut-legend strong {
  font: 700 0.82rem/1 var(--mono);
}

body.shell-modern .home-donut-legend em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--chart-axis);
  min-width: 2.4rem;
  text-align: right;
}

/* Acento propio por indicador para leer el tablero de un vistazo */
body.shell-modern.theme-slate .home-kpi-card[data-kpi="progress"] { border-left-color: var(--chart-ok) !important; }
body.shell-modern.theme-slate .home-kpi-card[data-kpi="gaps"] { border-left-color: var(--chart-5) !important; }
body.shell-modern.theme-slate .home-kpi-card[data-kpi="mejora"] { border-left-color: var(--chart-4) !important; }
body.shell-modern.theme-slate .home-kpi-card[data-kpi="soa"] { border-left-color: var(--chart-2) !important; }
body.shell-modern.theme-slate .home-kpi-card[data-kpi="due"] { border-left-color: var(--chart-6) !important; }

body.shell-modern .home-kpi-card {
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.shell-modern .home-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1) !important;
}

body.shell-modern .home-kpi-tone {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body.shell-modern .level-bar-fill {
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.08);
}

body.shell-modern .level-bar-track {
  background: var(--chart-track);
  border-radius: 999px;
}

.doc-drive-ext-badge {
  display: inline-block;
  margin: 0.25rem 0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.doc-drive-ext-badge.is-guest {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fdba74;
}
.doc-drive-ext-badge.is-auth {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}
.doc-drive-pending {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px dashed #fdba74;
  border-radius: 10px;
  background: #fffbeb;
}
.doc-drive-pending-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.doc-drive-pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.doc-drive-pending-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.55rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #fde68a;
}
.doc-drive-row.is-pending {
  background: color-mix(in srgb, #f59e0b 6%, #fff);
}


/* Home: buzón + analytics fusionados */
.home-command-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.home-mailbox-card .home-mailbox-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.home-mailbox-card .home-mailbox-kpis div {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--border, #e6eaf0);
}
.home-mailbox-card .home-mailbox-kpis strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.home-mailbox-card .home-mailbox-kpis span {
  font-size: 0.72rem;
  color: var(--text-muted, #6b778c);
}
.home-mailbox-actions { margin-bottom: 8px; }
.home-an-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.home-an-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.home-an-kpi {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, #e6eaf0);
  background: #fff;
}
.home-an-kpi em {
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.home-an-kpi span {
  font-size: 0.7rem;
  color: var(--text-muted, #6b778c);
}
.home-an-kpi.is-danger em { color: #b91c1c; }
.home-an-kpi.is-warn em { color: #b45309; }
.home-an-top {
  display: grid;
  gap: 4px;
  max-height: 280px;
  overflow: auto;
}
.home-an-risk-row {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 4px;
}
.home-an-field-chip select { min-width: 110px; }
.home-hero-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 1100px) {
  .home-command-grid-3,
  .home-an-grid { grid-template-columns: 1fr; }
  .home-an-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* —— Dictámenes de tratamiento —— */
.tx-directives { margin: 0.75rem 0 1rem; padding: 1rem; }
.tx-directives-list { display: grid; gap: 0.65rem; margin-top: 0.75rem; }
.tx-directive-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-start;
  justify-content: space-between; padding: 0.65rem 0.75rem;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  background: var(--surface-2);
}
.tx-directive-row .meta { flex: 1 1 220px; }
.tx-directive-row .actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tx-dir-preview { margin-top: 0.75rem; padding: 0.75rem; }
#tx-directive-modal:not(.hidden) { display: flex; align-items: center; justify-content: center; }


/* ══ Mapa de procesos · ISO 9001 cl. 4.4 (paso 20) ═════════════════════════
   El mapa se lee como lo espera un auditor: bandas de arriba (estratégico)
   hacia abajo (apoyo). El color de la tarjeta sale de la cobertura de 4.4.2,
   no del estado: un proceso «vigente» sin dueño ni indicador sigue siendo una
   brecha y tiene que verse como tal. */

.pmap-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  font-size: 0.88rem;
}
.pmap-suggestions[hidden] { display: none; }

.pmap-bands { display: grid; gap: 1rem; }

.pmap-band {
  border: 1px solid var(--border);
  border-left: 4px solid var(--pmap-band-color, var(--chart-neutral, #94a3b8));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 0.9rem 1rem 1.1rem;
}
.pmap-band[data-band="estrategico"] { --pmap-band-color: var(--chart-4, #7c3aed); }
.pmap-band[data-band="misional"] { --pmap-band-color: var(--accent); }
.pmap-band[data-band="apoyo"] { --pmap-band-color: var(--chart-3, #0f766e); }
.pmap-band[data-band="sin-clasificar"] { --pmap-band-color: var(--warning); }
.pmap-band-flow { --pmap-band-color: var(--chart-neutral, #94a3b8); }

.pmap-band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.pmap-band-head h3 { font-size: 0.95rem; letter-spacing: 0.01em; }
.pmap-band-head .hint { margin: 0; }

.pmap-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.75rem;
}

.pmap-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.8rem 0.7rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--pmap-tone, var(--border));
  border-radius: 10px;
  background: var(--surface-2);
  min-width: 0;
}
.pmap-card[data-tone="ok"] { --pmap-tone: var(--success); }
.pmap-card[data-tone="warn"] { --pmap-tone: var(--warning); }
.pmap-card[data-tone="bad"] { --pmap-tone: var(--danger); }
.pmap-card h4 {
  font-size: 0.94rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.pmap-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pmap-ref {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text-muted);
}
.pmap-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
  white-space: nowrap;
}
.pmap-status[data-status="active"] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
}
.pmap-status[data-status="under_review"] {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
.pmap-status[data-status="retired"] { opacity: 0.7; text-decoration: line-through; }

.pmap-owner { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.pmap-owner em { color: var(--warning); font-style: normal; font-weight: 600; }

.pmap-meter {
  height: 6px;
  border-radius: 999px;
  background: var(--chart-track, #edf1f7);
  overflow: hidden;
}
.pmap-meter > span {
  display: block;
  height: 100%;
  background: var(--pmap-tone, var(--accent));
  transition: width 0.25s ease;
}
.pmap-meter-label { font-size: 0.74rem; color: var(--text-muted); margin: 0; }

.pmap-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pmap-chip {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}
button.pmap-chip { cursor: pointer; }
button.pmap-chip:hover { border-color: var(--accent); color: var(--accent); }
.pmap-chip-alert {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}
.pmap-chip-gap {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}
.pmap-chip-ok {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.pmap-card-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

.pmap-flow { list-style: none; display: grid; gap: 0.35rem; }
.pmap-flow li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: var(--surface-2);
}
.pmap-arrow { color: var(--accent); font-weight: 700; }

.pmap-note { margin: 0 0 0.75rem; }
.pmap-band-flow .pmap-note { margin: 0.5rem 0 0; }
.pmap-empty { padding: 1.25rem; display: grid; gap: 0.6rem; justify-items: start; }
.pmap-empty p { font-size: 0.9rem; max-width: 70ch; }

/* Matriz procesos × requisitos: es la vista que se audita, así que el hueco
   tiene que leerse de un vistazo (celda tenue) sin parecer un error.
   Va con `!important` porque los temas pintan `.data-table td` con
   `background/color: ... !important`; sin esto la matriz queda toda gris y el
   requisito cubierto no se distingue del faltante. */
.pmap-gap-table th { white-space: nowrap; }
.pmap-gap-table .pmap-gap-cell {
  text-align: center;
  font-weight: 700;
  color: var(--success) !important;
}
.pmap-gap-table .pmap-gap-cell[data-ok="0"] {
  color: color-mix(in srgb, var(--warning) 70%, var(--text-muted)) !important;
  background: color-mix(in srgb, var(--warning) 10%, #fff) !important;
}

.pmap-field-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.pmap-ind-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.pmap-ind-row input { min-width: 0; }
#pmap-indicators + .btn { margin-top: 0.25rem; }
/* El shell moderno fuerza `height: 40px !important` sobre todo `select`, así que
   un `<select multiple>` queda de una fila y no se ve qué está seleccionado. */
#pmap-editor select[multiple],
body.shell-modern #pmap-editor select[multiple] {
  min-height: 7rem !important;
  height: auto !important;
  padding: 0.3rem !important;
}

@media (max-width: 900px) {
  .pmap-ind-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pmap-ind-row [data-ind-del] { grid-column: 1 / -1; justify-self: end; }
  .pmap-band-grid { grid-template-columns: 1fr; }
}

/* ── Diagrama de flujo de procesos (vista «Diagrama») ─────────────────────
   El SVG se dibuja a tamaño natural y scrollea dentro de su caja: escalarlo al
   ancho dejaría el texto ilegible en un mapa con muchas columnas. */

.pmap-flow-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
}
.pmap-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.pmap-legend-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--pmap-band-color, var(--chart-neutral, #94a3b8));
}
.pmap-legend-item[data-band="estrategico"] { --pmap-band-color: var(--chart-4, #7c3aed); }
.pmap-legend-item[data-band="misional"] { --pmap-band-color: var(--accent); }
.pmap-legend-item[data-band="apoyo"] { --pmap-band-color: var(--chart-3, #0f766e); }
.pmap-legend-item[data-band="sin-clasificar"] { --pmap-band-color: var(--warning); }

.pmap-flow-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 0.5rem;
}
.pmap-flow-svg { display: block; }

.pmap-lane-bg { fill: var(--surface-2); stroke: var(--border); }
.pmap-lane .pmap-lane-edge { fill: var(--chart-neutral, #94a3b8); }
.pmap-lane[data-band="estrategico"] .pmap-lane-edge { fill: var(--chart-4, #7c3aed); }
.pmap-lane[data-band="misional"] .pmap-lane-edge { fill: var(--accent); }
.pmap-lane[data-band="apoyo"] .pmap-lane-edge { fill: var(--chart-3, #0f766e); }
.pmap-lane[data-band="sin-clasificar"] .pmap-lane-edge { fill: var(--warning); }
.pmap-lane-label {
  fill: var(--text);
  font: 700 13px var(--font);
}
.pmap-lane-count {
  fill: var(--text-muted);
  font: 400 11px var(--font);
}

.pmap-node { cursor: pointer; }
.pmap-node-box {
  fill: var(--surface);
  stroke: var(--border);
  transition: stroke 0.15s ease, filter 0.15s ease;
}
.pmap-node:hover .pmap-node-box,
.pmap-node:focus-visible .pmap-node-box {
  stroke: var(--accent);
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.14));
}
.pmap-node:focus { outline: none; }
.pmap-node[data-tone="ok"] .pmap-node-tone { fill: var(--success); }
.pmap-node[data-tone="warn"] .pmap-node-tone { fill: var(--warning); }
.pmap-node[data-tone="bad"] .pmap-node-tone { fill: var(--danger); }
.pmap-node-ref { fill: var(--text-muted); font: 500 11px var(--mono); }
.pmap-node-name { fill: var(--text); font: 600 13px var(--font); }
.pmap-node-meta { fill: var(--text-muted); font: 400 11px var(--font); }
.pmap-node-risk { fill: var(--danger); font: 700 11px var(--font); }

.pmap-edge {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 45%, var(--chart-neutral, #94a3b8));
  stroke-width: 2;
}
.pmap-arrowhead { fill: color-mix(in srgb, var(--accent) 45%, var(--chart-neutral, #94a3b8)); }

/* ══ Control documental · ISO 27001 / ISO 9001 cl. 7.5 (paso 21) ══════════ */

.dctl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.9rem;
}

.dctl-block { padding: 0.9rem 1rem 1rem; }
.dctl-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.dctl-block-head h3 { font-size: 0.95rem; }
.dctl-clause {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--mono);
  white-space: nowrap;
}

.dctl-list { list-style: none; display: grid; gap: 0.45rem; }
.dctl-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.85rem;
}
.dctl-list li .hint { margin: 0; font-size: 0.78rem; }
.dctl-item-name { font-weight: 600; }
.dctl-ok { color: var(--success); font-weight: 600; }

.dctl-section { margin-bottom: 1.1rem; }
.dctl-section h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.dctl-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* Firma en lote de la cola de firmas. La barra y el panel se pintan y se borran con
   el render (no llevan `hidden`), así que acá el `display` es libre. */
.dctl-check-col { width: 2.2rem; text-align: center; }
.dctl-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.dctl-bulk-count { font-weight: 600; font-size: 0.85rem; }
/* Paginador de la cola de firmas. Dice «de N documentos» y no «de N mostrados»: el
   lote alcanza a todos los seleccionados, no a los que se ven. */
.dctl-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.4rem 0.2rem 0.1rem;
}
.dctl-pager .hint { font-variant-numeric: tabular-nums; }
.dctl-bulk-panel {
  padding: 0.9rem 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, #0f766e 25%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, #0f766e 5%, var(--surface));
}
.dctl-bulk-panel[data-tone='error'] {
  border-color: color-mix(in srgb, #b91c1c 35%, var(--border));
  background: color-mix(in srgb, #b91c1c 6%, var(--surface));
}
.dctl-bulk-panel .field { display: grid; gap: 0.25rem; margin: 0.6rem 0; }
.dctl-bulk-panel textarea { width: 100%; }
.dctl-bulk-figure { margin: 0 0 0.5rem; font-size: 0.9rem; }
.dctl-bulk-figure strong { font-size: 1.35rem; }
.dctl-bulk-reasons {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
  font-size: 0.83rem;
  color: var(--text-muted);
}
.dctl-bulk-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: flex-start;
}
.dctl-bulk-extra .field { min-width: 12rem; }
.dctl-bulk-force {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  max-width: 44ch;
  font-size: 0.85rem;
}
.dctl-bulk-force small { display: block; color: var(--text-muted); font-size: 0.78rem; }

.dctl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 0.9rem;
}
.dctl-toolbar .hint { margin: 0; max-width: 62ch; }
.dctl-toolbar .field { min-width: 260px; }

.dctl-dist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.9rem;
}
.dctl-dist .card { padding: 0.9rem 1rem 1rem; }
.dctl-dist textarea { width: 100%; }

.dctl-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}
.dctl-cols h4 { font-size: 0.85rem; margin-bottom: 0.4rem; }

/* Historia del documento: una línea de tiempo, no una tabla — lo que importa
   es el orden de los hechos y quién los firmó. */
.dctl-timeline { list-style: none; display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.dctl-timeline li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  padding: 0.45rem 0.6rem;
  border-left: 3px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
}
.dctl-timeline li[data-kind="approval"] { border-left-color: var(--success); }
.dctl-timeline li[data-kind="review"] { border-left-color: var(--accent); }
.dctl-timeline li[data-kind="version"] { border-left-color: var(--chart-4, #7c3aed); }
.dctl-timeline li[data-kind="obsolete"],
.dctl-timeline li[data-kind="disposal"] { border-left-color: var(--warning); }
.dctl-timeline li[data-kind="access_denied"] { border-left-color: var(--danger); }
.dctl-timeline li[data-kind="acknowledgement"] { border-left-color: var(--chart-3, #0f766e); }
.dctl-time { font-family: var(--mono); font-size: 0.76rem; color: var(--text-muted); }
.dctl-event { font-weight: 600; }
.dctl-timeline li .hint { grid-column: 2; margin: 0; font-size: 0.78rem; }

@media (max-width: 720px) {
  .dctl-timeline li { grid-template-columns: 1fr; }
  .dctl-timeline li .hint { grid-column: 1; }
}

/* ══ Sidebar: grupos plegables y pasos numerados ═══════════════════════════
   El menú tenía 20 entradas planas; el auditor necesita ver dónde está parado,
   no la plataforma entera. Los grupos se pliegan (el activo siempre abierto) y
   los cinco pasos de riesgo van numerados porque son una secuencia, no un menú. */

button.nav-group-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.25rem 0.35rem;
  border-radius: 6px;
}
button.nav-group-label:hover { color: var(--accent); }
button.nav-group-label:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.nav-group-label::after {
  content: "";
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.18s ease;
  opacity: 0.65;
}
button.nav-group-label[aria-expanded="false"]::after {
  transform: rotate(-45deg) translate(-1px, 1px);
}

.nav-group-hint {
  font-size: 0.85em;
  letter-spacing: 0.02em;
  opacity: 0.65;
  text-transform: none;
}

.nav-group.is-collapsed .nav-group-btns { display: none; }

/* El número del paso: la secuencia de riesgo se lee de un vistazo. */
.nav-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-size: 0.62rem;
  font-family: var(--mono);
  line-height: 1;
  opacity: 0.85;
}
.nav-btn.active .nav-step-no {
  border-color: currentColor;
  opacity: 1;
}
/* Con el sidebar colapsado solo queda el ícono: el número sobra y desalinea. */
body.sidebar-collapsed .nav-step-no,
body.sidebar-collapsed .nav-group-hint,
body.sidebar-collapsed button.nav-group-label::after { display: none; }

/* El shell del sidebar fuerza `display: block !important` en la etiqueta de grupo
   (regla del tema, más específica): sin flex, el chevron del plegado no se puede
   empujar a la derecha. Se reinstala flex con la misma especificidad. */
#app-sidebar button.nav-group-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  width: 100% !important;
  background: none !important;
  border: 0 !important;
  cursor: pointer;
  text-align: left;
}
#app-sidebar button.nav-group-label:hover { color: var(--dom, var(--accent)) !important; }
#app-sidebar .nav-group.is-collapsed .nav-group-btns { display: none !important; }

/* Registro maestro documental: la tabla del muestreo. El estado de control se
   lee por pastilla y color, y las firmas por dos marcas R/A, para poder recorrer
   300 filas sin abrir cada ficha. */
.dctl-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dctl-register th { white-space: nowrap; }
.dctl-state {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.dctl-state[data-state="vigente"] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, #fff);
}
.dctl-state[data-state="programado"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, #fff);
}
.dctl-state[data-state="revisado"],
.dctl-state[data-state="borrador"] {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, #fff);
}
.dctl-state[data-state="obsoleto"] {
  color: var(--text-muted);
  background: var(--surface-2);
}
.dctl-signs { font-family: var(--mono); font-weight: 700; letter-spacing: 0.12em; }
.dctl-signs .dctl-off { color: var(--border); font-weight: 400; }

/* Filas de una línea: el registro se recorre de arriba abajo, y un nombre que
   ocupa cuatro renglones convierte 20 documentos en una pantalla de scroll. */
.dctl-legend { margin: 0 0 0.5rem; }
.dctl-register td { vertical-align: middle; }
.dctl-code { white-space: nowrap; }
.dctl-code small { display: block; font-size: 0.68rem; color: var(--text-muted); font-family: var(--mono); }
.dctl-name {
  max-width: 30rem;
  min-width: 16rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dctl-conf {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 8%, #fff);
}
.dctl-conf[data-level="restricted"],
.dctl-conf[data-level="confidential"] {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, #fff);
}
.dctl-conf[data-level="public"] {
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, #fff);
}
.dctl-register .dctl-actions { white-space: nowrap; }

/* Densidad del registro: el tema pone 1rem de padding vertical en `.data-table td`,
   que en una tabla de muestreo son 6 filas por pantalla en vez de 12. */
/* La compactación tiene que ganarle a `.shell-modern .data-table td` (0,2,1 + !important),
   así que se califica con `.shell-modern`; sin eso el selector pierde y no pasa nada. */
.shell-modern .dctl-register td,
.shell-modern .dctl-register th {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  line-height: 1.3;
}
.dctl-register .dctl-code { width: 1%; }
.dctl-register .dctl-name { max-width: 20rem; min-width: 12rem; }

/* Las cabeceras pueden envolver: con `nowrap`, rótulos como «Estado de control» o
   «Próxima revisión» fijaban el ancho mínimo de la tabla y el registro no entraba
   en el panel. */
.shell-modern .dctl-register th { white-space: normal; }

/* Cuerpo un punto más chico que el resto de las tablas: son nueve columnas de dato
   real y a 0.95rem el ancho mínimo no entraba en el panel. Va en `td`/`th` porque
   `.data-table td` fija su propio `font-size` y la herencia desde `table` no llega. */
.shell-modern .dctl-register td { font-size: 0.85rem; white-space: nowrap; }
.shell-modern .dctl-register th { font-size: 0.72rem; }

/* Solo el nombre del documento envuelve. Al entrar la tabla en el panel, las fechas
   se partían en dos líneas («2027-08-» / «10») y la fila volvía a crecer. */
.shell-modern .dctl-register td.dctl-name { white-space: normal; }
.dctl-register .dctl-code code { font-size: 0.7rem; }

/* Los botones de acción del registro no envuelven: si se apilan, la fila crece al
   doble y la tabla vuelve a las 6 filas por pantalla que la densidad venía a corregir.
   El `min-height: 36px !important` de `.shell-modern .btn-compact` es además el que
   fija el piso de altura de la fila, por eso va con `!important` y `min-height: 0`.
   En el registro la celda vuelve a ser `table-cell`: como flex container no estiraba
   con la fila y su franja de zebra quedaba corrida respecto del resto de las columnas. */
.dctl-register td.dctl-actions { display: table-cell; }
.dctl-register td.dctl-actions .btn + .btn { margin-left: 0.3rem; }
body.shell-modern .dctl-register .dctl-actions .btn {
  min-height: 0 !important;
  padding: 0.2rem 0.5rem !important;
  font-size: 0.75rem !important;
}

/* ── Mapa general de la organización (inicio) ──────────────
   Tres capas: quién es la organización, cómo va la cadena del sistema y cómo se
   reparte el territorio. El cero es el protagonista, así que los tonos vacíos
   son deliberadamente visibles en vez de un gris que se lea como «sin novedad». */
.home-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Las tarjetas se miden por su contenido: estiradas a la altura de la fila, la
     de identidad quedaba con medio cuerpo vacío al lado del mapa de áreas. */
  align-items: start;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

@media (min-width: 1100px) {
  .home-map { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .home-chain-card { grid-column: 1 / -1; }
}

/* Identidad */
.home-org-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
}
.home-org-name { margin: 0.15rem 0 0.4rem; font-size: 1.25rem; line-height: 1.2; }
.home-org-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.home-org-chip {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--surface-2);
}
.home-org-facts { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0; }
.home-org-facts div { text-align: right; }
.home-org-facts dt { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.home-org-facts dd { margin: 0; font: 600 1.1rem/1.1 var(--mono); }
.home-org-scope {
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
  font-size: 0.85rem;
}
.home-org-scope span {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.home-org-meta { margin-top: 0.5rem; }

/* Cadena del sistema */
.home-chain-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
.home-chain-item { display: flex; align-items: center; flex: 1 1 0; min-width: 8.5rem; }
.home-chain-link {
  flex: 0 0 1.1rem;
  height: 2px;
  background: var(--border);
}
/* El corte es la única marca que necesita el diagrama: un conector partido dice
   «acá se frena» sin depender de un color ni de una leyenda. */
.home-chain-link.is-cut {
  background: repeating-linear-gradient(90deg, var(--danger) 0 4px, transparent 4px 8px);
  height: 3px;
}
.home-chain-node {
  flex: 1 1 auto;
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.home-chain-node:hover { transform: translateY(-2px); border-color: var(--accent); }
/* El eslabón y su atajo al lote van apilados: en fila el atajo competiría con el
   número, que es lo que hay que leer primero. */
.home-chain-stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.home-chain-bulk {
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.22rem 0.5rem;
  cursor: pointer;
  text-align: center;
}
.home-chain-bulk:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-style: solid;
}
.home-chain-value { font: 700 1.5rem/1 var(--mono); }
.home-chain-label { font-size: 0.82rem; font-weight: 600; }
.home-chain-detail { font-size: 0.7rem; color: var(--text-muted); line-height: 1.25; }
.home-chain-bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  overflow: hidden;
}
.home-chain-bar i { display: block; height: 100%; background: currentColor; }

.home-chain-node[data-tone="ok"] { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.home-chain-node[data-tone="warn"] { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.home-chain-node[data-tone="empty"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}
.home-chain-node .home-chain-value,
.home-chain-node .home-chain-label { color: var(--text); }
.home-chain-node[data-tone="empty"] .home-chain-value { color: var(--danger); }

.home-chain-break {
  margin-top: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
  font-size: 0.82rem;
}
.home-chain-break[data-tone="ok"] {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}
.home-chain-break[data-tone="info"] {
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
  background: color-mix(in srgb, var(--warning) 6%, var(--surface));
}

/* Territorio por áreas */
.home-area-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.home-area-cell {
  grid-column: span var(--span, 1);
  display: grid;
  gap: 0.2rem;
  align-content: start;
  padding: 0.5rem 0.6rem;
  min-height: 5.2rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.home-area-cell:hover { border-color: var(--accent); transform: translateY(-1px); }
/* Un área sin nada analizado no es un área «en cero»: es una que todavía no se
   tocó. Va con borde punteado y nada más — teñir de rojo los 22 bloques cuando
   todavía no empezó el análisis convierte el mapa en una pared de alarmas. */
.home-area-cell[data-analyzed="no"] { border-style: dashed; }
.home-area-cell[data-unassigned="1"] { opacity: 0.75; }
.home-area-name { font-size: 0.82rem; font-weight: 600; line-height: 1.2; }
.home-area-nums { font-size: 0.72rem; color: var(--text-muted); }
.home-area-nums strong { font: 600 0.95rem/1 var(--mono); color: var(--text); }
.home-area-nums em { display: block; font-style: normal; }
.home-area-progress {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  overflow: hidden;
}
.home-area-progress i { display: block; height: 100%; background: var(--success); }
.home-area-pct { font-size: 0.68rem; color: var(--text-muted); }
.home-area-legend { margin-top: 0.55rem; }

@media (max-width: 720px) {
  .home-area-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-area-cell { grid-column: span 1; }
  .home-chain-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .home-chain-item { min-width: 0; }
  .home-chain-link { display: none; }
}

/* Avisos accionables del mapa: el botón va debajo del texto, no al lado, para
   que no compita con el conteo de la cadena. */
.home-chain-break p { margin: 0; }
.home-chain-break .btn { margin-top: 0.5rem; }
.home-chain-how { display: inline-block; margin-top: 0.3rem; color: var(--text-muted); }
.home-chain-break[data-tone="ok"] .home-chain-how,
.home-chain-break[data-tone="info"] .home-chain-how { color: inherit; opacity: 0.85; }

/* ── Criterios de consecuencia (ISO 27005 5.2) ─────────────
   Es la única pantalla donde se anclan las escalas, así que la tabla se edita
   en línea: abrir un modal por celda para escribir «pérdida menor a 5.000 USD»
   sería 20 modales para completar una matriz de 5×4. */
.risk-anchors-card { margin-top: 1rem; }
.risk-anchors-state {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.risk-anchors-state[data-tone="ok"] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}
.risk-anchors-state[data-tone="warn"] {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.risk-anchors-table { table-layout: fixed; width: 100%; min-width: 46rem; }
/* El tema pone `white-space: nowrap` en todo `th`, así que la descripción del
   nivel salía en una línea y se montaba sobre la columna de al lado. */
.risk-anchors-table th[scope="row"] {
  width: 11rem;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}
.risk-anchors-table th[scope="row"] small {
  display: block;
  margin-top: 0.15rem;
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}
.risk-anchor-level { font-weight: 600; }
.risk-anchors-table textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.82rem;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}
.risk-anchors-table textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* Una celda vacía no es un error todavía, pero tiene que verse como pendiente:
   la fila entera sin ninguna dimensión es lo que deja los criterios sin anclar. */
.risk-anchors-table textarea:placeholder-shown {
  background: color-mix(in srgb, var(--warning) 4%, var(--surface));
}
.risk-anchors-meta { margin-top: 0.9rem; }
#risk-anchors-msg[data-tone="ok"] { color: var(--success); }

/* ── FODA (4.1–4.2): registro, no documento ────────────────
   Cuatro cuadrantes en grilla; el orden es interno (F, D) y después externo (O, A),
   que es como se lee la cláusula: primero lo que la organización controla. */
.foda-card { margin-top: 1rem; }
.foda-state {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.foda-state[data-tone="ok"] { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.foda-state[data-tone="warn"] { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.foda-state[data-tone="muted"] { background: var(--surface-2, var(--surface)); color: var(--text-muted); }
.foda-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.8rem;
  margin: 0.9rem 0;
}
.foda-quadrant {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.foda-quadrant header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.foda-rows { display: grid; gap: 0.55rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.foda-row {
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2, var(--surface));
}
.foda-row textarea,
.foda-row input { width: 100%; font: inherit; }
.foda-row-foot { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.foda-row-foot input { flex: 1 1 8rem; min-width: 0; }
/* ⚠ `body.shell-modern` fuerza `height: 40px !important` sobre todo `select`, así que
   ponerlo a la altura de los inputs de la fila exige el mismo `!important` — y el
   padding va con él, o el texto queda recortado contra el borde. */
.foda-row-foot select {
  flex: 0 1 10rem;
  min-width: 0;
  height: 32px !important;
  padding: 0.2rem 0.4rem !important;
  font-size: 0.78rem;
}
.foda-row-source { font-size: 0.7rem; }
.foda-pestel { margin: 0.4rem 0 0; }
/* El estado del emisor vive dentro del `.btn-group`, que es flex: sin la base de 100 %
   la línea —«el documento emitido quedó atrás…»— estira el grupo y empuja los botones. */
.emisor-estado {
  flex: 1 1 100%;
  margin-top: 0.25rem;
}
/* El eje que propuso el modelo, al lado del cuadrante: una propuesta con eje y una sin
   él mandan a hacer cosas distintas. */
.foda-pestel-chip {
  font-size: 0.68rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
}
.foda-meta { margin-top: 0.6rem; }
#foda-msg[data-tone="ok"] { color: var(--success); }

/* Propuesta del modelo local: se muestra aparte del formulario a propósito. Una
   sugerencia que apareciera escrita en la celda sería indistinguible de un criterio
   que la organización definió, y esa diferencia es todo el punto. */
.risk-anchors-ai {
  margin: 0.9rem 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-2, var(--surface));
}
.risk-anchors-ai[hidden] { display: none !important; }
.risk-anchor-sug-bar { align-items: flex-start; gap: 0.8rem; }
.risk-anchor-sug-warns {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--warning);
  font-size: 0.78rem;
}
.risk-anchor-sug-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.6rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}
.risk-anchor-sug {
  display: grid;
  gap: 0.25rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.risk-anchor-sug .btn { justify-self: start; margin-top: 0.2rem; }
.risk-anchor-sug-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.risk-anchor-sug-text { margin: 0; font-size: 0.86rem; }
/* Lo que el modelo no puede sostener con lo que la organización declaró se marca; no
   se filtra, porque una propuesta escondida no se puede revisar. */
.risk-anchor-sug.is-weak { border-color: var(--warning); }
.risk-anchor-sug-flag {
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
  font-size: 0.66rem;
}
.risk-anchor-sug.is-used { opacity: 0.65; }

/* ── Organigrama ───────────────────────────────────────────
   Árbol con listas anidadas y conectores en CSS: no hay geometría que
   recalcular, así que sobrevive a nombres largos y a cualquier profundidad. */
.home-orgchart-block { margin-bottom: 1rem; }
.home-orgchart-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: 0.6rem 0 0.2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.home-orgchart-stats strong { font: 600 1rem/1 var(--mono); color: var(--text); }
.home-orgchart-stats [data-tone="warn"] strong { color: var(--warning); }
.home-orgchart-stats [data-tone="ok"] strong { color: var(--success); }

/* Los botones de edición se muestran por estado del contenedor, no con la
   propiedad `hidden`: la pasada de RBAC reescribe `hidden` en todo
   `[data-requires-permission]` y revertía cualquier ocultamiento nuestro. */
#home-orgchart[data-editing="0"] .oc-only-editing { display: none; }

.oc-tree { overflow-x: auto; padding: 0.8rem 0.2rem 0.4rem; }
.oc-level {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* La raíz envuelve: hasta que se arma la jerarquía puede haber una unidad por
   área del inventario, y veintiuna en una sola fila no se leen. Los niveles
   internos no envuelven, para no romper los conectores. */
.oc-tree > .oc-level { flex-wrap: wrap; row-gap: 1.1rem; }
/* Los niveles hijos se separan del padre y dejan lugar al conector vertical. */
.oc-branch > .oc-level { margin-top: 1.35rem; }
.oc-branch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.35rem;
}
/* Bajada desde el nodo hacia sus hijos. */
.oc-branch:has(> .oc-level)::after {
  content: '';
  position: absolute;
  top: calc(100% - var(--oc-sub, 0px));
  left: 50%;
  width: 2px;
  height: 0;
}
.oc-branch > .oc-level::before {
  content: '';
  position: absolute;
  top: -1.35rem;
  left: 50%;
  width: 2px;
  height: 1.35rem;
  background: var(--border);
  transform: translateX(-1px);
}
.oc-branch > .oc-level { position: relative; }
/* Subida de cada hijo hacia la barra horizontal del nivel. */
.oc-level > .oc-branch::before {
  content: '';
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 2px;
  height: 0.7rem;
  background: var(--border);
  transform: translateX(-1px);
}
/* Barra horizontal que une a los hermanos; los extremos se recortan para que no
   sobresalga más allá del primero y el último. */
.oc-level > .oc-branch:not(:only-child)::after {
  content: '';
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
}
.oc-level > .oc-branch:first-child:not(:only-child)::after { left: 50%; }
.oc-level > .oc-branch:last-child:not(:only-child)::after { right: 50%; }
.oc-tree > .oc-level > .oc-branch::before,
.oc-tree > .oc-level > .oc-branch::after { display: none; }

.oc-node {
  display: grid;
  gap: 0.15rem;
  width: 11.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
}
.oc-node[data-analyzed="no"] { border-style: dashed; }
.oc-node-name { font-size: 0.85rem; font-weight: 600; line-height: 1.2; }
.oc-node-kind {
  justify-self: start;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.65rem;
  color: var(--text-muted);
}
.oc-node-manager { font-size: 0.72rem; color: var(--accent); }
.oc-node-nums { font-size: 0.7rem; color: var(--text-muted); }
.oc-node-nums b { font-family: var(--mono); color: var(--text); }
.oc-node-bar {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  overflow: hidden;
}
.oc-node-bar i { display: block; height: 100%; background: var(--success); }

.oc-editor-table select[multiple] { min-width: 9rem; }
.oc-editor-table input[type="text"],
.oc-editor-table select {
  width: 100%;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.8rem;
  background: var(--surface);
  color: var(--text);
}
#home-orgchart-msg[data-tone="ok"] { color: var(--success); }

/* ── Animaciones latentes ──────────────────────────────────
   Movimiento de fondo, no decoración: entrada escalonada de las tarjetas y un
   latido en el eslabón donde se corta la cadena, que es lo único que se quiere
   que el ojo encuentre solo. Todo se apaga con `prefers-reduced-motion`. */
@keyframes gamr-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes gamr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 32%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--danger) 0%, transparent); }
}

@media (prefers-reduced-motion: no-preference) {
  .home-map > .card,
  .home-orgchart-block > .card {
    animation: gamr-rise 0.42s cubic-bezier(0.22, 0.68, 0.35, 1) both;
  }
  .home-map > .card:nth-child(2) { animation-delay: 0.06s; }
  .home-map > .card:nth-child(3) { animation-delay: 0.12s; }
  .home-orgchart-block > .card { animation-delay: 0.18s; }

  /* El nodo donde se corta la cadena late despacio. Es el único elemento animado
     de forma continua: si latieran varios, ninguno llamaría la atención. */
  .home-chain-item.is-break .home-chain-node[data-tone="empty"] {
    animation: gamr-pulse 2.6s ease-in-out infinite;
  }
  .home-chain-node,
  .home-area-cell,
  .oc-node { transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; }
  .oc-node:hover { transform: translateY(-2px); border-color: var(--accent); }
}

@media (prefers-reduced-motion: no-preference) {
  .home-map > .card { animation-delay: 0.08s; }
  .home-map > .card:nth-of-type(2) { animation-delay: 0.14s; }
  .home-map > .card:nth-of-type(3) { animation-delay: 0.2s; }
  .home-orgchart-block > .card { animation-delay: 0.26s; }
}

/* ── Asistente CISO flotante ───────────────────────────────
   Vive fuera del flujo del panel: se abre sobre cualquier módulo porque la
   pregunta «¿qué sigue?» aparece en el medio de otra tarea. */
.ciso-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgb(15 23 42 / 22%);
}
.ciso-fab:hover { background: var(--accent-hover); }
.ciso-fab.is-open { background: var(--text); }
.ciso-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--warning);
  color: #fff;
  font: 700 0.7rem/1.25rem var(--mono);
  text-align: center;
}
.ciso-fab-badge[data-tone="critico"] { background: var(--danger); }

.ciso-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem;
  z-index: 900;
  display: flex;
  flex-direction: column;
  width: min(26rem, calc(100vw - 2.5rem));
  max-height: min(38rem, calc(100vh - 8rem));
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgb(15 23 42 / 22%);
  overflow: hidden;
}
/* El panel arranca cerrado y se cierra con Escape, con la ✕ y con un clic
   afuera: las tres cosas se hacen poniendo el atributo `hidden` desde JS. El
   `display: flex` de arriba le gana al `display: none` de la hoja del navegador
   (autor > user-agent), así que sin esta regla el asistente quedaba abierto
   desde que cargaba la página y ninguna de las tres salidas lo cerraba. */
.ciso-panel[hidden] { display: none !important; }
.ciso-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.ciso-eyebrow {
  display: block;
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ciso-title { display: block; margin-top: 0.25rem; font-size: 0.95rem; line-height: 1.25; }
.ciso-title[data-tone="atencion"] { color: var(--warning); }
.ciso-title[data-tone="critico"] { color: var(--danger); }
.ciso-title[data-tone="ok"] { color: var(--success); }

.ciso-body { overflow-y: auto; padding: 0.75rem 1rem 1rem; }
.ciso-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.ciso-section-head h4 { font-size: 0.8rem; }
.ciso-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.ciso-link:hover { text-decoration: underline; }
.ciso-model { font: 0.68rem/1 var(--mono); color: var(--text-muted); }

.ciso-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.45rem; }
.ciso-item {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
}
/* El color del borde izquierdo es la prioridad. Solo lo bloqueante va en rojo:
   si todo grita, nada se lee. */
.ciso-item[data-blocking="1"] { border-left-color: var(--danger); }
.ciso-item[data-priority="2"] { border-left-color: var(--warning); }
.ciso-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.2rem; }
.ciso-chip {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.62rem;
  color: var(--text-muted);
}
.ciso-prio { font: 600 0.62rem/1 var(--mono); text-transform: uppercase; color: var(--text-muted); }
.ciso-item[data-blocking="1"] .ciso-prio { color: var(--danger); }
.ciso-due { font: 0.62rem/1 var(--mono); color: var(--warning); }
.ciso-item-title { margin: 0; font-size: 0.83rem; font-weight: 600; line-height: 1.25; }
.ciso-item-detail { margin: 0.2rem 0 0; font-size: 0.74rem; color: var(--text-muted); line-height: 1.35; }
.ciso-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.ciso-why { font: 0.65rem/1.2 var(--mono); color: var(--text-muted); }
.ciso-empty { padding: 0.6rem; font-size: 0.78rem; color: var(--text-muted); text-align: center; }

.ciso-thread { display: grid; gap: 0.45rem; margin-bottom: 0.5rem; }
.ciso-msg p {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 9px;
  font-size: 0.8rem;
  line-height: 1.4;
}
.ciso-msg[data-role="user"] p { background: var(--accent); color: #fff; margin-left: 2rem; }
.ciso-msg[data-role="assistant"] p,
.ciso-msg[data-role="pending"] p { background: var(--surface-2); border: 1px solid var(--border); }
.ciso-msg[data-role="pending"] p { color: var(--text-muted); font-style: italic; }
.ciso-msg-who { font: 600 0.6rem/1 var(--mono); text-transform: uppercase; color: var(--text-muted); }
.ciso-offline {
  padding: 0.6rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--warning) 6%, var(--surface));
  font-size: 0.78rem;
}
.ciso-suggest { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.ciso-suggest-chip {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: 0.72rem;
  color: var(--text-muted);
  cursor: pointer;
}
.ciso-suggest-chip:hover { border-color: var(--accent); color: var(--accent); }
.ciso-ask { display: flex; gap: 0.4rem; }
.ciso-ask input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.8rem;
  background: var(--surface);
  color: var(--text);
}
.ciso-ask input:focus { outline: none; border-color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .ciso-panel { animation: gamr-rise 0.2s ease both; }
  .ciso-fab { transition: background 0.15s ease, transform 0.15s ease; }
  .ciso-fab:hover { transform: translateY(-2px); }
}
@media (max-width: 640px) {
  .ciso-panel { right: 0.6rem; left: 0.6rem; bottom: 4.75rem; width: auto; }
}

/* ── Estado de cumplimiento ────────────────────────────────
   Componente principal del panel de inicio. La jerarquía es: un número grande que
   se anima al entrar, el pronóstico al lado, los tres ejes que lo componen debajo
   y al final lo que hoy frena la aprobación.

   ⚠ El override de `[hidden]` no es opcional: acá se declara `display: grid`, y un
   `display` de autor le gana al `display: none` del user-agent, así que el módulo
   pone `hidden` desde JS y la sección se seguiría viendo. Es el mismo parche que
   `.ciso-panel[hidden]` y que media docena de componentes más de este archivo. */
.compliance-state {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.compliance-state[hidden] { display: none !important; }

/* El encabezado hereda el centrado del tema (`body.shell-modern`), igual que el
   resto de las secciones del panel; el chip de la auditoría se centra con él. */
.cs-head-audit { display: flex; gap: 0.5rem; justify-content: center; }
.cs-audit-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.cs-audit-chip[data-tone="muted"] { cursor: default; color: var(--text-muted); }
.cs-audit-chip strong { font: 600 0.78rem/1 var(--mono); letter-spacing: 0.04em; }
.cs-audit-chip span { font-size: 0.68rem; color: var(--text-muted); }
.cs-audit-chip:hover { border-color: var(--accent); }

.cs-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
  grid-template-areas:
    'gauge forecast'
    'metrics metrics'
    'blockers blockers';
  gap: 0.85rem;
}
.cs-gauge-card { grid-area: gauge; }
.cs-forecast-card { grid-area: forecast; }
.cs-metrics { grid-area: metrics; }
.cs-blockers-card { grid-area: blockers; }

/* El anillo lleva el tono del pronóstico, no del porcentaje: un 90 % de
   cumplimiento con una no conformidad mayor abierta no es verde. */
.cs-gauge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.2rem 1rem;
  border-top: 3px solid var(--text-muted);
}
.cs-gauge-card[data-tone="ok"] { border-top-color: var(--success); }
.cs-gauge-card[data-tone="warn"] { border-top-color: var(--warning); }
.cs-gauge-card[data-tone="critico"] { border-top-color: var(--danger); }

.cs-gauge { position: relative; width: min(13rem, 60vw); aspect-ratio: 1; }
.cs-gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cs-gauge-track {
  fill: none;
  stroke: color-mix(in srgb, var(--border) 70%, transparent);
  stroke-width: 10;
}
.cs-gauge-arc {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 10;
  stroke-linecap: round;
}
.cs-gauge[data-tone="ok"] .cs-gauge-arc { stroke: var(--success); }
.cs-gauge[data-tone="warn"] .cs-gauge-arc { stroke: var(--warning); }
.cs-gauge[data-tone="critico"] .cs-gauge-arc { stroke: var(--danger); }

.cs-gauge-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.cs-gauge-value {
  font: 700 clamp(2.1rem, 5.4vw, 3.1rem)/1 var(--mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cs-gauge-meta { text-align: center; }
.cs-gauge-kind {
  display: block;
  font-weight: 650;
  font-size: 0.95rem;
}
.cs-gauge-caption {
  margin: 0.25rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 26ch;
  margin-inline: auto;
}

.cs-forecast-card { display: grid; align-content: start; gap: 0.8rem; padding: 1.1rem 1.2rem; }
.cs-forecast {
  border-left: 4px solid var(--text-muted);
  padding-left: 0.85rem;
}
.cs-forecast[data-tone="ok"] { border-left-color: var(--success); }
.cs-forecast[data-tone="warn"] { border-left-color: var(--warning); }
.cs-forecast[data-tone="critico"] { border-left-color: var(--danger); }
.cs-forecast-label {
  display: block;
  margin: 0.25rem 0 0.3rem;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.15;
}
.cs-forecast[data-tone="ok"] .cs-forecast-label { color: var(--success); }
.cs-forecast[data-tone="warn"] .cs-forecast-label { color: var(--warning); }
.cs-forecast[data-tone="critico"] .cs-forecast-label { color: var(--danger); }
.cs-forecast-headline { margin: 0 0 0.3rem; font-weight: 600; }
.cs-forecast-detail { margin: 0; color: var(--text-muted); font-size: 0.86rem; line-height: 1.5; max-width: 68ch; }

/* El diagnóstico del modelo va visualmente subordinado al pronóstico calculado:
   es prosa sobre un número, no una segunda opinión que compita con él. */
.cs-diagnosis {
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.cs-diagnosis-text { margin: 0.3rem 0 0; font-size: 0.86rem; line-height: 1.55; }
.cs-diagnosis[data-state="pending"] .cs-diagnosis-text { color: var(--text-muted); font-style: italic; }
.cs-diagnosis[data-state="unavailable"] .cs-diagnosis-text,
.cs-diagnosis[data-state="error"] .cs-diagnosis-text { color: var(--text-muted); }
.cs-diagnosis-meta {
  display: block;
  margin-top: 0.4rem;
  font: 500 0.68rem/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cs-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
}
.cs-metric {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.cs-metric[data-tone="warn"] { border-left-color: var(--warning); }
.cs-metric[data-tone="critico"] { border-left-color: var(--danger); }
.cs-metric:hover { border-color: var(--accent); }
.cs-metric-value { font: 700 1.5rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.cs-metric-label { font-size: 0.8rem; font-weight: 600; }
.cs-metric-detail { font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; }
/* Segunda línea de la tarjeta documental: la composición de la biblioteca, que es
   contexto del número y no el número. Va más chica y separada por una regla. */
.cs-metric-extra {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--border);
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.cs-blockers-card { padding: 1rem 1.15rem; }
.cs-blockers-empty { margin: 0.4rem 0 0; }
.cs-blockers-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.cs-blocker-btn {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.cs-blocker[data-tone="critico"] .cs-blocker-btn { border-left-color: var(--danger); }
.cs-blocker-btn:hover { border-color: var(--accent); }
.cs-blocker-btn span { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }

.cs-empty { grid-area: gauge / gauge / blockers / forecast; display: grid; gap: 0.5rem; justify-items: start; padding: 1.2rem; }

@media (max-width: 1280px) {
  .cs-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .cs-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'gauge' 'forecast' 'metrics' 'blockers';
  }
  .cs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  /* El arco se dibuja con el mismo tiempo que la cuenta del número (900 ms en
     compliance-state.js). Si difieren, se leen como dos datos distintos. */
  .cs-gauge-arc { transition: stroke-dashoffset 0.06s linear; }
  .compliance-state > .home-section-label-row,
  .cs-grid > * { animation: gamr-rise 0.42s cubic-bezier(0.22, 0.68, 0.35, 1) both; }
  .cs-grid > *:nth-child(2) { animation-delay: 0.06s; }
  .cs-grid > *:nth-child(3) { animation-delay: 0.12s; }
  .cs-grid > *:nth-child(4) { animation-delay: 0.18s; }
}

/* ── Análisis masivo de escenarios ─────────────────────────
   La barra aparece con la primera selección y el diálogo agrupa las tres
   operaciones. El motivo por el que puntuar exige justificación está en
   js/scenario-bulk.js; acá el aviso va marcado en tono de alerta a propósito. */
.sc-check-col { width: 2.2rem; text-align: center; }
.sc-check-col input { cursor: pointer; }

.sc-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.1rem;
  margin: .6rem 0;
  padding: .6rem .9rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.sc-bulk-bar[hidden] { display: none !important; }
.sc-bulk-count { font: 600 .88rem/1 var(--mono); }
.sc-bulk-scope { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; }
.sc-bulk-scope label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }

.sc-bulk-modal {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  /* `margin: auto` explícito: hay reglas globales sobre `dialog` en este archivo
     que le fijan el margen y lo dejaban pegado al borde izquierdo. */
  margin: auto;
  max-height: 90vh;
  overflow-y: auto;
  width: min(46rem, 94vw);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
}
.sc-bulk-modal::backdrop { background: rgba(15, 23, 42, .45); }
.sc-bulk-modal form { display: grid; gap: .9rem; padding: 1.2rem 1.4rem 1.1rem; }
.sc-bulk-head h3 { margin: .2rem 0 .15rem; }
.sc-bulk-note { margin: 0; }

.sc-bulk-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem 1rem 1rem;
  display: grid;
  gap: .6rem;
}
.sc-bulk-group legend {
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 .4rem;
}
.sc-bulk-modal select[multiple] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.sc-bulk-warn {
  margin: 0;
  padding-left: .7rem;
  border-left: 3px solid var(--warning);
  color: var(--text-muted);
}
.sc-bulk-errors {
  margin: 0;
  padding: .6rem .8rem;
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--danger);
  font-size: .85rem;
}
.sc-bulk-errors[hidden] { display: none !important; }
.sc-bulk-preview[hidden] { display: none !important; }
.sc-bulk-foot { display: flex; justify-content: flex-end; gap: .5rem; }

@media (max-width: 640px) {
  .sc-bulk-modal { width: 96vw; }
  .sc-bulk-bar { align-items: flex-start; flex-direction: column; }
}

/* ── Padrón de plataforma: empresas por persona ─────────────────────────────── */
/* La columna «Empresas» reemplazó a «Rol»: el rol dejó de ser uno por persona y pasó
   a ser uno por empresa. Cada chapa lleva el nombre corto y el rol en esa empresa. */
.admin-org-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.admin-org-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--orizon-border);
  border-radius: 999px;
  background: var(--orizon-surface-alt);
  font-size: 0.68rem;
  white-space: nowrap;
}

.admin-org-pill strong {
  font-weight: 700;
  color: var(--orizon-text);
}

.admin-org-pill small {
  color: var(--orizon-muted);
  font-size: 0.62rem;
}

/* «Sin empresa asignada» no es lo mismo que «todas»: se dice distinto y se ve distinto. */
.admin-sin-empresas {
  color: var(--orizon-muted);
  font-size: 0.72rem;
  font-style: italic;
}

.admin-orgs-fieldset {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--orizon-border);
  border-radius: 12px;
  background: var(--orizon-surface-alt);
}

.admin-orgs-fieldset legend {
  padding: 0 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--orizon-text);
}

/* Un admin de plataforma no lleva membresías: el bloque se apaga entero y el hint dice
   por qué. Atenuado y no oculto — desaparecer no explica nada. */
.admin-orgs-fieldset[data-disabled] {
  opacity: 0.55;
}

.admin-orgs-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 0.55rem;
}

.admin-org-assign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--orizon-border);
  border-radius: 10px;
  background: var(--orizon-surface);
}

.admin-org-assign span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-org-assign strong {
  font-size: 0.78rem;
}

.admin-org-assign small {
  color: var(--orizon-muted);
  font-size: 0.66rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-org-assign select {
  flex: 0 0 auto;
  max-width: 45%;
}

/* ── Matriz de riesgo por agrupación de activos ─────────────────────────────
   Es una vista del registro de escenarios, no un modelo propio: hereda la caja
   del modal de lote y solo agrega la tabla. Más ancha porque son siete columnas
   y una de ellas lleva el control y su madurez. */
.gm-modal { width: min(78rem, 96vw); }
.gm-modal .sc-bulk-head { padding: 1.2rem 1.4rem .4rem; }
.gm-body { padding: 0 1.4rem; display: grid; gap: 1.1rem; }
.gm-summary { margin: 0; }
.gm-group h4 { margin: 0 0 .2rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
/* Lo que nadie agrupó no es una agrupación: se ve distinto para que se corrija. */
.gm-group-undeclared h4 { color: var(--text-muted, #64748b); }
.gm-meta-row { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-bottom: .45rem; }
.gm-meta { font-size: .82rem; color: var(--text-muted, #64748b); }
.gm-meta span { font-weight: 600; }
/* Siete columnas no entran en cualquier pantalla: la tabla scrollea adentro de su
   contenedor y no empuja el ancho del diálogo. */
.gm-table { min-width: 60rem; }
.gm-table td, .gm-table th { vertical-align: top; }
.gm-exposure { white-space: nowrap; text-align: center; }
.gm-level { white-space: nowrap; font-weight: 600; }
/* Un nivel vacío se dice vacío: un 0 acá se leería «Muy bajo», que es lo contrario
   de «nadie lo evaluó». */
.gm-level-empty { color: var(--text-muted, #94a3b8); font-weight: 400; }
.gm-control { display: block; font-size: .84rem; margin-bottom: .2rem; }
.gm-control-text { font-style: italic; color: var(--text-muted, #64748b); }
.gm-maturity { font-size: .78rem; opacity: .85; }
.gm-warn { color: var(--danger, #dc2626); font-weight: 600; }
.gm-foot { padding: 1rem 1.4rem 1.2rem; }
/* Una fila sembrada por la propagación no puede verse igual que una que declara la
   matriz documentada. */
.gm-auto { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #94a3b8); border: 1px dashed currentColor; border-radius: 4px; padding: 0 .25rem; }
/* Agrupación y par de exposición en los registros de escenarios y de tratamiento. */
.sc-group-cell { font-size: .84rem; color: var(--text-muted, #64748b); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El par amenaza × vulnerabilidad es el **insumo** de la probabilidad y no el riesgo:
   va en texto y no como pastilla de color, para que no se lea como un nivel evaluado. */
.sc-exposure-cell { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-muted, #64748b); }

/* ===========================================================================
   Panel de plataforma (paso previo a elegir empresa)
   ---------------------------------------------------------------------------
   Lo que ve el admin de plataforma al entrar, mientras no haya empresa activa.
   No es un paso del SGSI: vive fuera de los `.panel` y por eso el shell lo
   destapa con `body.sin-organizacion` en vez de con `state.step`.

   ⚠ `.platform-home` declara `display`, así que necesita el override de
   `[hidden]`: una regla de autor le gana al `display:none` del navegador
   (autor > user-agent) y el panel quedaría abierto tapando la pantalla desde
   que carga. Es la misma trampa del asistente CISO; `legacy-hidden-panels.
   test.ts` lo vigila.
   ========================================================================== */

.platform-home {
  display: grid;
  gap: 1.25rem;
  padding: 1.75rem 0 2.5rem;
}

.platform-home[hidden] { display: none !important; }

/* Sin empresa activa no hay ningún paso que mostrar: los paneles del SGSI se
   apagan enteros en vez de dibujarse vacíos, y la navegación por módulos se
   oculta porque cada uno de sus botones lleva a datos de una empresa que
   todavía no se eligió. El selector de empresa del sidebar se queda: es el
   otro camino para elegir. */
body.sin-organizacion .main > .panel { display: none !important; }
/* `#app-sidebar #app-primary-nav` (línea ~14339) tiene dos ids y le gana a un id
   solo, así que esta necesita el suyo: sin la navegación oculta, cada módulo del
   menú es un clic muerto —el panel está en `display:none` por la regla de arriba— y
   un menú que no lleva a ninguna parte se lee como que la app se rompió. */
body.sin-organizacion #app-sidebar #app-primary-nav { display: none !important; }

.platform-home-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
}

.platform-home-head h2 { margin: 0.15rem 0 0.25rem; }
.platform-home-sub { margin: 0; color: var(--text-muted); }

.platform-home-alerts { display: grid; gap: 0.5rem; }
.platform-home-alerts[hidden] { display: none !important; }

.platform-alert {
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.65rem 0.9rem;
  font-size: 0.86rem;
}

/* Una fila por empresa. Las tarjetas medían ~500 px y cinco ya ocupaban dos
   pantallas: con veinte o treinta organizaciones el panel deja de ser un panel.
   La tabla escala, y el encabezado dice qué mide cada columna. */
.platform-home-grid { overflow-x: auto; }

.platform-search { display: flex; }
.platform-search[hidden] { display: none !important; }
.platform-search input {
  flex: 1 1 320px;
  max-width: 420px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.pf-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
}

.pf-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.pf-table td,
.pf-table th[scope="row"] {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  vertical-align: middle;
}

.pf-row { cursor: pointer; }
.pf-row:hover td,
.pf-row:hover th[scope="row"] { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.pf-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pf-table tbody tr:last-child td,
.pf-table tbody tr:last-child th { border-bottom: 0; }

/* La empresa es el encabezado de su fila: nombre corto arriba, razón social abajo y
   chica. Con muchas organizaciones el nombre corto es lo que se busca con la vista. */
/* `text-transform: none` explícito: la celda de la empresa es un `th[scope="row"]` y
   `body.shell-modern th` (línea ~11705) pone mayúsculas a **todo** `th`, así que
   «Petroleos del Paraguay» salía gritado. Hace falta ganarle en especificidad con el
   mismo `body.shell-modern`. La razón social se muestra como la escribió la empresa. */
body.shell-modern .pf-table .pf-org,
.pf-org {
  /* `body.shell-modern th` lo declara todo con `!important` (línea ~11703), así que
     acá hace falta el mismo. Es el tercer lugar del archivo donde el shell moderno
     obliga a esto; el precedente escrito está en `#pmap-editor select[multiple]`. */
  text-align: left !important;
  font-weight: 400 !important;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: transparent !important;
  color: var(--text) !important;
  padding: 0.5rem 0.7rem !important;
}
.pf-org b { font-weight: 650; }
.pf-org small { display: block; color: var(--text-muted); font-size: 0.72rem; }

.pf-last {
  margin-left: 0.35rem;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
}
.pf-row.is-last-viewed th[scope="row"] { box-shadow: inset 3px 0 0 var(--accent); }

.pf-break { white-space: nowrap; font-size: 0.8rem; }
.pf-break.tone-ok { color: var(--success); }
.pf-break.tone-atencion { color: var(--warning); }
.pf-break.tone-critico { color: var(--danger); }

.pf-audit { white-space: nowrap; font-family: var(--mono); font-size: 0.75rem; }
.pf-warn { color: var(--warning); font-weight: 700; }

.pf-axis {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}
/* Un eje sin base medible se dibuja apagado: el «—» tiene que leerse como «no se
   puede medir todavía», no como un número chico. */
.pf-axis.is-empty,
.pf-audit.is-empty { color: var(--text-muted); font-weight: 400; }

.pf-totals {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.pf-members { white-space: nowrap; font-variant-numeric: tabular-nums; }

.pf-gap {
  display: inline-block;
  margin-left: 0.2rem;
  font-size: 0.68rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
  color: var(--warning);
  white-space: nowrap;
}

.pf-go { text-align: right; color: var(--text-muted); }
.pf-error { color: var(--danger); }
.pf-empty { color: var(--text-muted); padding: 1rem 0.7rem; }

.platform-integrity-out {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem 1.15rem;
  font-size: 0.85rem;
}

.platform-integrity-out[hidden] { display: none !important; }

.platform-home-foot { color: var(--text-muted); font-size: 0.8rem; margin: 0; }


/* ===========================================================================
   Inventario de activos: la tabla es el trabajo, no el pie de la pantalla
   ---------------------------------------------------------------------------
   Medido sobre AESA (84 activos, viewport 1440×1100): la primera fila arrancaba
   a 836 px —encabezado, tres tarjetas, dos plegables, buscador y fila de
   filtros— y la tabla vive además en su propio contenedor con scroll. Eran dos
   scrolls anidados: bajar la página para llegar a la tabla y después scrollear
   adentro de ella. El usuario de esta pantalla es el consultor que revisa 84
   filas buscando la que está mal, no alguien dando de alta de a una.
   ========================================================================== */

.panel[data-step="2"] .page-hero { padding-top: 1rem; padding-bottom: 1rem; }

.assets-kpis { gap: 0.6rem; margin-bottom: 0.75rem; }
.assets-kpis .kpi-card { padding: 0.7rem 0.9rem; }
.assets-kpis .kpi-value { font-size: 1.5rem; }

.assets-quality-details,
.bulk-valuate-bar { margin-block: 0.4rem; }

/* La columna «Acciones» salía cortada: 1.241 px de tabla en un contenedor de
   1.154. La tabla tiene once columnas de dato real, así que el ancho es
   legítimo y lo que faltaba era la barra: se scrollea adentro de su caja, no se
   recorta contra el borde. */
/* `AT-MAN-001` se partía en tres líneas y `HP-PROBOOK-460-16-INCH-G11-` también.
   Es la columna que identifica al activo y con la que se empareja una
   reimportación: tiene que poder leerse y copiarse de un renglón. */
.assets-table .col-id code,
.assets-table .col-ref code { white-space: nowrap; }

.assets-table th[data-sort] { cursor: pointer; user-select: none; }
.assets-table th[data-sort]:hover { color: var(--accent); }
.assets-table th[data-sort]::after {
  content: "";
  display: inline-block;
  margin-left: 0.3rem;
  opacity: 0.35;
  font-size: 0.75em;
}
.assets-table th[data-sort]:not(.is-sorted)::after { content: "↕"; }
.assets-table th[data-sort].is-sorted { color: var(--accent); }
.assets-table th[data-sort].is-sorted::after { content: "↑"; opacity: 1; }
.assets-table th[data-sort].is-sorted.is-desc::after { content: "↓"; }
.assets-table th[data-sort]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.assets-table .col-class { white-space: nowrap; }

.asset-class {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* La agrupación va en la línea de metadatos, donde ya viven origen y padre: es
   contexto del activo, no un eje que justifique otra columna de ancho. */
.badge-group {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--accent);
}

/* La barra de filtros del inventario medía 294 px de los 929 que había hasta la
   primera fila: siete filtros apilando rótulo sobre desplegable se envolvían en
   tres líneas. En el inventario el rótulo va **al lado**, que es la mitad de
   alto por chip, y los chips comparten renglón con el buscador. Solo acá: en
   otros módulos hay dos o tres filtros y la forma apilada está bien. */
.panel[data-step="2"] .assets-toolbar { padding: 0.6rem 0.8rem; gap: 0.5rem 0.75rem; }

.panel[data-step="2"] .filter-chip {
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  text-transform: none;
  font-size: 0.72rem;
}

.panel[data-step="2"] .filter-chip select {
  min-width: 96px;
  max-width: 150px;
  padding: 0.25rem 0.4rem;
}

.panel[data-step="2"] .search-box { flex: 1 1 260px; min-width: 220px; }

/* El encabezado del paso en un solo renglón: eyebrow y título a la izquierda, los
   tres botones a la derecha. Apilado y centrado ocupaba 145 px para decir en qué
   pantalla estás, en la pantalla cuyo trabajo es recorrer una tabla. */
.panel[data-step="2"] .page-hero {
  /* `flex-direction` y `align-items` vienen en `column`/`center` del hero
     genérico, que está pensado para una portada de módulo; acá el encabezado
     compite por el alto con la tabla, que es el trabajo. */
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left !important;
  padding: 0.7rem 1rem !important;
  margin: 0 0 0.6rem !important;
  max-width: none !important;
}
.panel[data-step="2"] .assets-header-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  text-align: left;
}
.panel[data-step="2"] .page-hero h2 { margin: 0; font-size: 1.05rem; }
/* La bajada explicaba la fórmula del valor; ahora eso lo dice la propia columna
   «Impacto» con su tooltip, y acá solo ocupaba un renglón entero. */
.panel[data-step="2"] .assets-header-text p { display: none; }
.panel[data-step="2"] .page-hero .assets-primary-actions { margin: 0; }

/* La barra de filtros en dos renglones compactos: el buscador comparte línea con
   la vista y «Limpiar», y los chips fluyen debajo. Eran 216 px para elegir entre
   listas cortas. */
.panel[data-step="2"] .assets-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  grid-template-areas: "buscar vista limpiar" "filtros filtros filtros";
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0.5rem 0.8rem !important;
}
.panel[data-step="2"] .assets-toolbar .search-box { grid-area: buscar; }
.panel[data-step="2"] .assets-toolbar .view-toggle { grid-area: vista; }
.panel[data-step="2"] .assets-toolbar #clear-asset-filters { grid-area: limpiar; }
.panel[data-step="2"] .assets-toolbar .filter-group { grid-area: filtros; gap: 0.3rem 0.5rem; }

/* Los desplegables del inventario heredaban la altura de formulario (40 px). Con
   siete filtros en dos renglones eso son 114 px de barra. A 28 px la barra baja a
   la mitad y siguen siendo cómodos de tocar. */
/* `body.shell-modern` fuerza `height: 40px !important` sobre todo `select` (línea
   ~10689), así que acá hace falta el mismo `!important` — es el mismo motivo por el
   que `#pmap-editor select[multiple]` lo lleva. Con siete filtros en dos renglones,
   40 px por control eran 114 px de barra para elegir entre listas cortas. */
body.shell-modern .panel[data-step="2"] .filter-chip select,
.panel[data-step="2"] .filter-chip select,
.panel[data-step="2"] .search-box input {
  /* El alto va con su padding: bajarlo solo dejaba el texto del control recortado
     contra el borde («Todos» y el placeholder salían cortados por arriba). */
  height: 32px !important;
  min-height: 0 !important;
  padding-block: 0 !important;
  line-height: normal;
}
.panel[data-step="2"] .search-box { min-height: 0; }
.panel[data-step="2"] .assets-kpis .kpi-sub { font-size: 0.7rem; }

/* ===========================================================================
   Inventario: una tabla de seis columnas, con jerarquía dentro de la celda
   ---------------------------------------------------------------------------
   Eran quince columnas —una por campo del Excel— y por eso hacían falta scroll
   horizontal, columnas congeladas y encabezado fijo. Agrupando lo que se lee
   junto, la tabla entra en pantalla y esas tres piezas dejan de existir.

   El lenguaje es el mismo del panel de plataforma (`.pf-table`): encabezado
   chico en versalitas, dato principal arriba y contexto abajo en gris, números
   tabulares. Dos tablas del mismo producto que se leen distinto obligan a
   reaprender la lectura en cada pantalla.
   ========================================================================== */

/* `body.shell-modern th` declara `position: sticky` sobre **todo** `th` (línea
   ~10657). Acá se anula: la tabla ya no tiene scroll propio ni desborda, así que
   un encabezado pegajoso solo agrega una capa que se despega al scrollear la
   página. Un solo scroll, el de la página, y el encabezado va con ella. */
.assets-table th {
  position: static !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* El ancho lo reparte la tabla: sin `min-width` en las celdas no hay nada que
   empuje el contenido más allá del contenedor, así que no queda desborde ni
   barra horizontal. */
.assets-table { width: 100%; table-layout: fixed; }
.assets-table td { overflow: hidden; text-overflow: ellipsis; }

.assets-table td { vertical-align: middle; }

/* El dato que se busca, y debajo el que da contexto. */
.celda-principal { display: block; font-size: 0.86rem; }
.celda-secundaria { display: block; font-size: 0.74rem; color: var(--text-muted); margin-top: 0.1rem; }
.celda-vacia { color: var(--text-muted); opacity: 0.7; font-style: italic; }

/* Todo en porcentaje: con `table-layout: fixed`, mezclar píxeles y porcentajes
   deja la suma por encima del contenedor y vuelve el desborde que este rediseño
   viene a sacar. */
.assets-table .col-check { width: 3%; }
.assets-table .col-name { width: 27%; }
.assets-table .col-people { width: 14%; }
.assets-table .col-class { width: 12%; }
.assets-table .col-valuation { width: 22%; }
.assets-table .col-impact { width: 13%; }
.assets-table .col-action { width: 9%; }

.assets-table .asset-name-text {
  font-weight: 600;
  font-size: 0.9rem;
}

/* Identidad y contexto del activo en una sola línea de metadatos: el ID y la
   referencia dejaron de tener columna propia, así que van acá con la tipografía
   monoespaciada que los hace reconocibles y copiables. */
.assets-table .asset-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.assets-table .asset-code {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--border) 30%, transparent);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  white-space: nowrap;
}

.assets-table .asset-meta-line .badge {
  font-size: 0.64rem;
  padding: 0.05rem 0.32rem;
}

/* ===========================================================================
   Inventario: la valoración se edita en la celda
   ========================================================================== */

.cia-editor {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
}

.cia-campo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
}

.cia-rotulo {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.assets-table .cia-select {
  width: 46px;
  min-width: 46px;
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 0.15rem !important;
  text-align: center;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
}

/* El control lleva el color de su nivel: la tríada se lee de un vistazo sin
   leer los tres números. */
.assets-table .cia-select.nivel-1 { background: #d1fae5; }
.assets-table .cia-select.nivel-2 { background: #a7f3d0; }
.assets-table .cia-select.nivel-3 { background: #fef3c7; }
.assets-table .cia-select.nivel-4 { background: #fed7aa; }
.assets-table .cia-select.nivel-5 { background: #fecaca; }
/* Sin valorar se ve como falta, no como un valor bajo. */
.assets-table .cia-select.is-empty { background: transparent; color: var(--text-muted); }

/* Perfil: tres barras al 20 % de alto por punto, al lado de los controles que
   las producen. Es la lectura que los tres números no dan de un vistazo. */
.spark {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
  margin-left: 0.2rem;
  padding-bottom: 1px;
}

.spark-bar {
  width: 7px;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--border);
}

/* Un eje sin declarar no dibuja barra: una barra al 20 % afirmaría que vale 1. */
.spark-bar.is-empty {
  height: 100%;
  background: repeating-linear-gradient(
    to bottom, transparent 0 3px, color-mix(in srgb, var(--border) 70%, transparent) 3px 5px
  );
}

/* Impacto: el número y su nivel, apilados. */
.col-impact { white-space: nowrap; }

.assets-table .col-impact .value-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* El número y su nivel, **apilados**: en línea la pastilla se recortaba contra el
   borde de la columna. Y la celda no puede recortar: es el dato que se busca. */
.assets-table .col-impact {
  overflow: visible;
  text-align: center;
}
.assets-table .col-impact .badge { display: inline-flex; margin-top: 0.22rem; }
.assets-table .col-impact .value-chip { display: inline-flex; }
.assets-table .value-chip.is-stale sup { font-size: 0.65em; opacity: 0.9; }

.badge-alto,
.badge-medio,
.badge-bajo,
.badge-sin-valorar {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 650;
  white-space: nowrap;
}

.badge-alto { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-medio { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.badge-bajo { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-sin-valorar { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); }

/* Paginador. Se oculta con `hidden` desde JS, así que declara su propio
   `display: none` — la trampa de siempre en este archivo. */
.assets-pager {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.2rem 0;
}
.assets-pager[hidden] { display: none !important; }
.assets-pager-info { color: var(--text-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }

/* El asterisco marca que el valor guardado quedó del promedio anterior y se
   actualizará al guardar el activo. Se marca, no se esconde ni se reescribe. */
.assets-table .value-chip.is-stale sup { font-size: 0.65em; opacity: 0.9; }



.impacto-celda { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }

/* ===========================================================================
   Un solo lenguaje de tabla para los cuatro registros
   ---------------------------------------------------------------------------
   Activos (2), Escenarios (3), Registro (5) y Tratamiento (6) muestran los
   mismos objetos y se leían de cuatro formas distintas: la identidad repartida
   en dos, tres o cuatro columnas según la pantalla, encabezados con estilos
   propios y un scroll interno en unas sí y en otras no.

   Acá va lo compartido: encabezado chico en versalitas, dato principal arriba y
   contexto abajo en gris, sin `sticky` y sin caja que scrollee sola. Lo que
   cambia entre pasos son las columnas propias de cada uno, que es lo único que
   debería cambiar.
   ========================================================================== */

/* `.tabla-registro` marca las cuatro cajas —inventario, escenarios, registro y
   tratamiento— para que compartan una sola definición en vez de cuatro. */
.tabla-registro th {
  font-size: 0.68rem !important;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Ni encabezado fijo ni primera columna congelada: son dos reglas **globales**
   del shell (`body.shell-modern th` y `body.shell-modern .table-wrap
   td:first-child`) y hay que anularlas acá. Sacarlas del shell cambiaría todas
   las tablas del producto, que es más de lo que este cambio abarca. */
body.shell-modern .tabla-registro th,
body.shell-modern .tabla-registro td:first-child,
.tabla-registro th,
.tabla-registro td:first-child {
  position: static !important;
  left: auto !important;
}

/* Y ninguna caja scrollea sola: un solo scroll, el de la página. */
body.risk-focus-mode .tabla-registro,
.tabla-registro {
  max-height: none !important;
  min-height: 0 !important;
  overflow-y: visible !important;
  overflow-x: auto;
}

/* La celda de identidad del escenario, igual que la del activo. */
.col-escenario .celda-principal {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
}

.col-escenario .celda-secundaria {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.col-escenario .badge {
  font-size: 0.64rem;
  padding: 0.05rem 0.32rem;
}

.sc-pair-sep {
  margin: 0 0.35rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* Alineación vertical al medio en las cuatro tablas: con la celda de identidad en
   dos líneas, las celdas de una línea quedaban pegadas al borde superior y las
   filas se leían escalonadas. */
.tabla-registro td,
.tabla-registro th { vertical-align: middle; }

/* ── Brechas del registro de riesgos (paso 3) ─────────────────────────────────
   El panel se abre y se cierra desde `js/app.js` con el atributo `hidden`, y
   declara `display`, así que necesita el override: una regla de autor le gana al
   `display: none` del navegador y el panel quedaría abierto desde la carga. Es la
   misma trampa que ya tienen `.ciso-panel` y `.compliance-state`, y la vigila
   `frontend/tests/legacy-hidden-panels.test.ts`. */
.risk-audit {
  display: grid;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--surface-2, #f8fafc);
}
.risk-audit[hidden] { display: none !important; }

.risk-audit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.risk-audit-head h3 { margin: 0; font-size: 15px; }
.risk-audit-actions { display: flex; gap: 8px; }

.risk-audit-table { width: 100%; }
.risk-audit-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* La cláusula es contexto, no el dato: se lee al lado y no compite con el número. */
.risk-audit-table .brecha-clausula { color: var(--muted, #64748b); font-size: 12px; }
/* Una brecha cerrada se atenúa en vez de esconderse: que esté en cero es un dato. */
.risk-audit-table .brecha-cerrada { opacity: 0.55; }
/* «No evaluable» se pinta distinto de «0», porque mandan a lugares distintos. */
.risk-audit-table .brecha-no-medible td { font-style: italic; color: var(--muted, #64748b); }

/* Estado de un indicador de riesgo. `sin_umbral` y `no_medible` van en gris a propósito:
   ninguno de los dos es un juicio, y pintarlos de verde diría que están bien. */
.kri-estado {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border, #cbd5e1);
  color: var(--muted, #64748b);
}
.kri-estado[data-tone="ok"] { color: #166534; border-color: #86efac; background: #f0fdf4; }
.kri-estado[data-tone="bad"] { color: #991b1b; border-color: #fca5a5; background: #fef2f2; }

.risk-reco-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.risk-reco {
  padding: 10px 12px;
  border-left: 3px solid var(--border, #cbd5e1);
  background: var(--surface, #fff);
  border-radius: 0 8px 8px 0;
}
.risk-reco p { margin: 0 0 4px; }
.risk-reco-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Marcada, no filtrada: una propuesta escondida no se puede revisar. */
.risk-reco-weak { border-left-color: var(--warn, #d97706); }
.risk-reco-warnings { margin: 10px 0 0; padding-left: 18px; }

/* ── Registro y tratamiento: dos vistas de un panel ───────────────────────────
   Eran dos pasos del menú sobre los mismos escenarios. Las vistas se alternan con
   el atributo `hidden` desde `js/app.js` y `.registro-vista` **no declara
   `display`** a propósito: sin `display` propio, `hidden` alcanza y no hace falta
   el override que llevan `.ciso-panel` y `.risk-audit`. */
.registro-vistas {
  display: flex;
  gap: 4px;
  margin: 4px 0 14px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.registro-vista-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--muted, #64748b);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.registro-vista-btn:hover { color: var(--text, #0f172a); }
.registro-vista-btn.is-active {
  color: var(--text, #0f172a);
  font-weight: 600;
  border-bottom-color: var(--accent, #2563eb);
}
.registro-vista-btn:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: -2px; }

/* ── Alta de activo: lo que quedó sin completar ───────────────────────────────
   Se **marca**, no se bloquea: exigirlo empuja a rellenar con cualquier cosa, que
   es el origen de los 171 activos que dicen «Hardware» y de los 11 en 3/3/3. El
   borde va a la izquierda para no confundirse con el rojo de una validación que sí
   impide guardar. */
.asset-modal-form .field.campo-incompleto {
  border-left: 3px solid var(--warn, #d97706);
  padding-left: 8px;
  margin-left: -11px;
}
.asset-modal-form .field.campo-incompleto > span:first-child,
.asset-modal-form .field.campo-incompleto > .field-label {
  color: var(--warn, #b45309);
}
.asset-modal-sub.is-warn { color: var(--warn, #b45309); }

/* ── Plan de completado en lote (paso 3) ─────────────────────────────────────
   La unidad de lectura es la **decisión**, no el escenario: cada fila es una
   amenaza o un grupo con su conteo al lado, para que se vea que 382 escenarios
   son 11 decisiones. */
.plan-mecanico, .plan-decisiones { list-style: none; margin: 8px 0 14px; padding: 0; }
.plan-mecanico li { padding: 4px 0; }
.plan-mecanico small, .plan-decision small { color: var(--muted, #64748b); font-weight: 400; }
.plan-decision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #eef2f7);
}
.plan-decision-que { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.plan-decision select { max-width: 260px; }
#sc-audit-plan h5 { margin: 14px 0 2px; font-size: 13px; }

/* ── Barras de filtros compactas ──────────────────────────────────────────────
   Las cuatro barras tenían entre 6 y 9 controles en una fila y empujaban la tabla
   por debajo del pliegue. Ahora quedan el buscador y dos filtros; el resto entra
   con «Más filtros». Un filtro encendido **nunca** queda escondido: sale como
   pastilla, porque el análisis en lote se aplica sobre «todo el filtro» y un filtro
   invisible cambia en silencio sobre qué filas se escribe. */
.filtros-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px 0 2px;
  margin-top: 4px;
  border-top: 1px dashed var(--border, #e2e8f0);
}
.filtros-extra[hidden] { display: none !important; }

.filtros-activos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.filtros-activos:empty { display: none; }

.filtro-chip {
  appearance: none;
  border: 1px solid var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  color: var(--accent-strong, #1d4ed8);
  border-radius: 999px;
  padding: 2px 10px;
  font: inherit;
  font-size: 12px;
  line-height: 1.7;
  cursor: pointer;
  white-space: nowrap;
}
.filtro-chip:hover { background: color-mix(in srgb, var(--accent, #2563eb) 16%, transparent); }
.filtro-chip strong { font-weight: 600; }

/* ⚠ `body.shell-modern` fuerza `height: 40px !important` sobre todo `select`, así
   que compactar la barra exige el mismo `!important` — hay precedente escrito en
   `#pmap-editor select[multiple]` y en la barra del inventario. El alto va con su
   padding: bajarlo solo deja el texto recortado contra el borde. */
body.shell-modern .sc-filter-bar select,
body.shell-modern .tx-toolbar select,
body.shell-modern .filtros-extra select {
  height: 32px !important;
  padding: 2px 8px !important;
  font-size: 13px;
}
body.shell-modern .sc-filter-bar input[type="search"],
body.shell-modern .tx-toolbar input[type="search"] {
  height: 32px !important;
}

/* ── Inicio en tres niveles ───────────────────────────────────────────────────
   Eran 25 bloques h3/h4 en un panel: seis vistas del mismo registro de riesgos,
   tres listas de pendientes y tres bloques de plazos. El orden es jerárquico —
   mando, qué atender, análisis— y el tercero viene plegado. */
.home-nivel { display: block; }
.home-nivel + .home-nivel { margin-top: 22px; }

/* El nivel 3 es un `<details>`: el estado abierto/cerrado lo maneja el navegador,
   funciona con teclado y no necesita el override de `[hidden]` que llevan los
   paneles que se ocultan desde JS. */
.home-nivel-analisis {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--surface-2, #f8fafc);
  padding: 0 16px;
}
.home-nivel-analisis > summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
}
.home-nivel-analisis > summary::-webkit-details-marker { display: none; }
.home-nivel-analisis > summary::before {
  content: '▸';
  color: var(--muted, #64748b);
  font-size: 12px;
}
.home-nivel-analisis[open] > summary::before { content: '▾'; }
.home-nivel-analisis > summary small {
  font-weight: 400;
  color: var(--muted, #64748b);
  font-size: 12px;
}
.home-nivel-analisis[open] > summary { border-bottom: 1px solid var(--border, #e2e8f0); }
.home-nivel-analisis > *:not(summary) { margin-top: 16px; }
.home-nivel-analisis > *:last-child { margin-bottom: 18px; }

/* La tira de KPI que quedó con uno o dos: sin esto hereda el grid de cuatro y el
   único indicador sale estirado a todo el ancho. */
.home-kpi-strip-1 { grid-template-columns: minmax(160px, 220px) !important; }
.home-kpi-strip-2 { grid-template-columns: repeat(2, minmax(160px, 1fr)) !important; }

/* ── Los cuatro gráficos de Inicio ────────────────────────────────────────────
   Reemplazan lectura por forma: seis bloques de texto sobre el mismo registro no
   mostraban dónde está concentrado el riesgo ni si el tratamiento lo mueve. */
.home-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.home-chart-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
}
/* El encabezado de cada tarjeta: eyebrow chico arriba, título como dato y el enlace a
   la derecha — el mismo lenguaje del panel de plataforma y del inventario. Dos tarjetas
   del mismo producto que se leen distinto obligan a reaprender la lectura. */
.home-chart-card .home-section-label-row { align-items: flex-start; }
.home-chart-card h3 { margin: 2px 0 0; font-size: 15px; line-height: 1.25; }
.home-chart-card .home-section-eyebrow { font-size: 10.5px; }
.home-chart-card > .hint:last-child { margin: 2px 0 0; font-size: 11.5px; }
.home-chart-card svg { width: 100%; height: auto; max-width: 100%; }
.home-chart-vacio { margin: 6px 0; }

/* El mapa de calor en versión de mando: **el número que decide primero** y la matriz
   al lado como forma. Era 254 px estirados al ancho de la tarjeta —el bloque más
   grande del panel— y eso es análisis: el detalle celda por celda vive en el paso 4.
   Los colores salen del grid de la organización; acá solo va la forma. */
.home-heatmap-exec {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* ⚠ Sin el `max-width` la matriz vuelve a estirarse: `.home-chart-card svg` declara
   `width: 100%`, que es lo correcto para el embudo y para el delta. */
.home-heatmap { flex: 0 0 auto; width: 128px !important; max-width: 128px; }
.home-heatmap .hm-ax { font-size: 8px; fill: var(--muted, #64748b); }

.hm-titular { flex: 1 1 160px; min-width: 150px; }
.hm-titular-n {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text, #0f172a);
}
.hm-titular-n.is-warn { color: var(--danger, #dc2626); }
.hm-titular-lab { display: block; font-size: 12px; color: var(--muted, #64748b); margin-top: 2px; }
.hm-bandas { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.hm-bandas li { font-size: 12px; color: var(--muted, #64748b); display: flex; align-items: center; gap: 5px; }
.hm-bandas strong { color: var(--text, #0f172a); font-variant-numeric: tabular-nums; }
.hm-punto { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ── La cadena y el delta, en HTML ────────────────────────────────────────────
   ⚠ Eran SVG con `viewBox` fijo y `width: 100%`: en una tarjeta de 300 px el texto
   de 12 px se escalaba a ~7 y quedaba ilegible, porque el SVG **no reflota, se
   achica**. Barras rotuladas no necesitan coordenadas: en HTML el texto mantiene
   su tamaño y hereda la tipografía del producto. El SVG queda donde hay geometría
   de verdad —la matriz y la dona—. */
.home-cadena, .home-delta {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.ch-fila {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.ch-lab { color: var(--muted, #64748b); }
.ch-pista {
  position: relative;
  height: 14px;
  border-radius: 4px;
  background: var(--border, #eef2f7);
  overflow: hidden;
}
.ch-total { position: absolute; inset: 0 auto 0 0; background: var(--border, #dbe3ec); }
.ch-valor { position: absolute; inset: 0 auto 0 0; background: var(--accent, #2563eb); border-radius: 4px; }
/* El eslabón donde se corta: una barra en cero se leería «poco», y dice «nada». */
.ch-fila.is-corte .ch-valor { background: var(--warn, #d97706); }
.ch-fila.is-corte .ch-lab { color: var(--warn, #b45309); font-weight: 600; }

.ch-pista-apilada { display: flex; background: none; }
.ch-trozo { height: 14px; flex: 0 0 auto; }
.ch-trozo:first-child { border-radius: 4px 0 0 4px; }
.ch-trozo:last-child { border-radius: 0 4px 4px 0; }

.ch-n { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 42px; text-align: right; }
.ch-n small { font-weight: 400; color: var(--muted, #64748b); }
.ch-sin { font-weight: 400; font-style: italic; color: var(--muted, #64748b); }
.ch-corte-nota, .ch-nota-warn { margin: 10px 0 0; }
.ch-nota-warn { color: var(--warn, #b45309); }

.home-donut {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  mask: radial-gradient(circle, transparent 42%, #000 43%);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%);
}

body.shell-modern .home-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.8rem;
}

body.shell-modern .home-donut-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

body.shell-modern .home-focus-actions-title {
  margin: 0.85rem 0 0.35rem;
  font-size: 0.82rem;
}

body.shell-modern .home-focus-actions {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

body.shell-modern .home-command-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

body.shell-modern .home-ops-strip {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

body.shell-modern .home-insights-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

body.shell-modern .home-insights-grid .hm-card {
  min-height: 200px;
}

body.shell-modern .hm-area {
  width: 100%;
  height: auto;
  display: block;
}

body.shell-modern .hm-heat-bars {
  display: grid;
  gap: 0.4rem;
}

body.shell-modern .hm-heat-bar-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 1.6rem;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.78rem;
}

body.shell-modern .hm-heat-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #475569;
}

body.shell-modern .hm-heat-bar-track {
  height: 8px;
  border-radius: 999px;
  background: #FEE2E2;
  overflow: hidden;
}

body.shell-modern .hm-heat-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: #B91C1C;
}

body.shell-modern .hm-caption {
  margin-top: 0.45rem;
  font-size: 0.72rem;
}

body.shell-modern .home-grc-more .home-grc-kpis {
  margin-top: 0.65rem;
}

body.shell-modern .audit-doc-home-moved {
  margin-bottom: 1rem;
}

body.shell-modern .audit-doc-dashboard-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}

body.shell-modern .audit-doc-dashboard-summary::-webkit-details-marker { display: none; }

body.shell-modern .home-readiness-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

body.shell-modern .home-readiness-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  cursor: pointer;
  font: inherit;
}

body.shell-modern .home-readiness-chip:hover {
  border-color: var(--accent, #1D4ED8);
  background: color-mix(in srgb, var(--accent, #1D4ED8) 8%, #fff);
}

body.shell-modern .home-readiness-chip strong {
  font-size: 0.78rem;
  color: var(--orizon-ink, #0F172A);
}

body.shell-modern .home-readiness-chip span {
  font-size: 0.72rem;
  color: var(--accent, #1D4ED8);
  font-weight: 650;
}

@media (max-width: 1100px) {
  body.shell-modern .home-focus-grid,
  body.shell-modern .home-insights-grid,
  body.shell-modern .home-command-grid-2,
  body.shell-modern .home-ops-strip {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  body.shell-modern .home-kpi-strip-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.shell-modern .home-donut-layout {
    grid-template-columns: 96px 1fr;
  }
}

body.shell-modern .home-docs-metrics-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-bottom: 0.75rem;
}

body.shell-modern .work-queue-list-compact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

body.shell-modern .work-queue-list-compact > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
}

body.shell-modern .wq-more {
  justify-content: center !important;
  border-style: dashed !important;
}

@media (max-width: 1200px) {
  body.shell-modern .home-kpi-strip-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.shell-modern .home-focus-grid,
  body.shell-modern .home-insights-grid,
  body.shell-modern .home-command-grid-2,
  body.shell-modern .home-ops-strip {
    grid-template-columns: 1fr !important;
  }
}


/* ── Introducción a ISO/IEC 27005 en el módulo de riesgo ──────────────────────
   La numeración sale de `scripts/iso27005.py` y viaja con los criterios: acá solo
   va la forma. Cada exigencia dice en qué paso se cumple, porque una introducción
   que explica la norma y no dice dónde se hace cada cosa deja al lector igual. */
.iso-intro-lead { margin: 10px 0 6px; font-size: 14px; }
.iso-intro-fases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 14px 0 6px;
}
.iso-intro-fase h4 { margin: 0 0 2px; font-size: 13px; }
.iso-intro-fase > .hint { margin: 0 0 8px; }
.iso-intro-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iso-intro-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: start;
  font-size: 12.5px;
}
.iso-intro-clausula {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent-strong, #1d4ed8);
  white-space: nowrap;
}
.iso-intro-que { color: var(--text, #0f172a); }
.iso-intro-paso {
  grid-column: 2;
  justify-self: start;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  color: var(--muted, #64748b);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.iso-intro-paso:hover { color: var(--accent, #2563eb); }
.iso-intro-pie { margin-top: 10px; }

/* ── Modal de carga masiva: el previo que se puede mirar ──────────────────────
   Los errores van primero porque el corte a 40 filas los escondía; se puede
   filtrar y descartar filas, porque con 2 malas de 100 había que corregir el
   Excel y volver a empezar. */
.asset-bulk-archivo {
  font-size: 12px;
  color: var(--muted, #64748b);
  align-self: center;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-bulk-archivo[hidden] { display: none !important; }

.asset-bulk-preview-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 6px 0;
}
.asset-bulk-preview-tools[hidden] { display: none !important; }
body.shell-modern .asset-bulk-preview-tools select { height: 32px !important; padding: 2px 8px !important; }

/* Lo que la carga produce **además** de los activos: es el número que más cambia
   el trabajo de quien importa y no aparecía en ninguna parte. */
.asset-bulk-consecuencias {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent, #2563eb);
  background: var(--surface-2, #f8fafc);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
}
.asset-bulk-consecuencias[hidden] { display: none !important; }

/* Descartada: sigue visible —descartar no es borrar— pero se lee como fuera del lote. */
.bulk-fila-excluida { opacity: 0.45; }
.bulk-fila-excluida td { text-decoration: line-through; }
.bulk-fila-excluida .sc-check-col { text-decoration: none; }
/* Incompleta se marca, no se rechaza: exigir empuja a rellenar con cualquier cosa. */
.bulk-fila-incompleta td:last-child { color: var(--warn, #b45309); }

/* ── Cláusulas 4 y 5 como registros (paso 13) ──────────────
   Cuatro tarjetas con el mismo editor de filas: partes interesadas, alcance,
   liderazgo y comunicación de la política. Las filas scrollean dentro de su caja —son
   hasta ocho columnas— para que el cuerpo de la página nunca scrollee en horizontal. */
.sgsi-card { margin-top: 1rem; }
.sgsi-scroll { overflow-x: auto; padding-bottom: 0.2rem; }
.sgsi-tabla { display: grid; gap: 0.35rem; margin: 0.4rem 0 0.3rem; min-width: 44rem; }
.sgsi-tabla-cab {
  display: flex;
  gap: 0.4rem;
  padding-right: 2rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.sgsi-tabla-fila { display: flex; gap: 0.4rem; align-items: center; }
.sgsi-tabla-fila input,
.sgsi-tabla-fila select { min-width: 0; font: inherit; }
.sgsi-tabla-x { flex: 0 0 1.7rem; padding: 0 0.3rem; line-height: 1; }
.sgsi-actividad { font-size: 0.78rem; }
.sgsi-subtitulo {
  margin: 0.9rem 0 0.1rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
/* Los problemas los enumera el servidor: son lo que impide que el registro quede
   vigente, y por eso van a la vista y no detrás de un desplegable. */
.sgsi-problemas {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--warning);
  font-size: 0.78rem;
}
.sgsi-problemas[hidden] { display: none !important; }
.sgsi-publicacion {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2, var(--surface));
  margin-bottom: 0.5rem;
}
.sgsi-card .hint[data-tone="ok"] { color: var(--success); }

/* El valor derivado dentro de una fila del editor: se lee, no se edita. */
.sgsi-derivado {
  align-self: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Entradas de la 9.3.2 dentro del acta: cada una con su inciso y su estado. Se listan
   todas, incluidas las que el sistema no puede responder — un acta que sólo muestra las
   que tienen dato afirma por omisión que se consideraron las diez. */
.sgsi-entradas { display: grid; gap: 0.3rem; margin: 0.6rem 0; }
.sgsi-entradas[hidden] { display: none !important; }
.sgsi-entrada {
  display: grid;
  grid-template-columns: 5.5rem minmax(9rem, 1.2fr) 6rem minmax(10rem, 2fr);
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2, var(--surface));
  font-size: 0.78rem;
}
.sgsi-entrada-clausula { font-weight: 600; color: var(--text-muted); }
.sgsi-entrada-resumen { color: var(--text-muted); }
@media (max-width: 720px) {
  .sgsi-entrada { grid-template-columns: 1fr; }
}

/* Atributos 27002:2022 en la fila del SoA. Lo declarado por la organización se distingue
   de lo que trae el catálogo de la norma: no son lo mismo y la fila lo dice. */
.soa-attrs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; }
.soa-attr {
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.66rem;
  color: var(--text-muted);
}
.soa-attr.is-declarado { border-color: var(--accent); color: var(--accent); }
.soa-attr.is-vacio { border-style: dashed; }
.soa-attr-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.soa-attr-eje { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.soa-attr-eje label { display: inline-flex; align-items: center; gap: 0.25rem; }

/* ── Paso 13 · lo que hace completables los once registros ────────────────────
 *
 * El índice de cláusulas, el padrón, las propuestas de fuente, el lote del RACI y el
 * cartel de borrador. Cinco bloques que se ocultan con `hidden` desde JS, así que los
 * que declaran `display` propio llevan su override — `css/styles.css` ya tiene media
 * docena puestos a mano por la misma razón, y `legacy-hidden-panels.test.ts` los vigila.
 */

.sgsi-indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.15rem 0.6rem; }
.sgsi-indice-fila {
  display: grid;
  grid-template-columns: 4.4rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.45rem;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sgsi-indice-fila:hover { background: var(--surface-2, var(--surface)); box-shadow: inset 2px 0 0 var(--text-muted); }
.sgsi-indice-fila.is-active {
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--accent, #2563eb);
}

@keyframes sgsi-flash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #2563eb) 45%, transparent); }
  40%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #2563eb) 25%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.sgsi-card-flash { animation: sgsi-flash 0.7s ease-out; }
.sgsi-indice-clausula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}
.sgsi-indice-nombre { font-size: 0.79rem; }
.sgsi-indice-estado { font-size: 0.66rem; letter-spacing: 0.02em; white-space: nowrap; }
.sgsi-indice-estado[data-tone="ok"] { color: var(--success); }
.sgsi-indice-estado[data-tone="warn"] { color: var(--warning); }
.sgsi-indice-estado[data-tone="muted"] { color: var(--text-muted); }

/* ── Los tres niveles del paso 13 ────────────────────────────────────────────
 *
 * Eran 993 líneas con tres trabajos apilados —administrar la empresa, documentar las
 * cláusulas 4 a 10, y mirar cuatro resúmenes de otros módulos—, que es la forma que
 * tenía Inicio antes del rediseño. El corte es por trabajo y por quién lo hace.
 */
.org-nivel { display: block; }
.org-nivel + .org-nivel { margin-top: 1.4rem; }
.org-nivel-sgsi { position: relative; }

/* La cabecera del nivel 2 **scrollea con el contenido**, no es fija. Nació sticky para
 * no perder de vista en qué cláusula estás con once tarjetas plegables, pero entre el
 * eyebrow, el título, el hint y el índice ocupaba demasiado alto fijo y entorpecía el
 * scroll de los once registros: se saca el pegado y la cabecera se lee al entrar. El
 * índice (`#sgsi-indice`) sigue linkeando a cada cláusula para saltar sin scrollear. */
.sgsi-cabecera {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem 0.5rem;
  margin-bottom: 0.8rem;
}
.sgsi-cabecera-titulo h3 { margin: 0.1rem 0 0.5rem; font-size: 1rem; }
.sgsi-cabecera .hint { margin: 0.35rem 0 0; }

/* Una cláusula plegada sigue diciendo cuál es y cómo está: el encabezado va en el
 * `<summary>`, no en el cuerpo. */
.sgsi-detalle > .sgsi-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.1rem 0;
}
.sgsi-detalle > .sgsi-summary::-webkit-details-marker { display: none; }
.sgsi-detalle > .sgsi-summary::before {
  content: "▸";
  float: left;
  margin: 0.15rem 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.sgsi-detalle[open] > .sgsi-summary::before { content: "▾"; }
.sgsi-detalle > .sgsi-summary:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
/* Plegada, la descripción larga sobra: la deja el título y el estado. */
.sgsi-detalle:not([open]) > .sgsi-summary .hint { display: none; }
.sgsi-card:has(.sgsi-detalle:not([open])) { padding-top: 0.7rem; padding-bottom: 0.7rem; }

.org-nivel-otros > summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.org-nivel-otros[open] > summary { margin-bottom: 0.8rem; }

/* El campo de texto y el desplegable que agrega del catálogo, en una sola celda. */
.sgsi-con-catalogo { display: flex; gap: 0.25rem; min-width: 0; }
.sgsi-con-catalogo input { flex: 1 1 auto; min-width: 0; }
/* ⚠ `body.shell-modern` fuerza `height: 40px !important` sobre todo `select`: es el
 * quinto lugar del archivo donde hay que repetir el `!important` para comprimirlo, y
 * el alto va con su padding o el texto queda recortado contra el borde. */
body.shell-modern .sgsi-con-catalogo select,
.sgsi-con-catalogo select {
  flex: 0 0 2.1rem;
  width: 2.1rem;
  min-width: 0;
  padding: 0 0.15rem !important;
  height: 30px !important;
  font-size: 0.72rem;
}

.sgsi-sugerencias { display: grid; gap: 0.35rem; margin: 0.5rem 0; }
.sgsi-sugerencias[hidden] { display: none !important; }
.sgsi-sugerencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2, var(--surface));
}
.sgsi-sugerencia .hint { display: block; font-size: 0.72rem; }
.sgsi-sugerencia-docs { color: var(--text-muted); font-size: 0.68rem !important; }

.sgsi-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0.4rem 0 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.sgsi-lote[hidden] { display: none !important; }
.sgsi-lote .field { margin: 0; min-width: 9rem; }
.sgsi-lote .hint { flex: 1 1 100%; margin: 0; }

.sgsi-borrador {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.4rem 0;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--text);
  font-size: 0.78rem;
}

.sgsi-ficha { display: block; }
.sgsi-ficha[hidden] { display: none !important; }
.sgsi-acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

/* El aviso de que un campo de la ficha ya tiene su registro. Va en ámbar y a la
 * izquierda, como las marcas del alta de activos: informa, no impide guardar. */
.ficha-duplicado {
  margin: 0.3rem 0 0;
  padding: 0.35rem 0.55rem;
  border-left: 3px solid var(--warning);
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  font-size: 0.72rem;
  line-height: 1.45;
}
.ficha-duplicado strong { color: var(--warning); }
.ficha-duplicado .btn { margin-left: 0.3rem; vertical-align: baseline; }

/* ⚠ El aviso vive **dentro** del `<label>`, y `body.shell-modern label.field` declara
 * `text-transform: uppercase !important` para el nombre del campo: la frase entera salía
 * gritada («LO ESCRIBIÓ EL ESTABLECIMIENTO, NO LA EMPRESA…»). Es el mismo pisotón que ya
 * se anuló dentro de `.audit-cabin-form-slot`; acá aparece por segunda vez, y sigue vivo
 * en cualquier otro `.field` que tenga un `.hint` adentro. */
body.shell-modern label.field .ficha-duplicado,
body.shell-modern .field .ficha-duplicado {
  text-transform: none !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: var(--text, #333) !important;
}

/* ── Nivel 1 del paso 13 plegable ──────────────────────────────────────────────
 * El `<summary>` tiene que decir de qué empresa es y cómo está la ficha sin abrirlo:
 * plegado sigue siendo la respuesta a «¿falta algo de identidad?». Se usa `<details>` y
 * no un toggle propio por lo mismo que el nivel 3 de Inicio — el estado lo maneja el
 * navegador, anda con teclado y no necesita el override de `[hidden]`. */
details.org-nivel-empresa > summary.org-nivel-summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  cursor: pointer;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: var(--panel-2, rgba(127, 127, 127, 0.06));
  list-style: none;
}
details.org-nivel-empresa > summary.org-nivel-summary::-webkit-details-marker { display: none; }
details.org-nivel-empresa > summary.org-nivel-summary::before {
  content: '▸';
  font-size: 0.8rem;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
details.org-nivel-empresa[open] > summary.org-nivel-summary::before { transform: rotate(90deg); }
.org-nivel-summary-titulo { font-weight: 600; }
/* ⚠ `body.shell-modern` pone `text-transform: uppercase !important` sobre buena parte de
 * los rótulos del shell; el nombre de la empresa no es un rótulo. */
body.shell-modern .org-nivel-summary-titulo {
  text-transform: none !important;
  letter-spacing: normal !important;
}
.org-nivel-summary-estado {
  margin-left: auto;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}
.org-nivel-summary-estado[data-tone="ok"] {
  background: color-mix(in srgb, var(--ok, #2e7d32) 14%, transparent);
  color: var(--ok, #2e7d32);
}
details.org-nivel-empresa[open] > summary.org-nivel-summary { margin-bottom: 0.8rem; }

/*
 * Llevar la ficha a sus registros (paso 13, nivel 2). Una fila por **registro destino**,
 * no por campo: los cuatro `stakeholder_*` son una sola decisión. Ver
 * `js/ficha-traslado.js`.
 */
.ficha-traslado {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}
.ficha-traslado[hidden] { display: none !important; }
.ficha-traslado-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.ficha-traslado-head h3 { margin: 0.1rem 0 0.3rem; font-size: 1rem; }
.ficha-traslado-head .hint { margin: 0; max-width: 70ch; }
.ficha-traslado-resumen { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.ficha-traslado-resumen strong { color: var(--text); }
.ficha-traslado-fila {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.ficha-traslado-clausula {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.ficha-traslado-clausula code { font-size: 0.95rem; color: var(--text); }
.ficha-traslado-estado {
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-size: 0.7rem;
}
.ficha-traslado-cuerpo { padding: 0.75rem 0.9rem; min-width: 0; }
.ficha-traslado-cuerpo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.ficha-traslado-cuerpo li { display: grid; gap: 0.1rem; font-size: 0.82rem; }
.ficha-traslado-campo { font-size: 0.72rem; color: var(--text-muted); }
.ficha-traslado-extracto {
  color: var(--text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ficha-traslado-cuerpo .hint { margin: 0.5rem 0 0; font-size: 0.75rem; }
.ficha-traslado-fila > .btn { align-self: center; margin: 0 0.9rem; }
.ficha-traslado-no {
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: var(--surface-2);
}
.ficha-traslado-no ul { margin: 0.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.ficha-traslado-no li { display: grid; gap: 0.1rem; font-size: 0.78rem; }
.ficha-traslado-no li span:last-child { color: var(--text-muted); }
.ficha-traslado-plantilla {
  justify-self: start;
  padding: 0 0.35rem;
  border: 1px dashed var(--border);
  border-radius: 3px;
  font-size: 0.68rem;
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .ficha-traslado-fila { grid-template-columns: 1fr; }
  .ficha-traslado-clausula { border-right: 0; border-bottom: 1px solid var(--border); }
  .ficha-traslado-fila > .btn { margin: 0 0.9rem 0.8rem; justify-self: start; }
}

/* Un campo de la ficha con el párrafo que interpoló el establecimiento. Punteado y no
   rojo: no impide guardar, dice de dónde salió el texto. */
.ficha-plantilla {
  border-style: dashed !important;
  border-color: #b45309 !important;
  background: #fffbf3 !important;
}
.ficha-plantilla-marca { color: #92400e; }


/* ── Tabs de Inicio (Dirección / Postura) ─────────────────────────────────── */
.inicio-tabs {
  display: flex; gap: 2px; padding: 3px;
  background: var(--ig-neutro-bg, #f1f5f9); border-radius: 8px;
  margin-bottom: 1.25rem; width: fit-content;
}
.inicio-tab {
  all: unset; cursor: pointer;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.82rem; font-weight: 500;
  padding: 6px 16px; border-radius: 6px;
  color: var(--ig-tenue, #64748b); transition: all .2s;
  white-space: nowrap;
}
.inicio-tab:hover { color: var(--ig-tinta, #0f172a); }
.inicio-tab.active {
  background: #fff; color: var(--ig-tinta, #0f172a);
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
}
.panel-home .postura-card[hidden] { display: none !important; }

/* ── Inicio · vista de dirección (js/inicio-gerencial.js) ─────────────────────────
   Arriba de la vista operativa del paso 1. Todo estado se dice también por forma y por
   texto. `body.shell-modern` fuerza tamaño y color de todo h2/h3 con !important, así que
   los títulos de acá necesitan el mismo !important para recuperar su forma.

   La paleta es la de «Cristal Claro» (`--orizon-*`), no una cálida propia: esta vista
   convive con el resto del paso 1 y dos grises de fondo distintos en la misma pantalla
   se leen como dos productos. Las dos familias tipográficas ya las carga `index.html`
   —ninguna fuente nueva—: `--ig-display` (Archivo) para los títulos y `--mono`
   (JetBrains Mono, el mismo que ya usan `.ig-hito-avance` y `.ig-expo-n`) para **toda**
   cifra. Que lo medido y lo redactado no compartan tipografía es la diferencia que hace
   legible un «—» al lado de un «47 %». */
.inicio-gerencial {
  --ig-tinta: #0f172a;
  --ig-tenue: #64748b;
  --ig-borde: #e2e8f0;
  --ig-linea: #eef2f7;
  --ig-fondo: #ffffff;
  --ig-panel: #0f172a;
  --ig-panel-tinta: #ffffff;
  --ig-panel-tenue: #94a3b8;
  --ig-azul: #0f766e;
  --ig-critico: #e11d48;
  --ig-critico-bg: #fff1f2;
  --ig-critico-borde: #fecdd3;
  --ig-atencion: #d97706;
  --ig-atencion-bg: #fffbeb;
  --ig-atencion-borde: #fde68a;
  --ig-bien: #059669;
  --ig-bien-bg: #ecfdf5;
  --ig-bien-borde: #a7f3d0;
  --ig-neutro: #64748b;
  --ig-neutro-bg: #f1f5f9;
  --ig-neutro-borde: #e2e8f0;
  --ig-sombra: 0 1px 3px rgba(15,23,42,.03), 0 6px 16px rgba(15,23,42,.04);
  --ig-sombra-hover: 0 2px 8px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.06);
  --ig-display: "Archivo", "DM Sans", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--ig-tinta);
  min-width: 0;
}
.inicio-gerencial[hidden] { display: none !important; }
.inicio-gerencial .ig-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.inicio-gerencial .ig-encabezado {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem;
}
.inicio-gerencial .ig-encabezado-texto { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.inicio-gerencial .ig-marco {
  margin: 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ig-tenue);
}
body.shell-modern .inicio-gerencial .ig-titulo {
  margin: 0; font-family: var(--ig-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem) !important;
  font-weight: 600 !important; color: var(--ig-tinta) !important; line-height: 1.15 !important;
}
body.shell-modern .inicio-gerencial .ig-btn {
  min-height: 44px !important;
  background: #f8fafc !important; color: var(--ig-tinta) !important;
  border: 1px solid #cbd5e1 !important; border-radius: 10px !important;
  font-size: 0.82rem !important; font-weight: 500 !important;
  padding: 0.5rem 1.1rem !important; transition: all .15s;
}
body.shell-modern .inicio-gerencial .ig-btn:hover:not(:disabled) {
  background: #f1f5f9 !important; border-color: #94a3b8 !important;
}
body.shell-modern .inicio-gerencial .ig-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}
body.shell-modern .inicio-gerencial .ig-btn-primary {
  background: #2563eb !important; color: #fff !important;
  border-color: #2563eb !important;
}
body.shell-modern .inicio-gerencial .ig-btn-primary:hover:not(:disabled) {
  background: #1d4ed8 !important; border-color: #1d4ed8 !important;
}
.inicio-gerencial .ig-estado-carga { margin: 0; font-size: 0.9rem; color: var(--ig-tenue); }
.inicio-gerencial .ig-estado-carga:empty { display: none; }
.inicio-gerencial .ig-bloque { display: flex; flex-direction: column; gap: 0.75rem; }
.inicio-gerencial .ig-veredicto {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1rem 1.125rem 1rem calc(1.125rem + 4px); border-radius: 10px;
  background: var(--ig-atencion-bg); color: var(--ig-tinta);
  border: 1px solid var(--ig-atencion-borde); border-left: 4px solid var(--ig-atencion);
  font-size: 0.85rem;
}
.inicio-gerencial .ig-veredicto[data-tono="critico"] {
  background: var(--ig-critico-bg); border-color: var(--ig-critico-borde);
  border-left-color: #dc2626;
}
.inicio-gerencial .ig-veredicto[data-tono="bien"] {
  background: var(--ig-bien-bg); border-color: var(--ig-bien-borde);
  border-left-color: var(--ig-bien);
}
.inicio-gerencial .ig-veredicto[data-tono="neutro"] {
  background: var(--ig-neutro-bg); border-color: var(--ig-neutro-borde);
  border-left-color: var(--ig-neutro);
}
.inicio-gerencial .ig-veredicto[hidden] { display: none !important; }
.inicio-gerencial .ig-veredicto-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
}
body.shell-modern .inicio-gerencial .ig-veredicto-titular {
  margin: 0; font-family: var(--ig-display); font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem) !important;
  font-weight: 600 !important; line-height: 1.3 !important; color: var(--ig-tinta) !important;
  max-width: 54ch; text-wrap: pretty;
}
.inicio-gerencial .ig-veredicto-detalle { margin: 0; color: var(--ig-tenue); max-width: 82ch; line-height: 1.5; }
.inicio-gerencial .ig-veredicto-impacto {
  margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ig-atencion);
}
.inicio-gerencial .ig-veredicto[data-tono="critico"] .ig-veredicto-impacto { color: #dc2626; }
.inicio-gerencial .ig-veredicto[data-tono="bien"] .ig-veredicto-impacto { color: var(--ig-bien); }
.inicio-gerencial .ig-veredicto[data-tono="neutro"] .ig-veredicto-impacto { color: var(--ig-neutro); }
.inicio-gerencial .ig-veredicto .ig-estado-chip { align-self: flex-start; }
body.shell-modern .inicio-gerencial .ig-rotulo {
  margin: 0; font-size: 0.8rem !important; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ig-tenue) !important; font-weight: 600 !important;
}
.inicio-gerencial .ig-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.inicio-gerencial .ig-kpi,
.inicio-gerencial .ig-card {
  background: var(--ig-fondo); border: 1px solid var(--ig-borde); border-radius: 16px;
  padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
  box-shadow: var(--ig-sombra); transition: box-shadow .2s;
  position: relative; overflow: hidden;
}
.inicio-gerencial .ig-kpi:hover,
.inicio-gerencial .ig-card:hover { box-shadow: var(--ig-sombra-hover); }
.inicio-gerencial .ig-kpi::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.inicio-gerencial .ig-kpi[data-tono="critico"]::after { background: var(--ig-critico); }
.inicio-gerencial .ig-kpi[data-tono="atencion"]::after { background: var(--ig-atencion); }
.inicio-gerencial .ig-kpi[data-tono="bien"]::after { background: var(--ig-bien); }
.inicio-gerencial .ig-kpi[data-tono="neutro"]::after { background: var(--ig-neutro); }
.inicio-gerencial .ig-kpi-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
body.shell-modern .inicio-gerencial .ig-kpi-titulo {
  margin: 0; font-size: 0.75rem !important; font-weight: 500 !important; color: var(--ig-tenue) !important;
  text-transform: uppercase; letter-spacing: 0.04em;
}
/* Con los fondos de tono más claros que antes, el chip necesita borde propio: sin él un
   `#fffbeb` sobre blanco no se lee como una pastilla y el estado pierde su forma. */
.inicio-gerencial .ig-estado-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 600;
  padding: 0.2rem 0.65rem; border-radius: 999px; white-space: nowrap;
  background: var(--ig-neutro-bg); color: var(--ig-neutro);
  border: 1px solid var(--ig-neutro-borde);
}
.inicio-gerencial .ig-estado-chip[data-tono="critico"] {
  background: var(--ig-critico-bg); color: var(--ig-critico); border-color: var(--ig-critico-borde);
}
.inicio-gerencial .ig-estado-chip[data-tono="atencion"] {
  background: var(--ig-atencion-bg); color: var(--ig-atencion); border-color: var(--ig-atencion-borde);
}
.inicio-gerencial .ig-estado-chip[data-tono="bien"] {
  background: var(--ig-bien-bg); color: var(--ig-bien); border-color: var(--ig-bien-borde);
}
.inicio-gerencial .ig-kpi-valor {
  margin: 0; font-family: var(--mono); font-size: 1.875rem; line-height: 1.1; font-weight: 700;
  color: var(--ig-tinta); font-variant-numeric: tabular-nums;
}
.inicio-gerencial .ig-kpi-valor.is-vacio { color: #8c96a8; }
.inicio-gerencial .ig-kpi-de {
  font-family: var(--font); font-size: 1.05rem; font-weight: 500; color: var(--ig-tenue, #94a3b8);
}
.inicio-gerencial .ig-kpi-texto,
.inicio-gerencial .ig-nota,
.inicio-gerencial .ig-vacio { margin: 0; font-size: 0.85rem; color: var(--ig-tenue); line-height: 1.45; }
.inicio-gerencial .ig-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.inicio-gerencial .ig-vacio p { margin: 0; }
/* Etapa 3 paridad: enganche al tablero de riesgo /panel desde Exposición al riesgo */
.inicio-gerencial .ig-tablero-link { color: var(--accent, #2563eb); font-weight: 600; text-decoration: none; }
.inicio-gerencial .ig-tablero-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Estado de carga reusable (auditoría UX H3): un esqueleto animado para que la
   espera se lea como carga y no como error. Ver docs/designs/auditoria-ux-2026-10.md.
   Utilitario general: se aplica a cualquier contenedor que espera datos.
   --------------------------------------------------------------------------- */
.gamr-loading { display: grid; gap: 0.5rem; padding: 0.25rem 0; width: 100%; }
.gamr-loading-bar {
  height: 0.75rem;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--border, #e4e8f0) 55%, transparent);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--surface, #fff) 85%, var(--border, #e4e8f0)) 50%,
    transparent 100%);
  background-size: 180% 100%;
  background-repeat: no-repeat;
  animation: gamr-shimmer 1.4s ease-in-out infinite;
}
.gamr-loading-bar.short { width: 55%; }
.gamr-loading-bar.wide { width: 80%; }
@keyframes gamr-shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gamr-loading-bar { animation: none; }
}

/* ---------------------------------------------------------------------------
   Auditoría UX · H1 (lenguaje llano): en los registros de cláusulas del paso 13 el
   nombre en español (h3) manda; el código ISO deja de ser un badge azul prominente y
   queda como una referencia chica y tenue arriba del título. Para el rol cliente —sin
   experiencia en la norma— el código es ruido y se oculta: le quedan el nombre llano y
   la descripción que el registro ya trae. Ver docs/designs/auditoria-ux-2026-10.md.
   --------------------------------------------------------------------------- */
body.shell-modern .sgsi-card .page-hero-eyebrow,
body.shell-modern .foda-card .page-hero-eyebrow {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.8;
}
body.client-portal .sgsi-card .page-hero-eyebrow,
body.client-portal .foda-card .page-hero-eyebrow {
  display: none !important;
}
/* Inicio: la cláusula de cada decisión es referencia para el auditor; chica y tenue, en
   su propia línea. Para el cliente se oculta (también la de la guía de próximos pasos). */
.inicio-gerencial .ig-decision-clausula {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--ig-tenue, var(--text-muted));
  opacity: 0.85;
}
body.client-portal .inicio-gerencial .ig-decision-clausula,
body.client-portal .inicio-gerencial .ig-guia-clausula {
  display: none !important;
}
/* Cabeceras de módulo: para el cliente el código de la norma del título (Anexo A,
   cláusulas 4 a 10) es ruido —el título llano alcanza—. Se oculta solo para el cliente;
   el auditor lo conserva. Los códigos de control de las filas de SoA/Auditorías NO se
   tocan: son IDs funcionales que el usuario necesita para responder. */
body.client-portal .clausula-ref {
  display: none !important;
}
/* Auditoría UX · H2: el índice del SGSI marca por dónde empezar. El primer registro sin
   cargar se resalta como «Empezá acá» para que el no-experto sepa dónde arrancar, en vez
   de mirar once registros iguales sin saber cuál tocar. */
.sgsi-indice-fila.is-next {
  box-shadow: inset 3px 0 0 var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 7%, transparent);
}
.sgsi-indice-next {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
/* Auditoría UX · H4: estados vacíos que enseñan. En vez de una línea seca, un bloque
   centrado que dice cuál es el primer paso, para que un no-experto sepa qué hacer. */
.empty-row.empty-state-teach {
  padding: 1.75rem 1rem;
  text-align: center;
}
.empty-state-teach strong {
  display: block;
  font-size: 0.98rem;
  color: var(--text, #16202e);
  margin-bottom: 0.3rem;
}
.empty-state-teach span {
  display: block;
  max-width: 48ch;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Centro de Confianza (Trust Center) · paridad Secureframe, etapa 1 */
.trust-card header h3 { margin: 0.1rem 0 0.3rem; }
.trust-new-form { margin: 0.75rem 0 0.25rem; }
.trust-check { flex-direction: row; align-items: center; gap: 0.5rem; }
.trust-check input { width: auto; }
.trust-link-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.trust-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.trust-link.is-revoked { opacity: 0.7; }
.trust-link-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.trust-link-url { margin: 0.3rem 0; }
.trust-link-url code { word-break: break-all; }
@media (max-width: 640px) { .trust-link { flex-direction: column; } }

/* Catálogo de riesgos (NIST) · paridad Secureframe etapa 2 */
.sc-catalog-dialog {
  width: min(680px, 94vw);
  max-height: 86vh;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  color: var(--text);
  background: var(--surface);
}
.sc-catalog-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.sc-catalog-head { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem 0.4rem; }
.sc-catalog-head h3 { margin: 0.1rem 0 0.3rem; }
.sc-catalog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.3rem 1.2rem; flex-wrap: wrap; }
.sc-catalog-body { max-height: 52vh; overflow: auto; padding: 0.4rem 1.2rem; }
.sc-catalog-cat { margin-bottom: 0.9rem; }
.sc-catalog-cat h4 { margin: 0.3rem 0; position: sticky; top: 0; background: var(--surface); padding: 0.25rem 0; }
.sc-catalog-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.sc-catalog-item label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.sc-catalog-item input { margin-top: 0.25rem; width: auto; }
.sc-catalog-item-text { display: flex; flex-direction: column; gap: 0.1rem; }
.sc-catalog-item-text small { color: var(--text-muted); font-size: 0.82rem; }
.sc-catalog-item.is-imported { opacity: 0.6; }
.sc-catalog-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.2rem 1rem;
  border-top: 1px solid var(--border);
}

/* Registro de personal · paridad Secureframe etapa 4 */
.personal-summary { margin: 0.5rem 0 0.75rem; }
.personal-table th, .personal-table td { vertical-align: middle; }
.personal-table .personal-ctrl,
.personal-table .personal-pol { text-align: center; }
.personal-table .personal-ctrl input { width: auto; margin: 0; }
.personal-table select { width: auto; }
.personal-table tr.is-offboarded { opacity: 0.6; }
.personal-offb { margin-top: 0.4rem; font-size: 0.8rem; }
.personal-offb summary { cursor: pointer; color: var(--text-muted); }
.personal-offb ul { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.personal-offb label { display: flex; gap: 0.4rem; align-items: center; }
.personal-offb input { width: auto; margin: 0; }

/* Riesgo de proveedores · paridad Secureframe etapa 5 */
.panel-vendors .vendor-check { flex-direction: row; align-items: center; gap: 0.5rem; }
.panel-vendors .vendor-check input { width: auto; }

/* Lectura asistida del informe del proveedor (etapa 5 del roadmap de paridad). La caja y
 * su panel se abren y se cierran con `hidden` desde `js/app.js` y las dos declaran
 * `display: grid`: sin el override quedarían mostrando la lectura del proveedor anterior
 * sobre el formulario del que está abierto. Lo vigila `legacy-hidden-panels.test.ts`. */
.vendor-soc2-ai { display: grid; gap: 0.5rem; padding: 0.6rem 0.7rem; margin-top: 0.6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.vendor-soc2-ai[hidden] { display: none !important; }
.vendor-soc2-ai-head { align-items: flex-start; gap: 0.6rem; }
.vendor-soc2-ai-head .hint { margin: 0.1rem 0 0; }
.vendor-soc2-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.vendor-soc2-controls input[type="file"] { width: auto; font-size: 0.8rem; }
.vendor-soc2-panel { display: grid; gap: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.vendor-soc2-panel[hidden] { display: none !important; }
.vendor-soc2-bar { align-items: flex-start; gap: 0.6rem; }
.vendor-soc2-bar .hint { margin: 0.1rem 0 0; }
.vendor-soc2-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.vendor-soc2-dato { display: grid; gap: 0.25rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.vendor-soc2-dato.is-weak, .vendor-soc2-lista li.is-weak { border-left: 3px solid var(--warn, #d97706); }
.vendor-soc2-dato-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.4rem; }
.vendor-soc2-valor { margin: 0; font-size: 0.86rem; font-weight: 600; }
.vendor-soc2-cita { margin: 0; padding-left: 0.55rem; border-left: 2px solid var(--border); color: var(--text-muted); font-size: 0.76rem; font-style: italic; line-height: 1.4; }
.vendor-soc2-chip { display: inline-block; padding: 0.02rem 0.45rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.74rem; font-weight: 500; background: var(--surface-2); }
.vendor-soc2-flag { flex: none; padding: 0.02rem 0.4rem; border-radius: 999px; font-size: 0.7rem; color: #fff; background: var(--warn, #d97706); }
.vendor-soc2-lista { display: grid; gap: 0.3rem; }
.vendor-soc2-lista h5 { margin: 0; font-size: 0.82rem; }
.vendor-soc2-lista h5 small { font-weight: 400; color: var(--text-muted); }
.vendor-soc2-lista ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.vendor-soc2-lista li { display: grid; gap: 0.2rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 0.84rem; }
.vendor-soc2-avisos { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.15rem; color: var(--warn, #b45309); font-size: 0.8rem; }

/* Cuestionarios de seguridad (paso 23, etapa 6 del roadmap de paridad). El detalle se
 * abre y se cierra con `hidden` desde `js/app.js` y declara `display: grid`: sin el
 * override quedaría mostrando el cuestionario anterior. Lo vigila
 * `legacy-hidden-panels.test.ts`. */
.cq-layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.cq-side { display: grid; gap: 0.4rem; min-width: 0; }
.cq-main { display: grid; gap: 0.8rem; min-width: 0; }
.cq-main[hidden] { display: none !important; }
.cq-lista { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cq-item button { display: grid; gap: 0.15rem; width: 100%; text-align: left; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: inherit; }
.cq-item button:hover { border-color: var(--border-strong, var(--border)); background: var(--surface-2); }
.cq-item.is-sel button { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cq-item-head { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.cq-item small { color: var(--text-muted); font-size: 0.76rem; }
.cq-item-prog { font-variant-numeric: tabular-nums; }
.cq-detalle-head { align-items: flex-start; gap: 0.6rem; }
.cq-detalle-head h3 { margin: 0; }
.cq-detalle-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.cq-detalle-tools input[type="file"] { width: auto; font-size: 0.78rem; }
.cq-ok { color: #047857; font-weight: 600; }
.cq-sec { margin: 0.9rem 0 0.4rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.cq-q { display: grid; gap: 0.45rem; padding: 0.7rem 0.8rem; margin-bottom: 0.5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cq-q-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; }
.cq-q-num { display: inline-block; margin-right: 0.35rem; color: var(--text-muted); font-size: 0.76rem; font-weight: 600; }
.cq-q-text { font-weight: 600; }
.cq-q textarea { width: 100%; box-sizing: border-box; }
.cq-q-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cq-ia { display: grid; gap: 0.4rem; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.cq-ia.is-weak { border-left: 3px solid var(--warn, #d97706); }
.cq-ia-bar { align-items: flex-start; gap: 0.6rem; }
.cq-ia-bar .hint { margin: 0.1rem 0 0; }
.cq-ia-texto { margin: 0; font-size: 0.86rem; line-height: 1.45; }
.cq-flag { padding: 0.02rem 0.4rem; border-radius: 999px; font-size: 0.7rem; color: #fff; background: var(--warn, #d97706); }
.cq-chip { display: inline-block; padding: 0.02rem 0.45rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.74rem; background: var(--surface); }
.cq-avisos { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.15rem; color: var(--warn, #b45309); font-size: 0.8rem; }
.cq-share { display: grid; gap: 0.5rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cq-share h4 { margin: 0; }
.cq-share .hint { margin: 0.1rem 0 0; }
.cq-links { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cq-links li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.cq-links small { display: block; color: var(--text-muted); font-size: 0.76rem; }
.cq-url { font-family: var(--mono, monospace); word-break: break-all; }
@media (max-width: 900px) { .cq-layout { grid-template-columns: 1fr; } }

/* Monitoreo continuo (paso 24, etapas 7a/7b del roadmap de paridad). */
.cx-boveda { display: grid; gap: 0.2rem; padding: 0.7rem 0.8rem; margin-bottom: 0.8rem; border: 1px solid var(--warn, #d97706); border-radius: 10px; background: #fffbeb; }
.cx-boveda .hint { margin: 0; }
.cx-hallazgos, .cx-bloque { display: grid; gap: 0.4rem; margin: 0.8rem 0 1rem; }
.cx-hallazgos h3, .cx-bloque h3 { margin: 0; }
.cx-card { display: grid; gap: 0.7rem; padding: 0.9rem 1rem; margin-bottom: 0.8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cx-card-head { align-items: flex-start; gap: 0.8rem; }
.cx-card-head h3 { margin: 0 0 0.2rem; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.cx-card-head .hint { margin: 0.1rem 0 0; }
.cx-chequeos summary { cursor: pointer; font-size: 0.84rem; font-weight: 600; }
.cx-chequeos ul { display: grid; gap: 0.3rem; margin: 0.4rem 0 0; padding-left: 1.1rem; }
.cx-chequeos li { font-size: 0.84rem; }
.cx-chequeos small { color: var(--text-muted); }
.cx-config textarea, .cx-config input { width: 100%; box-sizing: border-box; }
.cx-resultado { display: grid; gap: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.cx-resultado h4 { margin: 0; }
.cx-checks code, .cx-hallazgos code { font-size: 0.78rem; }
.cx-avisos { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.15rem; color: var(--warn, #b45309); font-size: 0.8rem; }
/* Constancia de la corrida (7c): la medición archivada como evidencia. */
.cx-constancia { align-items: center; gap: 0.8rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); }
.cx-constancia .hint { margin: 0; }
.cx-constancia button { flex: none; }
.cx-propuestas { display: grid; gap: 0.4rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); }
.cx-propuestas h4, .cx-propuestas .hint { margin: 0; }
.cx-propuesta summary { cursor: pointer; font-size: 0.85rem; }
.cx-propuesta .data-table { margin-top: 0.3rem; font-size: 0.8rem; }
/* Cobertura por control: la lista de chequeos va sin viñeta porque cada uno ya lleva su
   pill de estado, y dos marcas por línea compiten entre sí. */
.cx-cobertura td { vertical-align: top; }
.cx-cobertura small { color: var(--text-muted); }
.cx-chequeos-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; font-size: 0.84rem; }
#vendor-table tr.is-archived { opacity: 0.6; }

.inicio-gerencial .ig-grilla {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem; align-items: start;
}
.inicio-gerencial .ig-columna { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.inicio-gerencial .ig-card-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem;
}
body.shell-modern .inicio-gerencial .ig-card-titulo {
  margin: 0; font-family: var(--ig-display); font-size: 0.875rem !important; font-weight: 600 !important;
  color: var(--ig-tinta) !important; line-height: 1.25 !important; letter-spacing: -0.01em;
}
.inicio-gerencial .ig-card-meta { font-size: 0.85rem; color: var(--ig-tenue); }
.inicio-gerencial .ig-decisiones-lista,
.inicio-gerencial .ig-camino,
.inicio-gerencial .ig-auditorias,
.inicio-gerencial .ig-guias-lista,
.inicio-gerencial .ig-expo-leyenda { list-style: none; margin: 0; padding: 0; }
.inicio-gerencial .ig-auditorias li {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0;
  border-top: 1px solid var(--ig-linea);
}
.inicio-gerencial .ig-auditorias li:first-child { border-top: 0; }
.inicio-gerencial .ig-auditorias li[data-indicador="si"] { padding-left: 0.6rem; border-left: 4px solid var(--ig-azul); }
.inicio-gerencial .ig-aud-nombre { font-size: 0.98rem; font-weight: 600; color: var(--ig-tinta); }
.inicio-gerencial .ig-aud-meta { font-family: var(--mono); font-size: 0.8rem; color: var(--ig-tenue); }
.inicio-gerencial .ig-aud-marca { font-size: 0.78rem; color: var(--ig-azul); }
.inicio-gerencial .ig-decision {
  display: flex; align-items: center; gap: 10px;
  padding: 0.7rem 0.5rem; margin-inline: -0.5rem; border-top: 1px solid var(--ig-linea);
  border-radius: 8px; cursor: pointer; transition: background .15s;
}
.inicio-gerencial .ig-decision:last-child { border-bottom: none; }
.inicio-gerencial .ig-decision:hover { background: var(--ig-neutro-bg); }
.inicio-gerencial .ig-decision-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.inicio-gerencial .ig-decision-dot[data-tono="critico"] { background: var(--ig-critico); }
.inicio-gerencial .ig-decision-dot[data-tono="atencion"] { background: var(--ig-atencion); }
.inicio-gerencial .ig-decision-texto { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.inicio-gerencial .ig-decision-texto strong {
  font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inicio-gerencial .ig-decision-texto span { font-size: 0.78rem; color: var(--ig-tenue); }
.inicio-gerencial .ig-decision-go {
  color: var(--ig-tenue); font-size: 1.1rem; flex-shrink: 0; font-weight: 300;
  transition: color .15s;
}
.inicio-gerencial .ig-decision:hover .ig-decision-go { color: var(--ig-azul); }
.inicio-gerencial .ig-decision .ig-btn { min-width: 10rem; justify-content: center; }
/* Timeline horizontal (mockup premium) */
.inicio-gerencial .ig-camino {
  display: flex; align-items: flex-start; overflow-x: auto; padding-bottom: 0.5rem;
  list-style: none; margin: 0; padding-left: 0;
}
.inicio-gerencial .ig-hito {
  display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 80px;
  position: relative; padding-top: 22px; color: var(--ig-tenue);
}
.inicio-gerencial .ig-hito::before {
  content: ''; position: absolute; top: 30px; left: 0; right: 0; height: 2px;
  background: var(--ig-borde);
}
.inicio-gerencial .ig-hito:first-child::before { left: 50%; }
.inicio-gerencial .ig-hito:last-child::before { right: 50%; }
.inicio-gerencial .ig-hito[data-estado="hecho"]::before { background: var(--ig-bien); }
.inicio-gerencial .ig-hito[data-estado="actual"]::before {
  background: linear-gradient(90deg, var(--ig-bien), var(--ig-azul));
}
.inicio-gerencial .ig-hito[data-estado="hecho"],
.inicio-gerencial .ig-hito[data-estado="actual"] { color: var(--ig-tinta); }
.inicio-gerencial .ig-hito-marca {
  width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; overflow: hidden; position: relative; z-index: 1; flex-shrink: 0;
  border: 2px solid var(--ig-borde); background: var(--ig-fondo);
}
.inicio-gerencial .ig-hito[data-estado="hecho"] .ig-hito-marca {
  background: var(--ig-bien); border-color: var(--ig-bien); width: 12px; height: 12px;
}
.inicio-gerencial .ig-hito[data-estado="actual"] .ig-hito-marca {
  border-color: var(--ig-azul); background: var(--ig-azul);
  box-shadow: 0 0 0 4px rgba(15,118,110,.12);
}
.inicio-gerencial .ig-hito-label {
  font-size: 10.5px; color: var(--ig-tenue); text-align: center; margin-top: 8px;
  line-height: 1.3; max-width: 88px;
}
.inicio-gerencial .ig-hito[data-estado="hecho"] .ig-hito-label { color: var(--ig-bien); font-weight: 500; }
.inicio-gerencial .ig-hito[data-estado="actual"] .ig-hito-label { color: var(--ig-azul); font-weight: 600; }
.inicio-gerencial .ig-hito-avance {
  font-family: var(--mono); font-size: 0.7rem; text-align: center; margin-top: 2px; color: var(--ig-tenue);
}
.inicio-gerencial .ig-hito[data-estado="actual"] .ig-hito-avance { color: var(--ig-azul); }
/* En el timeline horizontal el corte se señala por color de la marca, no por fondo. */
.inicio-gerencial .ig-hito[data-corte="si"] .ig-hito-marca {
  border-color: var(--ig-critico); background: var(--ig-critico);
  box-shadow: 0 0 0 4px rgba(225,29,72,.12);
}
.inicio-gerencial .ig-hito[data-corte="si"] .ig-hito-label { color: var(--ig-critico); font-weight: 600; }
.inicio-gerencial .ig-hito-corte { font-size: 0.65rem; color: var(--ig-critico); font-weight: 600; white-space: nowrap; }
.inicio-gerencial .ig-hito .ig-sr { display: none; }
.inicio-gerencial .ig-hito[data-estado="actual"] { background: transparent; }
.inicio-gerencial .ig-hito[data-corte="si"] { background: transparent; }
.inicio-gerencial .ig-expo-total { margin: 0; font-size: 0.85rem; color: var(--ig-tenue); }
.inicio-gerencial .ig-expo-barra {
  display: flex; height: 28px; border-radius: 8px; overflow: hidden; gap: 2px;
  background: var(--ig-neutro-bg);
}
.inicio-gerencial .ig-expo-barra span {
  display: flex; align-items: center; justify-content: center; height: 100%; min-width: 26px; border-radius: 4px;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600; color: #fff;
}
.inicio-gerencial .ig-expo-barra [data-tramo="fuera"] { background: var(--ig-critico); }
.inicio-gerencial .ig-expo-barra [data-tramo="limite"] { background: var(--ig-atencion); }
.inicio-gerencial .ig-expo-barra [data-tramo="tolerable"] { background: var(--ig-bien); }
.inicio-gerencial .ig-expo-leyenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; font-size: 0.85rem; }
.inicio-gerencial .ig-expo-leyenda li { display: flex; flex-direction: column; gap: 0.1rem; color: var(--ig-tenue); padding-left: 0.6rem; border-left: 4px solid; }
.inicio-gerencial .ig-expo-leyenda li[data-tramo="fuera"] { border-left-color: var(--ig-critico); }
.inicio-gerencial .ig-expo-leyenda li[data-tramo="limite"] { border-left-color: var(--ig-atencion); }
.inicio-gerencial .ig-expo-leyenda li[data-tramo="tolerable"] { border-left-color: var(--ig-bien); }
.inicio-gerencial .ig-expo-n { font-family: var(--mono); font-size: 1.1rem; color: var(--ig-tinta); }
.inicio-gerencial .ig-guias-todas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.inicio-gerencial .ig-guia {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start;
  padding: 1rem 0; border-top: 1px solid var(--ig-linea);
}
.inicio-gerencial .ig-guia-cuerpo { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
body.shell-modern .inicio-gerencial .ig-guia-titulo {
  margin: 0; font-size: 1rem !important; font-weight: 600 !important; color: var(--ig-tinta) !important;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.inicio-gerencial .ig-guia-aud,
.inicio-gerencial .ig-guia-estado { margin: 0; font-size: 0.85rem; color: var(--ig-tenue); overflow-wrap: anywhere; }
.inicio-gerencial .ig-guia-pasos { margin: 0.25rem 0 0; padding-left: 1.25rem; font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.25rem; }
.inicio-gerencial .ig-guia-clausula { font-family: var(--mono); font-size: 0.78rem; color: var(--ig-tenue); }
.inicio-gerencial .ig-guia-descargas { display: flex; gap: 0.5rem; }
/* §11 — Reestructuración gerencial en 5 bloques ——————————————————————————
   Bloque 2: Requiere atención (decisiones + plazos + cola + buzón)
   Bloque 3: Auditorías / trazabilidad / exposición en fila
   Bloque 5: Análisis detallado (plegable) */
.ig-atencion { margin-top: 0.5rem; }
.ig-atencion > .ig-card-head { margin-bottom: 0.75rem; }
.ig-atencion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ig-grilla-compacta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
@media (max-width: 900px) { .ig-atencion-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .ig-grilla-compacta { grid-template-columns: minmax(0, 1fr); } }
/* Portadores de dato ocultos */
.home-operativa { margin: 0; padding: 0; border: 0; }
.home-operativa[hidden] { display: none !important; }
#home-analisis { display: flex; flex-direction: column; gap: 1rem; }
#home-analisis[hidden] { display: none !important; }
@media (max-width: 1100px) {
  .inicio-gerencial .ig-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inicio-gerencial .ig-grilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .inicio-gerencial .ig-kpis { grid-template-columns: minmax(0, 1fr); }
  .inicio-gerencial .ig-decision,
  .inicio-gerencial .ig-guia { grid-template-columns: minmax(0, 1fr); }
  .inicio-gerencial .ig-decision .ig-btn,
  .inicio-gerencial .ig-encabezado-acciones,
  .inicio-gerencial .ig-encabezado-acciones .ig-btn { width: 100%; }
  .inicio-gerencial .ig-guia-descargas > .ig-btn,
  .inicio-gerencial .ig-guias-todas > .ig-btn { flex: 1 1 0; }
  .inicio-gerencial .ig-guias-todas { width: 100%; }
  .inicio-gerencial .ig-expo-leyenda { grid-template-columns: minmax(0, 1fr); }
}

/* ── Postura de seguridad (sección de Inicio; antes el tablero aparte `/panel`) ─────────
 * Gráficos SVG + tarjetas con los tokens legacy (`--surface`, `--accent`, `--success`…)
 * para acompañar el tema claro/oscuro del resto de la UI. Render en `js/postura-inicio.js`. */
.postura-head { margin-bottom: 1rem; }
.postura-head h3 { margin: 0.1rem 0 0.35rem; }
.postura-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 1rem; }
.postura-kpi { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 1px 3px rgba(15,23,42,.03), 0 6px 16px rgba(15,23,42,.04); transition: box-shadow .2s; }
.postura-kpi:hover { box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.06); }
.postura-kpi .k-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.postura-kpi .k-value { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 1.875rem; font-weight: 700; color: var(--text); line-height: 1.1; margin-top: 0.3rem; font-variant-numeric: tabular-nums; }
.postura-kpi .k-value .unit { font-size: 1.05rem; color: var(--text-muted); font-weight: 600; }
.postura-kpi .k-cap { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; }
.postura-kpi .k-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.postura-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.postura-panel { border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem 1.2rem; background: var(--surface); box-shadow: 0 1px 3px rgba(15,23,42,.03), 0 6px 16px rgba(15,23,42,.04); }
.postura-panel h4 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.postura-panel .hint { margin: 0 0 0.8rem; }
.postura-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.postura-select { font-family: inherit; font-size: 0.82rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0.3rem 0.5rem; height: 2rem; cursor: pointer; }
.postura-donut-wrap { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.postura-levels { flex: 1; min-width: 12rem; }
.postura-levels-title { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.postura-levels-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.postura-levels-bar > span { display: block; }
.postura-donut { display: grid; place-items: center; }
.postura-donut .center { font-size: 30px; font-weight: 800; fill: var(--text); }
.postura-donut .center-sub { font-size: 11px; font-weight: 600; fill: var(--text-muted); }
.postura-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.9rem; }
.postura-legend .it { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-muted); }
.postura-legend .sw { width: 12px; height: 12px; border-radius: 4px; }
.postura-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface-2); white-space: nowrap; }
.postura-pill.ok { color: var(--success); }
.postura-pill.warn { color: var(--warning); }
.postura-pill.bad { color: var(--danger); }
.postura-pill.info { color: var(--accent); }
.postura-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.postura-fw-row {
  display: flex; align-items: center; gap: 12px;
  padding: 0.75rem 0.9rem; background: var(--surface-2, #f8fafc); border-radius: 10px;
  margin-bottom: 8px;
}
.postura-fw-name { font-size: 0.85rem; font-weight: 600; color: var(--text); min-width: 140px; flex-shrink: 0; }
.postura-fw-sub { color: var(--text-muted); font-size: 0.75rem; }
.postura-fw-status { text-align: right; }
.postura-fw-val {
  font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.85rem; font-weight: 600;
  color: var(--text-secondary, #334155); width: 40px; text-align: right; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.postura-fw-val .na { color: var(--text-muted); font-style: italic; font-weight: 500; font-size: 0.78rem; }
.postura-fw-bar { flex: 1; min-width: 80px; }
.postura-prog { height: 8px; border-radius: 4px; background: var(--border, #e7ebf1); overflow: hidden; }
.postura-prog > span { display: block; height: 100%; border-radius: 4px; background: var(--accent, #0f766e); transition: width 1s cubic-bezier(.4,0,.2,1); }
.postura-prog.na { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, var(--border) 6px, var(--border) 7px); }
.postura-heat-wrap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 0.5rem; }
.postura-heat-ylabel { grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; color: var(--text-muted); font-size: 0.68rem; font-weight: 600; align-self: center; }
.postura-heat-grid { grid-row: 1; grid-column: 2; display: grid; gap: 6px; }
.postura-heat-xlabel { grid-row: 2; grid-column: 2; text-align: center; color: var(--text-muted); font-size: 0.68rem; font-weight: 600; margin-top: 2px; }
.postura-heat-cell { aspect-ratio: 1 / 1; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 1rem; color: #11223a; position: relative; border: 1px solid rgba(15, 23, 42, 0.06); transition: transform .15s, box-shadow .15s; cursor: default; }
.postura-heat-cell:hover { transform: scale(1.06); box-shadow: 0 2px 8px rgba(15,23,42,.12); z-index: 1; }
.postura-heat-cell .zero { color: rgba(17, 34, 58, 0.28); font-weight: 600; }
.postura-heat-cell.is-tol { outline: 2px dashed rgba(220, 38, 38, 0.55); outline-offset: -4px; }
.postura-trend-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.postura-trend-val { font-size: 1.7rem; font-weight: 750; color: var(--text); }
.postura-trend-foot { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.68rem; margin-top: 0.25rem; }
.postura-spark { display: block; }
.postura-spark path.line { fill: none; stroke: var(--accent); stroke-width: 2; }
.postura-spark path.area { fill: var(--accent); opacity: 0.1; stroke: none; }
.postura-empty { color: var(--text-muted); font-size: 0.85rem; padding: 1rem 0; text-align: center; }
@media (max-width: 920px) {
  .postura-kpis { grid-template-columns: repeat(2, 1fr); }
  .postura-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .postura-kpis { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .inicio-gerencial .ig-kpi,
  .inicio-gerencial .ig-card,
  .inicio-gerencial .ig-veredicto,
  .postura-kpi,
  .postura-panel {
    animation: gamr-card-up .45s cubic-bezier(.4,0,.2,1) both;
  }
  .inicio-gerencial .ig-kpi:nth-child(1) { animation-delay: .05s; }
  .inicio-gerencial .ig-kpi:nth-child(2) { animation-delay: .1s; }
  .inicio-gerencial .ig-kpi:nth-child(3) { animation-delay: .15s; }
  .inicio-gerencial .ig-kpi:nth-child(4) { animation-delay: .2s; }
}
@keyframes gamr-card-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sidebar · secciones bien delimitadas y color-coded por dominio ──────────────────
 * Mejora visual del nav lateral (#app-sidebar): cada sección (Núcleo, Riesgos,
 * Cumplimiento, Operación, Administración) se separa con una hairline y su título lleva
 * una marca del color de su dominio (`--dom-*`), el mismo que ya tiñe el grupo activo.
 * Usa los tokens del sidebar (`--sb-line`, `--sb-muted`, `--dom`), así funciona igual en
 * el tema claro (slate) que en el oscuro. El chevron del colapsable sigue a la derecha
 * (ya usa `margin-left:auto`). */
#app-sidebar .nav-group {
  margin: 0 0 0.25rem !important;
  padding: 0.5rem 0 0 !important;
}
body:not(.sidebar-collapsed) #app-sidebar .nav-group + .nav-group {
  margin-top: 0.3rem !important;
  padding-top: 0.65rem !important;
  border-top: 1px solid var(--sb-line) !important;
}
#app-sidebar .nav-group-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0 0.5rem 0.45rem !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  color: var(--sb-muted) !important;
}
#app-sidebar .nav-group-label::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 0.74rem;
  border-radius: 2px;
  background: var(--dom, var(--sb-muted));
}
#app-sidebar .nav-group.is-active .nav-group-label { color: var(--dom) !important; }
#app-sidebar .nav-group.is-active .nav-group-label::before {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dom) 24%, transparent);
}
/* El `hint` del título (p. ej. «ISO 27005») hereda el gris de sección, en minúsculas. */
#app-sidebar .nav-group-label .nav-group-hint { color: var(--sb-muted) !important; font-weight: 600; }

/* Ayuda de búsqueda del Índice Maestro: prefijos de campo clickeables (`code:`, `iso:`…)
 * que se insertan en la caja de texto, y la aclaración de la búsqueda por significado (IA). */
.doc-idx-search-help { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; margin: 0.4rem 0 0; }
.doc-idx-search-help-lead { font-weight: 600; color: var(--text-muted); }
.doc-idx-search-syntax { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.doc-idx-syntax-chip { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.72rem; line-height: 1.5; padding: 0.05rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--accent); cursor: pointer; }
.doc-idx-syntax-chip:hover { border-color: var(--accent); background: var(--surface); }
.doc-idx-search-help-ai { color: var(--text-muted); }
/* La ayuda es una por modo y se alterna con `hidden`: sin el override, `display: flex`
 * de la clase le gana al atributo y se veían las dos a la vez. */
.doc-idx-search-help[hidden] { display: none !important; }

/* Una sola caja de búsqueda, con el modo a la vista. Eran dos cajas lado a lado (texto y
 * significado) y no se sabía cuál estaba filtrando la lista. */
.doc-idx-search { display: flex; align-items: center; gap: 0.35rem; flex: 1 1 22rem; min-width: min(100%, 18rem); flex-wrap: wrap; }
.doc-idx-search .document-search-field { flex: 1 1 13rem; min-width: 10rem; }
.doc-idx-search-modes { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.doc-idx-mode-chip { border: 0; background: transparent; color: var(--text-muted); font-size: 0.74rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; cursor: pointer; }
.doc-idx-mode-chip:hover { color: var(--text); }
.doc-idx-mode-chip.is-active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
/* «Buscar» es del modo significado. Va por clase y no por `hidden` porque el barrido de
 * RBAC escribe `hidden` en los botones con `data-requires-permission`. El `[hidden]`
 * sigue ganando (`body.shell-modern .btn[hidden]` es `!important`), así que un rol sin
 * permiso no lo ve igual. */
.doc-idx-search #evid-lib-semantic-btn { display: none; }
.doc-idx-search.is-significado #evid-lib-semantic-btn { display: inline-flex; }

/* Colas de trabajo del Índice: el conteo y el filtro de cada chip salen de la misma
 * tabla declarada del servidor (`queues`), así que el número y el recorte no pueden
 * decir cosas distintas. */
.doc-idx-queues { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; margin: 0.5rem 0 0; }
.doc-idx-queues[hidden] { display: none !important; }
.doc-idx-queues-lead { font-weight: 600; font-size: 0.78rem; color: var(--text-muted); }
.doc-idx-queue-chip { font-size: 0.76rem; line-height: 1.6; padding: 0.1rem 0.55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.doc-idx-queue-chip:hover { border-color: var(--accent); background: var(--surface); }
.doc-idx-queue-chip strong { color: var(--accent); }
.doc-idx-queue-chip.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.doc-idx-queue-chip.is-active strong { color: inherit; }

/* ── Cambiar la propia contraseña (dock del usuario) ─────────────────── */
/* El disparador vive junto a «Cerrar sesión»: en una columna angosta los dos botones
 * enteros no entran al lado, así que el grupo envuelve en vez de desbordar. */
.sb-user-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sb-user-actions .btn { flex: 1 1 auto; }

.auth-password-modal { max-width: 26rem; width: min(26rem, calc(100vw - 2rem)); }
.auth-password-body { display: grid; gap: 0.6rem; padding: 0.85rem 0.9rem 0.25rem; }
.auth-password-body .field { display: grid; gap: 0.2rem; }
.auth-password-sessions { color: var(--text-muted); }

/* El mensaje del formulario declara `display`, así que necesita el override del
 * atributo: sin él, `hidden` desde JS no lo esconde (autor > user-agent) y el aviso del
 * intento anterior —«La contraseña actual no coincide»— quedaría en pantalla sobre el
 * formulario ya vaciado. Lo vigila `legacy-hidden-panels.test.ts`. */
.auth-password-msg { display: block; margin: 0.15rem 0 0; font-size: 0.8rem; line-height: 1.5; }
.auth-password-msg[hidden] { display: none !important; }
.auth-password-msg.is-error { color: var(--danger, #b42318); }
.auth-password-msg.is-ok { color: var(--success, #067647); }

/* ── Sugerencias de vulnerabilidad del anexo D de ISO 27005 ──────────── */
/* La caja se esconde con `hidden` cuando el activo no declara clase, así que necesita el
 * override del atributo: declara `display: grid` y sin esto quedaría ofreciendo las
 * vulnerabilidades de la clase del escenario anterior. Lo vigila
 * `legacy-hidden-panels.test.ts`. */
.sc-vuln-sugerencias { display: grid; gap: 0.3rem; }
.sc-vuln-sugerencias[hidden] { display: none !important; }
.sc-vuln-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.sc-vuln-controles[hidden] { display: none !important; }
.sc-vuln-chip { font-size: 0.74rem; line-height: 1.6; padding: 0.05rem 0.45rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); }

/* Puntuación propuesta por el LLM local (etapa 2 del roadmap de paridad). La caja y su
 * panel se abren y se cierran con `hidden` desde `js/app.js`, y las dos declaran
 * `display: grid`: sin el override quedarían mostrando la propuesta del escenario
 * anterior sobre el formulario del que está abierto. Lo vigila
 * `legacy-hidden-panels.test.ts`. */
.sc-ai-score { display: grid; gap: 0.5rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.sc-ai-score[hidden] { display: none !important; }
.sc-ai-score-head { align-items: flex-start; gap: 0.6rem; }
.sc-ai-score-head .hint { margin: 0.1rem 0 0; }
.sc-ai-score-panel { display: grid; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.sc-ai-score-panel[hidden] { display: none !important; }
.sc-ai-bar { align-items: flex-start; gap: 0.6rem; }
.sc-ai-bar .hint { margin: 0.1rem 0 0; }
.sc-ai-lados { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sc-ai-lado { display: grid; gap: 0.35rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.sc-ai-lado-head { display: flex; flex-direction: column; gap: 0.1rem; }
.sc-ai-lado-head small { color: var(--text-muted); font-size: 0.76rem; }
.sc-ai-ejes { display: grid; gap: 0.2rem; margin: 0; }
.sc-ai-ejes > div { display: flex; justify-content: space-between; gap: 0.6rem; }
.sc-ai-ejes dt { color: var(--text-muted); font-size: 0.78rem; }
.sc-ai-ejes dd { margin: 0; font-size: 0.82rem; font-weight: 600; text-align: right; }
.sc-ai-nivel { display: inline-block; padding: 0.02rem 0.45rem; border-radius: 999px; font-size: 0.74rem; color: #fff; background: var(--sc-ai-color, var(--text-muted)); }
.sc-ai-just { margin: 0; font-size: 0.84rem; line-height: 1.45; }
.sc-ai-avisos { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.15rem; color: var(--warn, #b45309); font-size: 0.8rem; }