/* ════════════════════════════════════════════════════════════════
   Comgrap · Control de Gestión — Dashboard V3
   Portado de comgrap-dashboard-v3.html, scopeado bajo .cgk3 para no
   afectar al theme anfitrión. Solo estilos; sin lógica.
   ════════════════════════════════════════════════════════════════ */

.cgk3 {
  --bg: #fafaf7;
  --bg-elev: #ffffff;
  --bg-soft: #f4f4ed;
  --ink: #14140f;
  --ink-soft: #4a4a42;
  --ink-mute: #8a8a80;
  --line: #ececdf;
  --line-strong: #d9d9c8;
  --accent: #2a3f2f;
  --accent-soft: #e8efe7;
  --ok: #4a7c54;
  --warn: #b88634;
  --crit: #b8492f;
  --info: #5a6f8a;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter Tight', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.cgk3 *, .cgk3 *::before, .cgk3 *::after { box-sizing: border-box; }
.cgk3 h1, .cgk3 h2, .cgk3 h3, .cgk3 p, .cgk3 table { margin: 0; padding: 0; }

/* ── Bootstrap (carga inicial) ── */
.cgk3-boot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 80px 24px; color: var(--ink-mute); font-family: var(--sans); }
.cgk3-boot__spinner { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: cgk3-spin .8s linear infinite; }
@keyframes cgk3-spin { to { transform: rotate(360deg); } }

.cgk3-error { margin: 24px auto; max-width: 720px; padding: 20px; background: rgba(184,73,47,0.06); border: 1px solid rgba(184,73,47,0.25); border-radius: 12px; color: var(--crit); font-family: var(--sans); }

/* ── HEADER ── */
.cgk3 .topbar { border-bottom: 1px solid var(--line); background: var(--bg-elev); position: sticky; top: 0; z-index: 50; }
.cgk3 .topbar-inner { max-width: 1440px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cgk3 .logo { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.cgk3 .logo-mark { width: 38px; height: 38px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: #fff; font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; }
.cgk3 .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.cgk3 .logo-text strong { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.cgk3 .logo-text span { font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.12em; }
.cgk3 nav.main-nav { display: flex; align-items: center; gap: 4px; }
.cgk3 nav.main-nav a { text-decoration: none; color: var(--ink-soft); padding: 10px 18px; font-size: 14px; font-weight: 500; border-radius: 6px; transition: all 0.15s ease; position: relative; cursor: pointer; }
.cgk3 nav.main-nav a:hover { color: var(--ink); background: var(--accent-soft); }
.cgk3 nav.main-nav a.active { color: var(--ink); background: var(--accent-soft); }
.cgk3 nav.main-nav a.active::after { content: ''; position: absolute; bottom: -19px; left: 18px; right: 18px; height: 2px; background: var(--accent); }
.cgk3 nav.main-nav a.nav-newdash { border: 1px solid rgba(0,0,0,.12); margin-left: 8px; }
.cgk3 nav.main-nav a.nav-newdash:hover { background: var(--accent-soft); border-color: var(--accent); }
.cgk3 .nav-pill { margin-left: 6px; background: var(--crit); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 100px; font-family: var(--mono); }
.cgk3 .nav-pill:empty, .cgk3 .nav-pill[data-count="0"] { display: none; }
.cgk3 .user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 100px; font-size: 13px; }
.cgk3 .user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.cgk3 .user-chip .role { font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; }

.cgk3 main { max-width: 1440px; margin: 0 auto; padding: 40px; display: none; }
.cgk3 main.active { display: block; }

.cgk3 .page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; gap: 40px; flex-wrap: wrap; }
.cgk3 .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-mute); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.cgk3 .breadcrumb a { color: var(--ink-mute); text-decoration: none; cursor: pointer; }
.cgk3 .breadcrumb a:hover { color: var(--ink); }
.cgk3 .breadcrumb .sep { color: var(--line-strong); }
.cgk3 .page-header h1 { font-family: var(--serif); font-weight: 400; font-size: 42px; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
.cgk3 .page-header h1 em { font-style: italic; color: var(--ink-mute); font-weight: 300; }
.cgk3 .page-header .subtitle { color: var(--ink-mute); font-size: 14px; margin-top: 8px; }
.cgk3 .period-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; font-size: 12px; color: var(--ink-soft); background: var(--bg-elev); white-space: nowrap; }
.cgk3 .period-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* ── OVERVIEW STRIP ── */
.cgk3 .overview-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 40px; }
.cgk3 .ov-cell { background: var(--bg-elev); padding: 24px; position: relative; }
.cgk3 .ov-cell .ov-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-bottom: 12px; }
.cgk3 .ov-cell .ov-value { font-family: var(--serif); font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.cgk3 .ov-cell .ov-value small { font-size: 16px; color: var(--ink-mute); font-family: var(--mono); }
.cgk3 .ov-cell .ov-foot { font-size: 12px; color: var(--ink-mute); margin-top: 10px; }
.cgk3 .ov-cell .ov-foot.up { color: var(--ok); }
.cgk3 .ov-cell .ov-foot.down { color: var(--crit); }
.cgk3 .ov-cell .accent-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }

