/* ============================================================================
   Tokens de la suite Ciso Virtual — estándar común (00-ESTANDAR-COMUN.md)
   ----------------------------------------------------------------------------
   Valores medidos en el código actual (2026-10-06): Seguimiento@main,
   Control-de-Horas@master, rat@master, assessment_normativo,
   assessment_iso27001_app y assessment_21719 @estandarizacion-visual.
   Los 13 de marca/neutros, --r, los semánticos, los de campo y los de layout
   coinciden al dígito en las siete apps.

   Regla 1: ningún color de marca se escribe fuera de este bloque.
   Regla 2: un token tiene un nombre, y es el mismo en las siete apps.
   ========================================================================== */
:root {
  /* Azules — estructura, cabeceras, texto de marca */
  --navy:       #192F50;
  --navy-mid:   #264168;
  --navy-light: #304F7B;

  /* Naranja / dorado — marca, acción, foco, énfasis */
  --gold:       #FF8300;
  --gold-light: #FFA83D;

  /* Letra sobre cada color de marca (Seguimiento@main). Blanco salvo que la
     empresa elija una marca clara. */
  --navy-on: #fff;
  --gold-on: #fff;

  /* Neutros */
  --cream:   #f5f0e8;
  --cream-2: #efe9de;
  --white:   #fff;
  --gray:    #e8e4dc;
  --gray-2:  #d9d3c7;
  --text:    #1a1a2e;
  --sub:     #5a6070;

  /* Semánticos — letra y filo sobre fondo claro. Los de uso por defecto. */
  --ok:   #1e8449;
  --warn: #d1810c;
  --err:  #c0392b;

  /* Relleno: píldoras, puntos, barras. Nunca como texto. */
  --ok-fill:   #2ecc71;
  --warn-fill: #e67e22;
  --err-fill:  #e74c3c;

  /* Tinte suave de cada estado (fondo de píldora y aviso). */
  --ok-soft:   rgba(46, 204, 113, .12);
  --warn-soft: rgba(230, 126, 34, .12);
  --err-soft:  rgba(231, 76, 60, .10);
  --navy-soft: rgba(25, 47, 80, .07);
  --gold-soft: rgba(255, 131, 0, .14);

  /* Rojo del filo sobre superficie navy, donde --err no contrasta. */
  --err-line: #e74c3c;

  /* Kit de campos de formulario */
  --field-bg:     #fafaf8;
  --field-border: #e8e4dc;
  --field-focus:  var(--gold);

  /* Radios: base 6 · tarjeta 8 · modal 10 · login 16 */
  --r:       6px;
  --r-card:  8px;
  --r-modal: 10px;
  --r-login: 16px;

  /* Sombras de la familia */
  --shadow-card:  0 2px 12px rgba(25, 47, 80, .09);
  --shadow-body:  0 4px 20px rgba(25, 47, 80, .09);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, .45);
  --shadow-login: 0 22px 60px rgba(0, 0, 0, .28);

  /* Layout */
  --header-h: 64px;   /* shell A — Assessment */
  --sb-w:     264px;  /* shell B — Operación, lateral desplegada */
  --sb-w-min: 76px;   /* shell B — lateral contraída (solo iconos) */

  /* Paleta categórica para series de gráficos (Control-de-Horas, OKLCH,
     validada para daltonismo). Tope: 6 series + «Otros». Sin rojos, ámbares
     ni verdes: esos son del semáforo. */
  --c1: #7a53c4;
  --c2: #0ea28f;
  --c3: #aa337a;
  --c4: #4392f7;
  --c5: #006c93;
  --c6: #c867c6;
  --c-otros: #c9c2b4;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ============================================================================
   Componentes de la suite Ciso Virtual
   ----------------------------------------------------------------------------
   Cada bloque cita de dónde sale. Cuando las apps difieren, decide
   00-ESTANDAR-COMUN.md y el valor se toma de la app que lo cumple al dígito.
   Los dos shells usan los mismos nombres de clase (.sidebar, .sb-title…) con
   significados distintos; por eso sus reglas viven bajo .shell-op (B) y
   .shell-as (A). Todo lo demás es global.
   ========================================================================== */