/* ── SECTIONS ── */
.cgk3 section { margin-bottom: 44px; }
.cgk3 .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 20px; }
.cgk3 .section-head h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
.cgk3 .area-section-meta { font-size: 12px; color: var(--ink-mute); display: flex; gap: 18px; flex-wrap: wrap; }
.cgk3 .area-section-meta strong { color: var(--ink); font-weight: 500; }

/* ── AREA TABS ── */
.cgk3 .area-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.cgk3 .area-tab { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.cgk3 .area-tab:hover { border-color: var(--line-strong); }
.cgk3 .area-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cgk3 .area-tab .tdot { width: 8px; height: 8px; border-radius: 50%; }
.cgk3 .area-tab .tcount { font-family: var(--mono); font-size: 11px; opacity: .7; }

/* ── FREQUENCY FILTER + TOOLBAR ── */
.cgk3 .kpis-toolbar { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; }
.cgk3 .role-filter-wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cgk3 .role-filter-label { font-size: 12px; font-weight: 600; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; }
.cgk3 .role-filter { background: var(--bg-elev); border: 1px solid var(--line); padding: 7px 32px 7px 14px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink); cursor: pointer; border-radius: 100px; transition: all .15s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23646970' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.cgk3 .role-filter:focus { outline: none; border-color: var(--ink); }

/* Filtro de rol como chips (mismo patrón que las áreas) */
.cgk3 .role-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cgk3 .role-chip { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 100px; padding: 6px 14px; cursor: pointer; transition: all .15s; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.cgk3 .role-chip:hover { border-color: var(--line-strong); }
.cgk3 .role-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Filtro de frecuencia por persona (dentro del acordeón) */
.cgk3 .freq-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.cgk3 .freq-tabs-label { font-size: 11px; font-weight: 600; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.cgk3 .freq-chip { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 100px; padding: 4px 12px; cursor: pointer; transition: all .15s; font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.cgk3 .freq-chip:hover { border-color: var(--line-strong); }
.cgk3 .freq-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cgk3 .kpi-tile.hidden-by-freq { display: none; }

/* ── BUTTONS ── */
.cgk3 .btn { border: none; border-radius: 8px; padding: 9px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: all .15s; display: inline-flex; align-items: center; gap: 7px; }
.cgk3 .btn:disabled { opacity: .55; cursor: default; }
.cgk3 .btn-dark { background: var(--accent); color: #fff; } .cgk3 .btn-dark:hover { background: #1f3024; }
.cgk3 .btn-ghost { background: var(--bg-elev); border: 1px solid var(--line-strong); color: var(--ink); } .cgk3 .btn-ghost:hover { border-color: var(--ink-mute); }
.cgk3 .btn-ia { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-soft); } .cgk3 .btn-ia:hover { border-color: var(--accent); }

/* ── PERSON ACCORDION ── */
.cgk3 .person-acc { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; transition: border-color .2s; }
.cgk3 .person-acc.open { border-color: var(--line-strong); }
.cgk3 .person-acc.hidden-by-filter { display: none; }
.cgk3 .person-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; user-select: none; transition: background .15s; }
.cgk3 .person-head:hover { background: var(--bg-soft); }
.cgk3 .person-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; flex-shrink: 0; font-family: var(--sans); background: var(--bg-soft); color: var(--ink-soft); overflow: hidden; }
.cgk3 .person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cgk3 .person-avatar.green { background: rgba(74,124,84,0.12); color: var(--ok); }
.cgk3 .person-avatar.yellow { background: rgba(184,134,52,0.12); color: var(--warn); }
.cgk3 .person-avatar.red { background: rgba(184,73,47,0.12); color: var(--crit); }
.cgk3 .person-meta { flex: 1; min-width: 0; }
.cgk3 .person-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.cgk3 .person-role { font-size: 12px; color: var(--ink-mute); margin-top: 1px; }
.cgk3 .person-summary { display: flex; gap: 8px; align-items: center; }
.cgk3 .sem-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; font-family: var(--mono); }
.cgk3 .sem-chip .d { width: 7px; height: 7px; border-radius: 50%; }
.cgk3 .sem-chip.green { background: rgba(74,124,84,0.10); color: var(--ok); } .cgk3 .sem-chip.green .d { background: var(--ok); }
.cgk3 .sem-chip.yellow { background: rgba(184,134,52,0.12); color: var(--warn); } .cgk3 .sem-chip.yellow .d { background: var(--warn); }
.cgk3 .sem-chip.red { background: rgba(184,73,47,0.10); color: var(--crit); } .cgk3 .sem-chip.red .d { background: var(--crit); }
.cgk3 .sem-chip.gray { background: var(--bg-soft); color: var(--ink-mute); } .cgk3 .sem-chip.gray .d { background: var(--ink-mute); }
.cgk3 .person-chevron { width: 20px; height: 20px; color: var(--ink-mute); transition: transform .25s; flex-shrink: 0; }
.cgk3 .person-acc.open .person-chevron { transform: rotate(180deg); }
.cgk3 .person-body { display: none; padding: 0 22px 22px; border-top: 1px solid var(--line); }
.cgk3 .person-acc.open .person-body { display: block; animation: cgk3-slideDown .25s ease; }
@keyframes cgk3-slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cgk3 .person-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.cgk3 .btn-ghost.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ── GRÁFICO DE KPIs POR PERSONA ── */
.cgk3 .kpi-chart { margin-top: 16px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 18px; animation: cgk3-slideDown .18s ease; }
.cgk3 .kpi-chart.is-empty { color: var(--ink-mute); font-size: 13px; }
.cgk3 .kpi-chart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cgk3 .kpi-chart__title { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.cgk3 .kpi-chart__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cgk3 .kpi-chart-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cgk3 .kpi-chart-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.cgk3 .kpi-chart-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cgk3 .kpi-chart-card__name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.cgk3 .kpi-chart-card__src { flex-shrink: 0; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); background: var(--bg-soft); padding: 2px 7px; border-radius: 100px; }
.cgk3 .kpi-chart-card__val { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1.1; }
.cgk3 .kpi-chart-card__meta { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 10px; font-size: 11px; color: var(--ink-mute); font-family: var(--mono); }
.cgk3 .kpi-chart-card__track { width: 100%; height: 7px; background: var(--bg-soft); border-radius: 100px; overflow: hidden; }
.cgk3 .kpi-chart-card__fill { height: 100%; border-radius: 100px; transition: width .3s ease; }
.cgk3 .kpi-chart-card__foot { margin-top: 8px; font-size: 11px; font-weight: 600; }
.cgk3 .kpi-chart-bars { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cgk3 .kpi-chart-bars__title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.cgk3 .kpi-chart-bar { display: grid; grid-template-columns: 160px 1fr 76px; align-items: center; gap: 10px; margin-bottom: 8px; }
.cgk3 .kpi-chart-bar__label { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgk3 .kpi-chart-bar__track { height: 18px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.cgk3 .kpi-chart-bar__fill { display: block; height: 100%; border-radius: 6px 0 0 6px; transition: width .3s ease; }
.cgk3 .kpi-chart-bar__value { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); text-align: right; }
@media (max-width: 640px) { .cgk3 .kpi-chart-bar { grid-template-columns: 110px 1fr 60px; } }
.cgk3 .kpi-chart-pies { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cgk3 .kpi-chart-pies__title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.cgk3 .kpi-chart-pies__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 18px 12px; }
.cgk3 .kpi-pie { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.cgk3 .kpi-pie__disc { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; }
.cgk3 .kpi-pie__hole { width: 60px; height: 60px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; }
.cgk3 .kpi-pie__pct { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.cgk3 .kpi-pie__label { font-size: 12px; color: var(--ink-soft); line-height: 1.3; max-width: 132px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cgk3 .kpi-pie__val { font-family: var(--mono); font-size: 12px; font-weight: 600; }

/* ── KPI TILES ── */
.cgk3 .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.cgk3 .kpi-tile { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 18px; position: relative; transition: all 0.2s; cursor: pointer; }
.cgk3 .kpi-tile:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.cgk3 .kpi-tile.hidden-by-filter { display: none; }
.cgk3 .kpi-tile .kpi-status { position: absolute; top: 18px; right: 18px; width: 8px; height: 8px; border-radius: 50%; }
.cgk3 .kpi-status.green { background: var(--ok); box-shadow: 0 0 0 3px rgba(74,124,84,0.18); }
.cgk3 .kpi-status.yellow { background: var(--warn); box-shadow: 0 0 0 3px rgba(184,134,52,0.18); }
.cgk3 .kpi-status.red { background: var(--crit); box-shadow: 0 0 0 3px rgba(184,73,47,0.18); }
.cgk3 .kpi-status.gray { background: var(--ink-mute); box-shadow: 0 0 0 3px rgba(138,138,128,0.18); }
.cgk3 .kpi-freq { display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); background: var(--bg-soft); padding: 2px 6px; border-radius: 3px; margin-bottom: 10px; font-family: var(--mono); }
.cgk3 .kpi-tile .kpi-name { font-size: 17px; font-weight: 500; color: var(--ink-soft); margin-bottom: 12px; padding-right: 22px; }
.cgk3 .kpi-week-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-mute); max-width: 720px; line-height: 1.45; }
.cgk3 .kpi-week-note strong { color: var(--ink-soft); font-weight: 600; }
.cgk3 .kpi-tile .kpi-info { display: inline-block; margin-left: 5px; color: var(--ink-mute); font-size: 12px; line-height: 1; cursor: help; vertical-align: baseline; opacity: .7; transition: opacity .15s ease, color .15s ease; }
.cgk3 .kpi-tile .kpi-info:hover, .cgk3 .kpi-tile .kpi-info:focus { opacity: 1; color: var(--ink-soft); outline: none; }
.cgk3 .kpi-numbers { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cgk3 .kpi-actual { font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.cgk3 .kpi-target { font-size: 11px; color: var(--ink-mute); font-family: var(--mono); }
.cgk3 .kpi-progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.cgk3 .kpi-progress-bar { height: 100%; border-radius: 2px; }
.cgk3 .kpi-progress-bar.green { background: var(--ok); } .cgk3 .kpi-progress-bar.yellow { background: var(--warn); } .cgk3 .kpi-progress-bar.red { background: var(--crit); } .cgk3 .kpi-progress-bar.gray { background: var(--ink-mute); }
.cgk3 .kpi-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; gap: 8px; }
.cgk3 .kpi-trend { font-family: var(--mono); color: var(--ink-mute); } .cgk3 .kpi-trend.up { color: var(--ok); } .cgk3 .kpi-trend.down { color: var(--crit); }
.cgk3 .kpi-alert-tag { font-family: var(--mono); font-size: 10px; text-align: right; }
.cgk3 .kpi-alert-tag.crit { color: var(--crit); } .cgk3 .kpi-alert-tag.warn { color: var(--warn); } .cgk3 .kpi-alert-tag.none { color: var(--ink-mute); font-style: italic; }
.cgk3 .kpi-tile.no-data { opacity: .6; }
.cgk3 .kpi-tile.expanded { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ── Ojo: ir a la página completa del KPI ── */
.cgk3 .kpi-eye { position: absolute; top: 12px; right: 32px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: none; background: transparent; color: var(--ink-mute); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; border-radius: 6px; }
.cgk3 .kpi-tile:hover .kpi-eye, .cgk3 .kpi-tile.expanded .kpi-eye { opacity: .6; }
.cgk3 .kpi-eye:hover { opacity: 1; color: var(--accent); background: var(--accent-soft); }

/* ── Drawer inline con el detalle del cálculo ── */
.cgk3 .kpi-drawer { grid-column: 1 / -1; position: relative; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px; padding: 20px 22px; margin-top: 2px; animation: cgk3-slideDown .22s ease; }
.cgk3 .kpi-drawer-close { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border: none; background: transparent; color: var(--ink-mute); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 6px; }
.cgk3 .kpi-drawer-close:hover { background: var(--bg-soft); color: var(--ink); }
.cgk3 .kpi-drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-right: 36px; }
.cgk3 .kpi-drawer-head .kpi-status { position: static; }
.cgk3 .kpi-drawer-head strong { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: -0.01em; }
.cgk3 .kpi-drawer-full { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 100px; background: var(--bg-elev); color: var(--ink-soft); font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cgk3 .kpi-drawer-full:hover { border-color: var(--accent); color: var(--accent); }
.cgk3 .kd-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cgk3 .kd-metric { display: flex; flex-direction: column; gap: 6px; }
.cgk3 .kd-metric .kd-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); }
.cgk3 .kd-metric .kd-value { font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1; }
.cgk3 .kd-status-line { font-size: 12px; color: var(--ink-mute); margin-bottom: 4px; }
.cgk3 .kd-section { margin-top: 18px; }
.cgk3 .kd-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-bottom: 8px; }
.cgk3 .kd-text { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.cgk3 .kd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cgk3 .kd-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); }
.cgk3 .kd-table td:first-child { color: var(--ink-mute); }
.cgk3 .kd-table-wrap { overflow-x: auto; }
.cgk3 .kd-table--grid th { padding: 7px 10px; border-bottom: 1px solid var(--line-strong); text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); white-space: nowrap; }
.cgk3 .kd-table--grid td { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
@media (max-width: 1100px) { .cgk3 .kd-top { grid-template-columns: repeat(2, 1fr); } }

/* ── Full-bleed SOLO del fondo: el wrapper rompe el ancho del theme para que el
   background ocupe todo el ancho, pero el contenido (topbar-inner y main) mantiene
   su max-width centrado → márgenes a los lados, como el mockup.
   Márgenes negativos (sin overflow ni width:100vw) para no romper el sticky. */
.cgk3 { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Header sin fondo distinto: se funde con el canvas. Mantiene color sólido (no
   transparente) para que el sticky no deje ver el contenido al hacer scroll. */
.cgk3 .topbar { background: var(--bg); }

/* ── Logo de Comgrap en el header ── */
.cgk3 .logo-img { height: 36px; width: auto; display: block; }

/* ── Filtros de "KPIs en riesgo" ── */
.cgk3 .alert-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.cgk3 .alert-filter { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-family: var(--sans); font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.cgk3 .alert-filter:focus { outline: none; border-color: var(--accent); }
.cgk3 .alert-filter-clear { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); padding: 8px 4px; }
.cgk3 .alert-filter-clear:hover { text-decoration: underline; }

/* ── ALERT BANNER ── */
.cgk3 .alert-banner { display: flex; align-items: center; gap: 16px; background: rgba(184,73,47,0.06); border: 1px solid rgba(184,73,47,0.25); border-left: 3px solid var(--crit); border-radius: 12px; padding: 18px 22px; margin-bottom: 36px; }
.cgk3 .alert-banner-ico { width: 40px; height: 40px; border-radius: 10px; background: rgba(184,73,47,0.12); display: grid; place-items: center; flex-shrink: 0; }
.cgk3 .alert-banner h3 { font-size: 15px; color: var(--crit); font-weight: 600; }
.cgk3 .alert-banner p { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

/* ── AREA CARDS (home) ── */
.cgk3 .area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cgk3 .area-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 22px; cursor: pointer; transition: all .2s; }
.cgk3 .area-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.cgk3 .area-card h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; margin-bottom: 14px; }
.cgk3 .area-stat-row { display: flex; gap: 8px; margin-bottom: 14px; }
.cgk3 .area-mini { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.cgk3 .health-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: flex; }
.cgk3 .health-bar .seg { height: 100%; }
.cgk3 .health-bar .seg.g { background: var(--ok); } .cgk3 .health-bar .seg.y { background: var(--warn); } .cgk3 .health-bar .seg.r { background: var(--crit); }

/* ── OKR ── */
.cgk3 .okr-placeholder-note { display: flex; align-items: center; gap: 10px; background: rgba(184,134,52,0.08); border: 1px solid rgba(184,134,52,0.3); border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; font-size: 12.5px; color: var(--ink-soft); }
.cgk3 .okr-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-bottom: 16px; }
.cgk3 .okr-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.cgk3 .okr-num { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-family: var(--serif); font-size: 19px; flex-shrink: 0; }
.cgk3 .okr-title { font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: -0.01em; }
.cgk3 .okr-sub { font-size: 12px; color: var(--ink-mute); margin-top: 3px; }
.cgk3 .okr-pct { margin-left: auto; text-align: right; flex-shrink: 0; }
.cgk3 .okr-pct .big { font-family: var(--serif); font-size: 30px; font-weight: 300; line-height: 1; }
.cgk3 .kr { padding: 14px 0; border-top: 1px solid var(--line); }
.cgk3 .kr-head { display: flex; justify-content: space-between; margin-bottom: 9px; gap: 12px; }
.cgk3 .kr-title { font-size: 13px; } .cgk3 .kr-val { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.cgk3 .kr-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.cgk3 .kr-fill { height: 100%; border-radius: 3px; }
/* OKRs por área (datos reales) */
.cgk3 .okr-area-section { margin-bottom: 40px; }
.cgk3 .okr-area-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cgk3 .okr-partial { font-size: 11.5px; color: var(--warn); background: rgba(184,134,52,0.08); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }
.cgk3 .kr-missing { opacity: 0.92; }
.cgk3 .kr-missing-tag { color: var(--ink-mute); font-style: italic; }
.cgk3 .kr-missing-reason { font-size: 11.5px; color: var(--ink-mute); background: var(--bg-soft); border-radius: 8px; padding: 6px 10px; }
/* OKR: desplegable con detalle de la medición */
.cgk3 .okr-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); color: var(--ink-soft); font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
.cgk3 .okr-toggle:hover { background: var(--bg-elev); color: var(--ink); }
.cgk3 .okr-chevron { transition: transform 0.18s ease; }
.cgk3 .okr-card.okr-open .okr-chevron { transform: rotate(180deg); }
.cgk3 .okr-detail { display: none; margin-top: 16px; padding-top: 8px; border-top: 1px dashed var(--line); }
.cgk3 .okr-card.okr-open .okr-detail { display: block; }
.cgk3 .okr-contrib { margin-top: 14px; }
.cgk3 .okr-contrib-head { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; }
.cgk3 .okr-contrib-fn { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); }
.cgk3 .okr-contrib-empty { font-size: 12px; color: var(--ink-mute); font-style: italic; padding: 4px 0 8px; }
.cgk3 .okr-contrib-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cgk3 .okr-contrib-table th { text-align: left; font-weight: 600; color: var(--ink-mute); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.cgk3 .okr-contrib-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.cgk3 .okr-contrib-table td:nth-child(3), .cgk3 .okr-contrib-table td:nth-child(4) { font-family: var(--mono); }
.cgk3 .kpi-area-badge { display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 1px 6px; vertical-align: middle; margin-left: 4px; }
/* OKR: selector de trimestre */
.cgk3 .okr-quarter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.cgk3 .okr-quarter-lbl { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }
.cgk3 .okr-quarter-btn { padding: 6px 14px; border: 1px solid var(--line); border-radius: 100px; background: var(--bg-elev); color: var(--ink-soft); font-family: var(--mono); font-size: 12px; cursor: pointer; }
.cgk3 .okr-quarter-btn:hover { border-color: var(--accent); color: var(--ink); }
.cgk3 .okr-quarter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cgk3 .okr-quarter-btn[data-pending] { opacity: 0.6; }
.cgk3 .okr-quarter-note { font-size: 12px; color: var(--ink-mute); font-style: italic; }

/* ── DETAIL VIEW ── */
.cgk3 .detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 32px; margin-bottom: 40px; }
.cgk3 .detail-main, .cgk3 .users-panel { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 28px; }
.cgk3 .users-panel { padding: 24px; height: fit-content; }
.cgk3 .detail-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.cgk3 .detail-summary-cell .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-bottom: 8px; }
.cgk3 .detail-summary-cell .value { font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1; }
.cgk3 .detail-summary-cell .value small { font-size: 12px; color: var(--ink-mute); font-family: var(--mono); margin-left: 4px; }
.cgk3 .users-panel h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; margin-bottom: 4px; }
.cgk3 .users-panel .panel-sub { font-size: 12px; color: var(--ink-mute); margin-bottom: 20px; }
.cgk3 .user-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cgk3 .user-row:last-child { border-bottom: none; }
.cgk3 .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-soft); color: var(--ink-soft); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.cgk3 .user-avatar.green { background: rgba(74,124,84,0.12); color: var(--ok); }
.cgk3 .user-avatar.yellow { background: rgba(184,134,52,0.12); color: var(--warn); }
.cgk3 .user-avatar.red { background: rgba(184,73,47,0.12); color: var(--crit); }
.cgk3 .user-info { flex: 1; min-width: 0; }
.cgk3 .user-name { font-size: 13px; font-weight: 500; }
.cgk3 .user-role { font-size: 11px; color: var(--ink-mute); }
.cgk3 .user-performance { text-align: right; }
.cgk3 .user-performance .perf-value { font-family: var(--serif); font-size: 18px; }
.cgk3 .detail-history { margin-top: 8px; }
.cgk3 .history-spark { display: flex; align-items: flex-end; gap: 6px; height: 90px; padding: 12px 0; }
.cgk3 .history-spark .bar { flex: 1; background: var(--accent-soft); border-radius: 3px 3px 0 0; min-height: 4px; position: relative; }
.cgk3 .history-spark .bar span { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 9px; color: var(--ink-mute); }
.cgk3 .history-spark .bar small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 9px; color: var(--ink-mute); }

/* ── ALERT LOG TABLE ── */
.cgk3 .alert-log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cgk3 .alert-log-table th { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-strong); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); font-weight: 600; }
.cgk3 .alert-log-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cgk3 .alert-log-table tr:hover td { background: var(--bg-soft); }
.cgk3 .alert-log-table .col-date { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.cgk3 .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.cgk3 .badge.gestionada { background: rgba(74,124,84,0.10); color: var(--ok); }
.cgk3 .badge.pendiente { background: rgba(184,134,52,0.12); color: var(--warn); }
.cgk3 .badge.vencida { background: rgba(184,73,47,0.10); color: var(--crit); }
.cgk3 .empty-state { padding: 40px; text-align: center; color: var(--ink-mute); font-size: 13px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; }

/* ── ALERTAS CONFIGURADAS ── */
.cgk3 .alert-config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cgk3 .alert-config-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.cgk3 .alert-config-card .acc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cgk3 .alert-config-card .acc-title { font-family: var(--serif); font-size: 17px; font-weight: 400; letter-spacing: -0.01em; }
.cgk3 .alert-config-card .acc-meta { font-size: 12px; color: var(--ink-mute); font-family: var(--mono); }
.cgk3 .alert-config-card .acc-next { margin-top: 12px; font-size: 13px; color: var(--ink); }
.cgk3 .alert-config-card .acc-next-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); display: block; margin-bottom: 2px; }
.cgk3 .alert-config-card .acc-tz { color: var(--ink-mute); font-size: 11px; }
.cgk3 .alert-config-card .acc-users { margin-top: 10px; font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── IA REPORT PANEL ── */
.cgk3 .ia-report { margin-top: 16px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap; }
.cgk3 .ia-report__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cgk3 .ia-report__title { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.cgk3 .ia-report__model { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); }
.cgk3 .ia-report.is-error { background: rgba(184,73,47,0.06); border-color: rgba(184,73,47,0.25); color: var(--crit); }

@media (max-width: 1100px) {
  .cgk3 .overview-strip, .cgk3 .detail-summary { grid-template-columns: repeat(2, 1fr); }
  .cgk3 .kpi-row { grid-template-columns: 1fr 1fr; }
  .cgk3 .detail-grid, .cgk3 .area-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cgk3 .topbar-inner { flex-wrap: wrap; gap: 14px; }
  .cgk3 main { padding: 24px; }
  .cgk3 .kpi-row { grid-template-columns: 1fr; }
  .cgk3 .page-header h1 { font-size: 32px; }
}

/* ── Sub-tabs de la vista Alertas (KPIs en riesgo / Mis reportes) ── */
.cgk3 .alert-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin: 8px 0 24px; }
.cgk3 .alert-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 6px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-mute); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color .15s; }
.cgk3 .alert-tab:hover { color: var(--ink-soft); }
.cgk3 .alert-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.cgk3 .alert-tab-count { font-family: var(--mono); font-size: 11px; font-weight: 700; background: var(--bg-soft); color: var(--ink-mute); padding: 1px 8px; border-radius: 100px; }
.cgk3 .alert-tab-count.accent { background: var(--crit); color: #fff; }

/* ── Celda de seguimiento + badges de estado de reporte ── */
.cgk3 .rep-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono); white-space: nowrap; }
.cgk3 .rep-badge.none { background: var(--bg-soft); color: var(--ink-mute); }
.cgk3 .rep-badge.open { background: rgba(184,134,52,0.12); color: var(--warn); }
.cgk3 .rep-badge.solved { background: rgba(74,124,84,0.10); color: var(--ok); }
.cgk3 .rep-action { margin-left: 8px; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 100px; padding: 4px 12px; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: all .15s; white-space: nowrap; }
.cgk3 .rep-action:hover { border-color: var(--accent); color: var(--accent); }
.cgk3 .rep-action.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cgk3 .rep-action.primary:hover { background: #1f3024; }

/* ── Tarjetas "Mis reportes" ── */
.cgk3 .report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cgk3 .report-card { text-align: left; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 18px; cursor: pointer; font-family: var(--sans); transition: all .15s; display: flex; flex-direction: column; gap: 8px; }
.cgk3 .report-card:hover { border-color: var(--line-strong); box-shadow: 0 4px 14px rgba(20,20,15,0.05); }
.cgk3 .report-card .rc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cgk3 .report-card .rc-date { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); }
.cgk3 .report-card .rc-title { font-family: var(--serif); font-size: 17px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.cgk3 .report-card .rc-meta { font-size: 12px; color: var(--ink-mute); font-family: var(--mono); }
.cgk3 .report-card .rc-foot { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

/* ── Popup / modal de reporte ── */
.cgk3-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,15,0.42); display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow-y: auto; }
.cgk3-modal-overlay[hidden] { display: none; }
.cgk3-modal { position: relative; width: 100%; max-width: 560px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 28px; font-family: var(--sans); box-shadow: 0 20px 60px rgba(20,20,15,0.25); }
.cgk3-modal-x { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--ink-mute); cursor: pointer; padding: 0 4px; }
.cgk3-modal-x:hover { color: var(--ink); }
.cgk3-modal .rep-modal-head { padding-right: 28px; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px; }
.cgk3-modal .rep-modal-kpi { display: flex; align-items: center; gap: 9px; }
.cgk3-modal .rep-modal-kpi h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; }
.cgk3-modal .sem-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-mute); flex-shrink: 0; }
.cgk3-modal .sem-dot.green { background: var(--ok); }
.cgk3-modal .sem-dot.yellow { background: var(--warn); }
.cgk3-modal .sem-dot.red { background: var(--crit); }
.cgk3-modal .rep-modal-sub { font-size: 12px; color: var(--ink-mute); font-family: var(--mono); margin-top: 4px; }
.cgk3-modal .rep-modal-figures { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.cgk3-modal .rep-modal-figures span { display: flex; flex-direction: column; gap: 2px; }
.cgk3-modal .rep-modal-figures label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); }
.cgk3-modal .rep-modal-progress { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cgk3-modal .rep-progress-track { flex: 1; height: 6px; background: var(--bg-soft); border-radius: 100px; overflow: hidden; }
.cgk3-modal .rep-progress-bar { height: 100%; border-radius: 100px; background: var(--ink-mute); transition: width .3s; }
.cgk3-modal .rep-progress-bar.green { background: var(--ok); }
.cgk3-modal .rep-progress-bar.yellow { background: var(--warn); }
.cgk3-modal .rep-progress-bar.red { background: var(--crit); }
.cgk3-modal .rep-progress-bar.gray { background: var(--ink-mute); }
.cgk3-modal .rep-progress-label { flex-shrink: 0; font-size: 11px; color: var(--ink-mute); font-family: var(--mono); }
.cgk3-modal .rep-modal-how { margin-top: 14px; padding: 12px 14px; background: var(--bg-soft); border-radius: 8px; }
.cgk3-modal .rep-modal-how label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-bottom: 5px; }
.cgk3-modal .rep-modal-how p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.cgk3-modal .rep-modal-body { max-height: 46vh; overflow-y: auto; }
.cgk3-modal .rep-status-line { margin-bottom: 14px; }
.cgk3-modal .rep-timeline { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 0; }
.cgk3-modal .rep-entry { position: relative; padding: 0 0 16px 18px; border-left: 2px solid var(--line); }
.cgk3-modal .rep-entry:last-child { padding-bottom: 0; }
.cgk3-modal .rep-entry::before { content: ''; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cgk3-modal .rep-entry.closing::before { background: var(--ok); }
.cgk3-modal .rep-entry-date { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.cgk3-modal .rep-entry-body { font-size: 14px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.cgk3-modal .rep-form { margin-top: 6px; }
.cgk3-modal .rep-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
.cgk3-modal .rep-textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px; font-family: var(--sans); font-size: 14px; color: var(--ink); resize: vertical; box-sizing: border-box; }
.cgk3-modal .rep-textarea:focus { outline: none; border-color: var(--accent); }
.cgk3-modal .rep-msg { font-size: 12px; color: var(--ink-mute); margin-top: 8px; min-height: 16px; }
.cgk3-modal .rep-msg.is-error { color: var(--crit); }
.cgk3-modal .rep-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.cgk3 .btn-light { background: var(--bg-elev); border: 1px solid var(--line-strong); color: var(--ink-soft); } .cgk3 .btn-light:hover { border-color: var(--ink-mute); }
.cgk3 .btn-solve { background: var(--ok); color: #fff; } .cgk3 .btn-solve:hover { background: #3d6645; }

/* ── Filtro de rango de fechas (evaluaciones de desempeño) ── */
.cgk3 .cgk3-range-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 12px 16px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; }
.cgk3 .cgk3-range-filter__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); }
.cgk3 .cgk3-range-input { font-family: var(--sans); font-size: 13px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; background: var(--bg); }
.cgk3 .cgk3-range-input:focus { outline: none; border-color: var(--accent); }
.cgk3 .cgk3-range-sep { color: var(--ink-mute); font-weight: 600; }
.cgk3 .cgk3-range-apply, .cgk3 .cgk3-range-clear { padding: 7px 16px; font-size: 13px; }
.cgk3 .cgk3-range-clear[disabled] { opacity: 0.45; cursor: not-allowed; }
.cgk3 .cgk3-range-filter__note { font-size: 12px; color: var(--ink-mute); margin-left: auto; }
.cgk3 .cgk3-range-filter__error { flex-basis: 100%; font-size: 12px; color: var(--crit); }