/* ── 1. Base (Seguimiento@main §2) ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
.cv {
  font-family: var(--font);
  background: var(--cream);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.cv :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.cv :where(a) { color: inherit; }
.cv :where(button, input, select, textarea) { font-family: inherit; }

/* Firma tipográfica de la familia: etiquetas, títulos de sección y
   encabezados de tabla. 10px / 700 / MAYÚSCULAS / tracking 1px. */
.lbl, .card-title, .kpi-label, .data-table thead th, .fl > label, .resp-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--sub);
}
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--sub); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ic { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; flex-shrink: 0; }

/* ── 2. Shell B — Operación (Seguimiento@main:221-591) ─────────────────── */
.shell-op { display: flex; min-height: 100vh; }
.shell-op .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sb-w); transition: margin-left .18s ease; }
.shell-op.is-embedded .sidebar { position: absolute; height: 100%; }
.shell-op.is-embedded { position: relative; min-height: 100vh; }
.shell-op .page { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 18px; }
.shell-op .sidebar {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: var(--sb-w); height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 14px 20px;
  background: var(--navy);
  box-shadow: 0 10px 40px rgba(25, 47, 80, .22);
  transition: width .18s ease;
}
.shell-op.sb-collapsed .sidebar { width: var(--sb-w-min); }
.shell-op.sb-collapsed .app-main { margin-left: var(--sb-w-min); }
.shell-op.sb-collapsed .sb-label { display: none; }
.shell-op .sidebar-top { display: flex; align-items: center; gap: 8px; padding: 0 6px 2px; }
.shell-op .sidebar-brand { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; text-decoration: none; white-space: nowrap; }
.shell-op .app-title { font-size: 16px; font-weight: 700; color: var(--navy-on); }
.shell-op .app-title span { color: var(--gold); }
.app-badge { background: var(--gold); color: var(--gold-on); font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 6px 11px; border-radius: 2px; flex-shrink: 0; }
.shell-op.sb-collapsed .app-badge { padding: 6px 8px; letter-spacing: 1px; }
.shell-op .sidebar-toggle { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: color-mix(in srgb, var(--navy-on) 45%, transparent); font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.shell-op .sidebar-toggle:hover { background: var(--navy-mid); color: var(--navy-on); }
.shell-op.sb-collapsed .sidebar-toggle { transform: rotate(180deg); }
.shell-op.sb-collapsed .sidebar-top { flex-direction: column; gap: 10px; padding: 0; }
.shell-op.sb-collapsed .sidebar-brand { flex: 0 0 auto; justify-content: center; }
.shell-op .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.shell-op .sb-title { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 14px 12px 6px; letter-spacing: 2px; color: color-mix(in srgb, var(--navy-on) 34%, transparent); }
.shell-op .sb-title:first-child { padding-top: 0; }
.shell-op .sb-sep { display: none; height: 1px; margin: 10px 8px; background: color-mix(in srgb, var(--navy-on) 9%, transparent); }
.shell-op.sb-collapsed .sb-sep { display: block; }
.shell-op .sidebar-link { position: relative; display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 9px; color: color-mix(in srgb, var(--navy-on) 72%, transparent); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.shell-op .sidebar-link .ic { font-size: 16px; color: color-mix(in srgb, var(--navy-on) 42%, transparent); transition: color .2s; }
.shell-op .sidebar-link:hover { background: color-mix(in srgb, var(--navy-on) 6%, transparent); color: var(--navy-on); }
.shell-op .sidebar-link.active { background: var(--navy-mid); color: var(--navy-on); font-weight: 600; }
.shell-op .sidebar-link.active .ic { color: var(--gold); }
.shell-op .sidebar-link.active::before { content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 3px; height: 26px; border-radius: 0 3px 3px 0; background: var(--gold); }
.shell-op.sb-collapsed .sidebar-link { justify-content: center; padding: 11px 0; }
.shell-op .sidebar-user { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--navy-on) 9%, transparent); }
.shell-op .sb-user-link { display: flex; align-items: center; gap: 11px; padding: 2px 6px; min-width: 0; }
.shell-op .sb-avatar { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--navy-mid); color: var(--navy-on); font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.shell-op .sb-user-text { min-width: 0; display: block; }
.shell-op .sb-org, .shell-op .sb-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-op .sb-org { color: var(--gold); font-size: 12px; font-weight: 700; }
.shell-op .sb-name { color: color-mix(in srgb, var(--navy-on) 72%, transparent); font-size: 11px; }
.shell-op .sb-role { padding: 0 6px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: color-mix(in srgb, var(--navy-on) 40%, transparent); }
.shell-op .sb-role.is-admin { color: var(--gold); }
.shell-op .btn-logout { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; background: transparent; border: 1.5px solid var(--gold); border-radius: 9px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .5px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.shell-op .btn-logout:hover { background: var(--gold); color: var(--gold-on); }
.shell-op.sb-collapsed .btn-logout { padding: 10px 0; }
.shell-op .topbar-mobile { display: none; }
@media (max-width: 800px) {
  .shell-op .sidebar { transform: translateX(-100%); transition: transform .2s ease; width: var(--sb-w); }
  .shell-op.sb-open .sidebar { transform: translateX(0); }
  .shell-op .sidebar-toggle { display: none; }
  .shell-op .app-main, .shell-op.sb-collapsed .app-main { margin-left: 0; }
  .shell-op .topbar-mobile { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; padding: 12px 16px; background: var(--navy); color: var(--navy-on); }
  .shell-op .btn-hamburger { display: flex; border: 0; background: transparent; color: var(--navy-on); font-size: 21px; line-height: 1; padding: 0; cursor: pointer; }
  .shell-op .page { padding: 18px 16px 30px; }
}

/* Barra de página: migas a la izquierda, mandos a la derecha (Seg@main:258-280) */
.page-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 34px; }
.page-top-acts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--sub); min-width: 0; }
.crumbs a { color: var(--sub); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumb-sep { color: var(--gray-2); }
.crumb-current { color: var(--navy); font-weight: 700; }

/* ── 3. Shell A — Assessment (normativo:189-239 + 436-446) ─────────────── */
.shell-as { min-height: 100vh; }
.shell-as .app-header { background: var(--navy); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 20px rgba(0, 0, 0, .4); }
.shell-as .app-header-inner { max-width: 1280px; margin: auto; min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 26px; gap: 16px; }
.shell-as .app-header-left { display: flex; align-items: center; gap: 18px; }
.shell-as .app-brand { display: flex; align-items: center; gap: 14px; }
.shell-as .app-badge { font-size: 12px; }
.shell-as .app-title { font-size: 16px; font-weight: 700; color: var(--navy-on); line-height: 1.2; }
.shell-as .app-title span { color: var(--gold); }
.shell-as .app-meta { font-size: 11px; color: color-mix(in srgb, var(--navy-on) 38%, transparent); margin-top: 1px; }
.shell-as .hdr-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shell-as .prog-wrap { display: flex; align-items: center; gap: 8px; }
.shell-as .prog-lbl { font-size: 12px; color: var(--gold-light); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shell-as .prog-outer { width: 110px; height: 4px; background: color-mix(in srgb, var(--navy-on) 10%, transparent); border-radius: 2px; overflow: hidden; }
.shell-as .prog-inner { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px; transition: width .4s; }
.shell-as .btn-logout { background: color-mix(in srgb, var(--navy-on) 7%, transparent); border: 1px solid color-mix(in srgb, var(--navy-on) 13%, transparent); color: color-mix(in srgb, var(--navy-on) 55%, transparent); font-size: 12px; padding: 6px 11px; border-radius: var(--r); cursor: pointer; transition: all .2s; }
.shell-as .btn-logout:hover { background: color-mix(in srgb, var(--navy-on) 14%, transparent); color: var(--navy-on); }
.shell-as .app-layout { max-width: 1280px; margin: 28px auto; padding: 0 20px; display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; }
.shell-as .sidebar { position: sticky; top: calc(var(--header-h) + 8px); background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 14px 0; overflow-y: auto; max-height: calc(100vh - var(--header-h) - 36px); }
.shell-as .sb-title { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--sub); padding: 0 15px 9px; border-bottom: 1px solid var(--gray); margin-bottom: 5px; }
.shell-as .sb-sep { height: 1px; background: var(--gray); margin: 8px 0; }
.shell-as .nav-item { display: flex; align-items: center; gap: 7px; padding: 7px 15px; cursor: pointer; transition: all .2s; font-size: 12px; font-weight: 500; color: var(--sub); border-left: 3px solid transparent; user-select: none; }
.shell-as .nav-item:hover { background: var(--cream); color: var(--navy); }
.shell-as .nav-item.active { background: rgba(255, 131, 0, .07); color: var(--navy); font-weight: 600; border-left-color: var(--gold); }
.shell-as .nav-item.done .nav-dot { background: var(--ok-fill); }
.shell-as .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray); flex-shrink: 0; transition: background .3s; }
.shell-as .nav-name { font-size: 11px; }
.shell-as .nav-count { margin-left: auto; font-size: 10px; color: var(--sub); background: var(--gray); border-radius: 8px; padding: 1px 5px; font-variant-numeric: tabular-nums; }
.cl-page { max-width: 900px; margin: 28px auto; padding: 0 20px; }
@media (max-width: 800px) {
  .shell-as .app-layout { grid-template-columns: 1fr; }
  .shell-as .sidebar { position: static; display: flex; overflow-x: auto; padding: 0; flex-direction: row; }
  .shell-as .sb-title, .shell-as .sb-sep { display: none; }
  .shell-as .nav-item { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; padding: 10px 12px; flex-shrink: 0; }
  .shell-as .nav-item.active { border-bottom-color: var(--gold); }
}