/* ── Overlay de construcción de snapshot por rango ── */
.cgk3 .cgk3-range-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(20, 20, 15, 0.45); backdrop-filter: blur(2px); }
.cgk3 .cgk3-range-overlay[hidden] { display: none; }
.cgk3 .cgk3-range-card { width: min(440px, 90vw); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,0.22); }
.cgk3 .cgk3-range-spinner { width: 34px; height: 34px; margin: 0 auto 16px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: cgk3-spin .8s linear infinite; }
.cgk3 .cgk3-range-title { font-family: var(--serif); font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.cgk3 .cgk3-range-msg { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; min-height: 18px; }
.cgk3 .cgk3-range-track { height: 8px; background: var(--bg-soft); border-radius: 99px; overflow: hidden; }
.cgk3 .cgk3-range-bar { height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s ease; }
.cgk3 .cgk3-range-pct { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); margin-top: 8px; }
.cgk3 .cgk3-range-hint { font-size: 11.5px; color: var(--ink-mute); margin-top: 14px; line-height: 1.5; }

/* ── Selector de período (reemplaza el date-picker libre) ── */
.cgk3 .cgk3-range-select { font-family: var(--sans); font-size: 13px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 12px; background: var(--bg); min-width: 220px; cursor: pointer; }
.cgk3 .cgk3-range-select:focus { outline: none; border-color: var(--accent); }