/* Chip «Nombre · Rol» (assessment_21719 js/app.js:935, CSS L:174-188).
   Vocabulario fijo: viewer=Cliente, auditor=Auditor, admin=Administrador. */
.user-pill { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--navy-on) 8%, transparent); border: none; border-radius: 20px; padding: 6px 13px; font-size: 12px; color: color-mix(in srgb, var(--navy-on) 68%, transparent); cursor: pointer; transition: all .2s; white-space: nowrap; }
.user-pill:hover { background: color-mix(in srgb, var(--navy-on) 16%, transparent); color: var(--navy-on); }
.user-pill.on-light { background: var(--navy-soft); color: var(--navy); }
.user-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok-fill); }
.user-rol { font-weight: 700; color: var(--gold-light); }
.user-pill.on-light .user-rol { color: var(--gold); }

/* ── 4. Login canónico (Seguimiento@main:1045-1074, 683-700) ───────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, var(--navy-light) 100%); }
.login-card { background: var(--white); border-radius: var(--r-login); padding: 34px 30px; width: 100%; max-width: 360px; box-shadow: var(--shadow-login); border: 1px solid rgba(25, 47, 80, .08); }
.l-head { text-align: center; }
.l-logo { display: block; margin: 0 auto 18px; max-width: 170px; max-height: 60px; object-fit: contain; }
.l-badge { display: inline-block; background: var(--gold); color: var(--gold-on); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; }
.l-title { font-size: 21px; font-weight: 800; color: var(--navy); text-align: center; line-height: 1.25; margin: 12px 0 4px; }
.l-sub { font-size: 12px; color: var(--sub); text-align: center; margin-bottom: 24px; }
.login-card .btn-primary { width: 100%; padding: 13px; font-size: 14px; }
.l-divider { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--sub); margin: 18px 0; }
.l-divider::before, .l-divider::after { content: ""; flex: 1; height: 1px; background: var(--gray); }
.oauth-list { display: flex; flex-direction: column; gap: 9px; }
.oauth-list .btn { width: 100%; }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 40px !important; }
.pass-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 4px; color: var(--sub); font-size: 16px; line-height: 1; cursor: pointer; transition: color .2s; }
.pass-toggle:hover { color: var(--navy); }
.otp-input { text-align: center; letter-spacing: 8px; font-size: 21px !important; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 5. Botones (Seguimiento@main:597-632; radio 6 = estándar §6) ──────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .5px; padding: 10px 18px; border-radius: var(--r); border: none; cursor: pointer; text-decoration: none; transition: all .2s; white-space: nowrap; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: var(--navy-on); }
.btn-primary:hover:not(:disabled) { background: var(--navy-mid); }
.btn-next { background: var(--navy); color: var(--navy-on); box-shadow: 0 4px 12px rgba(25, 47, 80, .25); }
.btn-next:hover:not(:disabled) { background: var(--navy-mid); }
.btn-prev { background: var(--white); border: 1.5px solid var(--gray); color: var(--navy); }
.btn-prev:hover:not(:disabled) { border-color: var(--navy); }
.btn-gold { background: var(--gold); color: var(--gold-on); box-shadow: 0 4px 12px rgba(255, 131, 0, .28); }
.btn-gold:hover:not(:disabled) { background: var(--gold-light); }
.btn-ghost { background: transparent; border: 1.5px solid var(--gray); color: var(--sub); }
.btn-ghost:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.btn-ghost-invert { background: none; border: 1.5px solid rgba(255, 255, 255, .4); color: var(--navy-on); }
.btn-ghost-invert:hover:not(:disabled) { border-color: var(--navy-on); background: rgba(255, 255, 255, .08); }
.btn-danger { background: var(--err-soft); color: var(--err); border: 1px solid rgba(231, 76, 60, .3); }
.btn-danger:hover:not(:disabled) { background: var(--err-fill); color: #fff; border-color: var(--err-fill); }
.btn-sm { padding: 6px 12px; font-size: 11px; }
.btn-block { width: 100%; }
.btn-link { background: none; border: 0; padding: 0; color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: .5px; cursor: pointer; text-decoration: none; }
.btn-link:hover { color: var(--gold); }
.nav-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 10px; }

/* ── 6. Formularios (Seguimiento@main:637-713, kit §3.3) ───────────────── */
.fl { margin-bottom: 16px; min-width: 0; }
.fl > label { display: block; margin-bottom: 6px; }
:where(.fl input:not([type=checkbox]):not([type=radio]), .fl select, .fl textarea),
.fl-input, .fl-select, .fl-textarea {
  width: 100%; padding: 11px 13px;
  border: 1.5px solid var(--field-border); border-radius: var(--r);
  font-size: 14px; background-color: var(--field-bg); color: var(--text);
  transition: border-color .2s; font-family: inherit;
}
:where(.fl input, .fl select, .fl textarea):focus,
.fl-input:focus, .fl-select:focus, .fl-textarea:focus { border-color: var(--field-focus); background-color: #fff; outline: none; }
.fl-input:disabled, .fl-select:disabled, .fl-textarea:disabled { opacity: .6; cursor: default; }
:where(.fl select), .fl-select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6070' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px;
}
.fl-select.sm { width: auto; padding: 6px 30px 6px 10px; font-size: 12px; font-weight: 600; background-position: right 10px center; }
.fl-textarea { min-height: 90px; resize: vertical; line-height: 1.5; font-size: 13px; }
.fl.has-error .fl-input, .fl.has-error .fl-select, .fl.has-error .fl-textarea,
.fl.has-error input:not([type=checkbox]):not([type=radio]), .fl.has-error select, .fl.has-error textarea { border-color: var(--err); }
.form-help { font-size: 11px; color: var(--sub); margin-top: 5px; }
.form-error { font-size: 11px; color: var(--err); margin-top: 5px; font-weight: 600; }
.req { color: var(--err); }
.fl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.fl-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; padding: 6px 0; color: var(--text); }
.chk input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--navy); margin: 0; }

/* ── 7. Tarjetas (Seguimiento@main:490-523; radio 8, sombra .09) ───────── */
.card { background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; min-width: 0; }
.card-head { padding: 14px 18px 11px; border-bottom: 1px solid var(--gray); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-title { letter-spacing: 1.5px; }
.card-sub { font-size: 11px; color: var(--sub); margin-top: 4px; font-weight: 400; }
.card-body { padding: 16px 18px; flex: 1; }
.card-body.flush { padding: 0; }
/* Módulo: cabecera navy + cuerpo blanco. Una sola superficie navy por pantalla. */
.module-head { background: var(--navy); border-radius: var(--r-card) var(--r-card) 0 0; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.module-title { font-size: 18px; font-weight: 800; color: var(--navy-on); }
.module-title span { color: var(--gold); }
.module-sub { font-size: 12px; color: color-mix(in srgb, var(--navy-on) 38%, transparent); margin-top: 3px; }
.module-cnt { font-size: 21px; font-weight: 800; color: var(--gold); line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.module-cnt-sub { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: color-mix(in srgb, var(--navy-on) 38%, transparent); text-align: right; margin-top: 3px; }
.module-body { background: var(--white); border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: var(--shadow-body); padding: 20px 22px; }
.module-body.flush { padding: 0; }

/* KPI (Seguimiento@main:851-864) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi-card { background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 15px 18px; border-left: 3px solid transparent; transition: all .2s; }
.kpi-card:hover { box-shadow: 0 4px 16px rgba(25, 47, 80, .13); }
.kpi-card.accent { border-left-color: var(--gold); }
.kpi-card.navy { background: var(--navy); }
.kpi-card.navy .kpi-value { color: var(--gold); }
.kpi-card.navy .kpi-label, .kpi-card.navy .kpi-foot { color: color-mix(in srgb, var(--navy-on) 55%, transparent); border-color: color-mix(in srgb, var(--navy-on) 12%, transparent); }
.kpi-label { margin-bottom: 9px; }
.kpi-value { font-size: 30px; font-weight: 800; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-card.big .kpi-value { font-size: 44px; }
.kpi-foot { font-size: 11px; color: var(--sub); margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--gray); }
.kpi-foot .ok { color: var(--ok); font-weight: 700; }
.kpi-foot .warn { color: var(--warn); font-weight: 700; }
.kpi-foot .err { color: var(--err); font-weight: 700; }

/* ── 8. Tabla densa (Seguimiento .data-table + Control-de-Horas .ajusta,
         tabular-nums y franja de 3px — estándar §6) ──────────────────────── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th { text-align: left; padding: 11px 12px; border-bottom: 2px solid var(--gray); letter-spacing: 1.5px; white-space: nowrap; }
.data-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--gray); vertical-align: middle; color: var(--text); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--cream); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .cen { text-align: center; }
.data-table .ajusta { width: 1%; white-space: nowrap; }
.data-table .fuerte { font-weight: 700; color: var(--navy); }
.data-table .tenue { color: var(--sub); }
.data-table td.marca { position: relative; }
.data-table td.marca::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--marca, transparent); }
.data-table .m-ok { --marca: var(--ok); }
.data-table .m-warn { --marca: var(--warn); }
.data-table .m-err { --marca: var(--err); }
.data-table .m-mute { --marca: var(--gray-2); }
.data-table .m-navy { --marca: var(--navy); }

/* ── 9. Etiquetas y píldoras ───────────────────────────────────────────── */
/* .tag — etiqueta cuadrada en mayúsculas (normativo:254-257, Seg:812) */
.tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: 2px; padding: 3px 7px; background: var(--navy-soft); color: var(--navy-mid); white-space: nowrap; }
.tag-gold { background: var(--gold-soft); color: #7a5c10; }
.tag-ok { background: var(--ok-soft); color: var(--ok); }
.tag-mono { font-family: var(--mono); letter-spacing: 0; text-transform: none; }
/* .pill — píldora de estado redonda (Control-de-Horas:910-933) */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; background: var(--cream-2); color: var(--sub); }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-err { background: var(--err-soft); color: var(--err); }
.pill-navy { background: var(--navy-soft); color: var(--navy); }
.pill-gold { background: rgba(255, 131, 0, .12); color: #a35400; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── 10. Avisos ────────────────────────────────────────────────────────── */
/* Aviso de error: navy con filo rojo. Un solo aspecto en las siete apps
   (.err-box en Seg/rat/normativo; .aviso-error en CdH). Patrón avisoError():
   sin texto no se pinta nada — nunca display:none. */
.err-box { display: flex; gap: 9px; align-items: flex-start; background: var(--navy); border: 1.5px solid var(--err-line); border-radius: var(--r); padding: 11px 14px; color: color-mix(in srgb, var(--navy-on) 85%, transparent); font-size: 12px; line-height: 1.55; text-align: left; }
.err-box > .ic { color: var(--err-line); font-size: 16px; margin-top: 1px; }
.err-box strong { color: var(--navy-on); }
.err-box a { color: var(--gold); }
.err-box ul { margin: 6px 0 0; padding-left: 18px; }
.err-box-acts { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.ok-box { display: flex; gap: 9px; align-items: flex-start; background: #e8f8ef; border: 1px solid rgba(46, 204, 113, .5); border-radius: var(--r); padding: 11px 14px; color: var(--ok); font-size: 12px; font-weight: 600; line-height: 1.55; }
.ok-box > .ic { font-size: 16px; margin-top: 1px; }
.warn-box { display: flex; gap: 9px; align-items: flex-start; background: rgba(230, 126, 34, .08); border: 1px solid rgba(230, 126, 34, .3); border-radius: var(--r); padding: 11px 14px; color: #8a4700; font-size: 12px; line-height: 1.55; }
.warn-box > .ic { font-size: 16px; margin-top: 1px; color: var(--warn); }
.note-box { display: flex; gap: 9px; align-items: flex-start; background: rgba(25, 47, 80, .05); border: 1px solid var(--gray); border-left: 3px solid var(--navy); border-radius: var(--r); padding: 11px 13px; font-size: 12px; line-height: 1.55; color: var(--sub); }
.note-box > .ic { color: var(--navy); margin-top: 1px; font-size: 16px; }

/* Banda de guardado fallido (assessment_iso27001 I:432) + beforeunload */
.save-band { position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; background: var(--err-fill); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-align: center; padding: 10px 16px; box-shadow: 0 -2px 12px rgba(0, 0, 0, .25); }
.save-band.is-inline { position: static; border-radius: var(--r); }

/* Toast (Control-de-Horas:2402-2484). Éxito → toast; fallo de formulario →
   err-box en contexto. Los err no se cierran solos. */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1090; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 40px)); }
.toasts.is-inline { position: static; }
.toast-aviso { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--navy); color: var(--navy-on); border: 2px solid var(--gray-2); border-radius: var(--r-modal); box-shadow: 0 8px 24px rgba(25, 47, 80, .28); font-size: 14px; line-height: 1.45; }
.toast-aviso.ok { border-color: var(--ok); }
.toast-aviso.err { border-color: var(--err); }
.toast-aviso .toast-icono { flex: 0 0 auto; font-size: 18px; line-height: 1.25; }
.toast-aviso.ok .toast-icono { color: #6ddc9b; }
.toast-aviso.err .toast-icono { color: #ff9d92; }
.toast-aviso .toast-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-aviso .toast-cerrar { flex: 0 0 auto; background: none; border: 0; padding: 0; margin: -2px -4px 0 0; font-size: 18px; line-height: 1; color: var(--navy-on); opacity: .65; cursor: pointer; }
.toast-aviso .toast-cerrar:hover { opacity: 1; }

/* ── 11. Estado vacío con salida (estándar §7 #15; CdH .vacio) ─────────── */
.empty-state { padding: 40px 20px; text-align: center; color: var(--sub); font-size: 13px; }
.empty-state .empty-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px dashed var(--gray-2); border-radius: var(--r-modal); color: var(--sub); font-size: 20px; margin-bottom: 12px; }
.empty-state strong { display: block; color: var(--navy); font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.empty-state .btn { margin-top: 14px; }

/* ── 12. Esqueleto de carga (idéntico en las siete apps) ───────────────── */
.sk { pointer-events: none; display: flex; flex-direction: column; gap: 12px; }
.sk-caja { background: var(--white); border: 1px solid var(--gray); border-radius: var(--r); padding: 18px 20px; overflow: hidden; }
.sk-linea { height: 11px; border-radius: 4px; margin-bottom: 12px; background: linear-gradient(90deg, var(--cream-2) 25%, var(--gray) 37%, var(--cream-2) 63%); background-size: 400% 100%; animation: sk-brillo 1.4s ease-in-out infinite; }
.sk-linea:last-child { margin-bottom: 0; }
.sk-linea.es-titulo { height: 15px; margin-bottom: 18px; background: linear-gradient(90deg, var(--gray) 25%, var(--gray-2) 37%, var(--gray) 63%); background-size: 400% 100%; }
@keyframes sk-brillo { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk-linea, .sk-linea.es-titulo { background: var(--gray); animation: none; } }

/* ── 13. Modal (normativo:390-408; 420 / 680 / 760, radio 10) ──────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(25, 47, 80, .65); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.is-inline { position: relative; inset: auto; min-height: 100%; }
.modal-box { background: var(--white); border-radius: var(--r-modal); padding: 32px; width: 100%; max-width: 420px; box-shadow: var(--shadow-modal); max-height: 90vh; overflow-y: auto; }
.modal-box-lg { max-width: 680px; }
.modal-box-xl { max-width: 760px; }
.modal-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.modal-title .ic { color: var(--gold); }
.modal-sub { font-size: 12px; color: var(--sub); margin-bottom: 20px; }
.modal-box .err-box, .modal-box .ok-box, .modal-box .warn-box { border-radius: var(--r-modal); margin-bottom: 12px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ── 14. Anillo de porcentaje (Control-de-Horas:1381-1410; r = 50/π) ───── */
.anillo-wrap { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 54px; height: 54px; }
.anillo-wrap.lg { width: 96px; height: 96px; }
.anillo { width: 100%; height: 100%; grid-area: 1 / 1; }
.anillo circle { fill: none; stroke-width: 4; transform: rotate(-90deg); transform-origin: 50% 50%; }
.anillo .anillo-pista { stroke: var(--cream-2); }
.anillo .anillo-arco { stroke: var(--sub); stroke-linecap: round; }
.anillo .anillo-arco.ok { stroke: var(--ok); }
.anillo .anillo-arco.warn { stroke: var(--warn); }
.anillo .anillo-arco.err { stroke: var(--err); }
.anillo .anillo-arco.gold { stroke: var(--gold); }
.anillo-txt { grid-area: 1 / 1; font-size: 12px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }
.anillo-wrap.lg .anillo-txt { font-size: 21px; font-weight: 800; }
.anillo-txt.ok { color: var(--ok); } .anillo-txt.warn { color: var(--warn); } .anillo-txt.err { color: var(--err); } .anillo-txt.gold { color: var(--navy); }

/* Barra de progreso (iso27001 .nivel-madurez-bar; 21719 .score-mini-bar) */
.bar { height: 6px; background: var(--gray); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; background: var(--navy); transition: width .4s ease; }
.bar-fill.ok { background: var(--ok-fill); } .bar-fill.warn { background: var(--warn-fill); } .bar-fill.err { background: var(--err-fill); } .bar-fill.gold { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }

/* ── 15. Familia assessment — tarjeta de pregunta y selector (nivel 2) ─── */
.q-list { background: var(--white); border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: var(--shadow-body); }
.q-card { padding: 20px 24px; border-bottom: 1px solid var(--gray); background: var(--white); }
.q-card:last-child { border-bottom: 0; }
.q-card > .err-box { margin-bottom: 12px; }
.q-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
.q-num { font-size: 10px; font-weight: 700; color: var(--sub); letter-spacing: 1px; margin-left: auto; }
.q-text { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.5; margin-bottom: 12px; }
.ctrl-meta-block { background: rgba(25, 47, 80, .03); border-left: 3px solid var(--navy-light); border-radius: 0 4px 4px 0; padding: 10px 13px; margin-bottom: 14px; }
.ctrl-meta-row { display: flex; gap: 8px; font-size: 12px; padding: 3px 0; color: var(--text); line-height: 1.5; }
.ctrl-meta-lbl { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--navy-light); white-space: nowrap; min-width: 140px; font-size: 11px; }
.field-group { margin-bottom: 14px; }
.resp-lbl { display: block; margin-bottom: 6px; }
/* Selector de nivel: opciones excluyentes, desmarcables, 4.ª posición.
   Una sola forma bajo tres nombres hoy (.estado-btn / .madurez-btn / .rat-btn). */
.sel-btns { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.sel-btn { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1.5px solid var(--gray); border-radius: var(--r); background: var(--white); font-weight: 700; font-size: 12px; color: var(--sub); cursor: pointer; transition: all .2s; user-select: none; font-family: inherit; }
.sel-btn:hover { border-color: var(--navy); color: var(--navy); background: var(--cream); }
.sel-btn.active { border-color: var(--sel-c, var(--navy)); background: var(--sel-c, var(--navy)); color: var(--sel-ink, #fff); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.sel-btn:disabled { opacity: .45; cursor: default; }
.sel-btn-num { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 4px; background: var(--gray); color: var(--navy); font-size: 11px; font-weight: 800; flex-shrink: 0; transition: all .2s; }
.sel-btn.active .sel-btn-num { background: rgba(255, 255, 255, .25); color: inherit; }
.sel-btns.na-puesto .sel-btn:not(.na-btn) { opacity: .3; pointer-events: none; }
.sel-desc { font-size: 10px; color: var(--sub); min-height: 14px; margin-top: 5px; }
.na-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--err); margin-top: 6px; font-weight: 600; }