/* ── Filtro de rango por usuario (dentro del acordeón de persona) ── */
.cgk3 .user-range { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 10px 12px; background: var(--bg-soft); border: 1px dashed var(--line-strong); border-radius: 10px; }
.cgk3 .user-range__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mute); }
.cgk3 .user-range__input { font-family: var(--sans); font-size: 12px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px; padding: 5px 8px; background: var(--bg-elev); }
.cgk3 .user-range__input:focus { outline: none; border-color: var(--accent); }
.cgk3 .user-range__sep { color: var(--ink-mute); }
.cgk3 .user-range__apply, .cgk3 .user-range__clear { padding: 5px 12px; font-size: 12px; }
.cgk3 .user-range__badge { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 99px; }
.cgk3 .user-range__hint { font-size: 11px; color: var(--ink-mute); }
.cgk3 .user-range__msg { font-size: 11px; color: var(--ink-mute); flex-basis: 100%; }
.cgk3 .user-range__msg.is-error { color: var(--crit); }

/* ── Descripción del KPI dentro del card ── */
.cgk3 .kpi-desc { font-size: 15px; line-height: 1.45; color: var(--ink-mute); margin: 2px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── "Sin datos en el período" destacado (KPI que se mide pero no trajo dato) ── */
.cgk3 .kpi-alert-tag.nodata { display: inline-flex; align-items: center; gap: 5px; color: #b45309; font-weight: 700; font-style: normal; background: rgba(217, 119, 6, 0.13); border: 1px solid rgba(217, 119, 6, 0.30); padding: 2px 9px; border-radius: 99px; }
.cgk3 .kpi-alert-tag.nodata .nodata-ico { flex-shrink: 0; }
.cgk3 .kpi-status.gray.nodata { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.22); }
.cgk3 .kpi-tile.is-nodata { border-color: rgba(217, 119, 6, 0.35); }

/* ── Botón "Salir" del chip de usuario ── */
.cgk3 .user-chip { position: relative; }
.cgk3 .user-logout { margin-left: 12px; padding: 6px 12px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.cgk3 .user-logout:hover { background: var(--crit); color: #fff; border-color: var(--crit); }

/* ── Vista de LOGIN ── */
.cgk3-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg); font-family: var(--sans); color: var(--ink); }
.cgk3-login__card { width: 100%; max-width: 380px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 40px 32px; box-shadow: 0 8px 40px rgba(20,20,15,0.06); text-align: center; }
.cgk3-login__logo { max-height: 46px; width: auto; margin: 0 auto 22px; display: block; }
.cgk3-login__title { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; margin: 0 0 6px; }
.cgk3-login__subtitle { font-size: 14px; color: var(--ink-mute); margin: 0 0 26px; }
.cgk3-login__form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.cgk3-login__label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.cgk3-login__label input { font-family: var(--sans); font-size: 14px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg); color: var(--ink); transition: border-color .15s ease; }
.cgk3-login__label input:focus { outline: none; border-color: var(--accent); }
.cgk3-login__error { font-size: 13px; color: var(--crit); background: rgba(184,73,47,0.08); border: 1px solid rgba(184,73,47,0.25); border-radius: 8px; padding: 9px 12px; }
.cgk3-login__btn { margin-top: 4px; padding: 12px 16px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 9px; cursor: pointer; transition: opacity .15s ease; }
.cgk3-login__btn:hover { opacity: 0.92; }
.cgk3-login__btn:disabled { opacity: 0.6; cursor: default; }