/* ═══════════════════════════════════════════════════════
   KEMIS ERP — Módulo SST · Saúde e Segurança do Trabalho
   Identidade visual: Brand Guide KEMIS v1.0.0 / 2026
   Blue Vivid #2563EB · Deep Blue Black #0A1124
   Blue Based #1E6FD9 · Neutral 100–700 · Safety Green #2ECC8F
   Font: DM Sans
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  --blue:    #2563EB;
  --blue-d:  #1E6FD9;
  --deep:    #0A1124;
  --n100:    #F4F5F7;
  --n200:    #E2E4E9;
  --n400:    #9EA3AF;
  --n700:    #3A3F4A;
  --green:   #2ECC8F;
  --red:     #EF4444;
  --orange:  #F59E0B;
  --white:   #FFFFFF;
  --font:    'DM Sans','Helvetica Now Display',Helvetica,Arial,sans-serif;

  /* Status colors matching KEMIS system */
  --s-compliant: #2ECC8F;
  --s-expiring:  #F59E0B;
  --s-expired:   #EF4444;
  --s-missing:   #EF4444;
  --s-na:        #9EA3AF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--deep); font-family: var(--font); -webkit-font-smoothing: antialiased; }

/* ── MODULE TOP BAR ── */
#shell { position: fixed; inset: 0; display: flex; flex-direction: column; }

#topbar {
  height: 50px; min-height: 50px;
  background: var(--deep);
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; flex-shrink: 0;
}
.tb-left  { display: flex; align-items: center; gap: 14px; }
.tb-back  {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.45);
  letter-spacing: .06em; text-decoration: none; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.12); padding: 5px 12px; border-radius: 3px;
  transition: all .2s; white-space: nowrap;
}
.tb-back:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
.tb-back svg { flex-shrink: 0; }
.tb-sep { width: 1px; height: 20px; background: rgba(255,255,255,.1); }
.tb-badge {
  display: flex; align-items: center; gap: 8px;
}
.tb-mod-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.tb-mod-name { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.tb-mod-sub  { font-size: 10px; color: rgba(255,255,255,.38); letter-spacing: .06em; }

.tb-right { display: flex; align-items: center; gap: 14px; }
.tb-kemis { display: flex; align-items: center; gap: 8px; }
.tb-ki { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.tb-ki .l1 { position: absolute; inset: 0; background: rgba(255,255,255,.1); border-radius: 22%; transform: rotate(-10deg) translate(-1px,1px); }
.tb-ki .l2 { position: absolute; inset: 0; background: var(--blue-d); border-radius: 22%; transform: rotate(-3deg); }
.tb-ki .l3 { position: absolute; inset: 0; background: var(--blue); border-radius: 22%; }
.tb-ki .l4 { position: absolute; width: 36%; height: 36%; top: 32%; left: 32%; background: rgba(255,255,255,.42); border-radius: 25%; }
.tb-kname { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: .1em; }
.ctr { font-size: 11px; color: rgba(255,255,255,.28); letter-spacing: .06em; }

/* ── SLIDES ── */
#viewport { flex: 1; position: relative; overflow: hidden; }
.slide { position: absolute; inset: 0; }
.slide-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.slide-canvas {
  position: relative; aspect-ratio: 16/9;
  width: min(100%, calc(100vh * 16/9)); max-height: 100%; overflow: hidden;
  background: var(--n100);
}

/* ── BOTTOM NAV ── */
#bottomnav {
  height: 52px; min-height: 52px; background: var(--deep);
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 24px;
  flex-shrink: 0;
}
#bottomnav a.nav-btn, #bottomnav span.nav-btn {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  width: 40px; height: 34px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s; cursor: pointer;
}
#bottomnav a.nav-btn:hover { background: rgba(255,255,255,.18); }
#bottomnav span.nav-btn[aria-disabled="true"] { opacity: .22; cursor: not-allowed; pointer-events: none; }
#dots { display: flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); display: block; cursor: pointer; transition: background .2s; }
.dot.active { background: var(--blue); }
.dot:hover:not(.active) { background: rgba(255,255,255,.5); }

/* ── SLIDE HEADER ── */
.s-header {
  position: absolute; top: 0; left: 0; right: 0; height: 9%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; border-bottom: 1px solid rgba(0,0,0,.07); z-index: 2; background: var(--white);
}
.s-header.dark { background: var(--deep); border-bottom-color: rgba(255,255,255,.07); }
.s-header-lbl { font-size: .8vw; color: var(--n400); letter-spacing: .04em; }
.s-header-lbl.blue { color: var(--blue); font-weight: 600; }
.sh-logo { display: flex; align-items: center; gap: 8px; }
.sh-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.sh-icon .l1 { position: absolute; inset: 0; background: rgba(10,17,36,.08); border-radius: 22%; transform: rotate(-10deg) translate(-1px,1px); }
.sh-icon .l2 { position: absolute; inset: 0; background: var(--blue-d); border-radius: 22%; transform: rotate(-3deg); }
.sh-icon .l3 { position: absolute; inset: 0; background: var(--blue); border-radius: 22%; }
.sh-icon .l4 { position: absolute; width: 36%; height: 36%; top: 32%; left: 32%; background: rgba(255,255,255,.45); border-radius: 25%; }
.sh-name { font-size: .82vw; font-weight: 700; letter-spacing: .08em; color: var(--deep); }

/* ── BODY AREA ── */
.body-area { position: absolute; top: 9%; left: 0; right: 0; bottom: 0; }
.body-area.with-footer { bottom: 17%; }

/* ── FOOTERS ── */
.sst-footer {
  position: absolute; bottom: 0; left: 0; right: 0; height: 17%;
  background: var(--blue); display: flex; align-items: center; padding: 0 5%; z-index: 2; gap: 3%;
}
.sst-footer.dark {
  background: var(--deep); border-top: 2px solid var(--blue);
}
.footer-badge {
  background: rgba(255,255,255,.18); color: #fff;
  font-size: .68vw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 1.5% 2.5%; white-space: nowrap; flex-shrink: 0; border-radius: 2px;
}
.footer-text { font-size: .85vw; color: rgba(255,255,255,.65); line-height: 1.55; }
.footer-text strong { color: #fff; font-weight: 600; }
.footer-line { display: block; width: 28px; height: 2px; background: rgba(255,255,255,.35); margin: .5% 0; }

/* ── TYPOGRAPHY ── */
.kicker { font-size: .72vw; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.2%; }
.kicker.green { color: var(--green); }
.h1 { font-size: 2.1vw; font-weight: 700; color: var(--deep); line-height: 1.15; margin-bottom: .8%; }
.h1.light { color: #fff; }
.sub { font-size: .92vw; color: var(--n700); line-height: 1.55; margin-bottom: 2%; }
.slide-num { position: absolute; right: 2.5%; bottom: 1%; font-size: .75vw; color: rgba(0,0,0,.12); }
.slide-num.light { color: rgba(255,255,255,.1); }

/* ── DECO ── */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco .dr { position: absolute; border-radius: 18%; }

/* ═══════════════════════════════
   SLIDE SST-1 — CAPA DO MÓDULO
   ═══════════════════════════════ */
#sst1 .slide-canvas { background: var(--deep); }
#sst1 .body { position: absolute; inset: 0; display: flex; z-index: 1; }
#sst1 .lc {
  width: 52%; padding: 7% 5% 5% 6%;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid rgba(255,255,255,.05);
}
#sst1 .rc {
  width: 48%; padding: 6% 5% 5% 5%;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(255,255,255,.02);
}
#sst1 .mod-number { font-size: .72vw; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); margin-bottom: 2%; }
#sst1 .mod-icon { font-size: 3.5vw; margin-bottom: 3%; line-height: 1; }
#sst1 .mod-title { font-size: 2.8vw; font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 1.5%; }
#sst1 .mod-tagline { font-size: 1.1vw; font-weight: 300; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 5%; }
#sst1 .blue-line { width: 36px; height: 2px; background: var(--blue); margin-bottom: 4%; }
#sst1 .nav-hint { font-size: .75vw; color: rgba(255,255,255,.2); letter-spacing: .06em; }
#sst1 .pain-label { font-size: .72vw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 3%; }
#sst1 .pain-list { display: flex; flex-direction: column; gap: 1.8%; }
#sst1 .pain-item {
  display: flex; align-items: flex-start; gap: 3%;
  background: rgba(239,68,68,.08); border-left: 3px solid var(--red);
  padding: 2.5% 3%; font-size: .88vw; color: rgba(255,255,255,.75); line-height: 1.4;
}
#sst1 .pain-icon { font-size: 1.1vw; flex-shrink: 0; margin-top: .05vw; }
#sst1 .solve-hint {
  margin-top: auto; display: flex; align-items: center; gap: 2%;
  font-size: .82vw; color: var(--green); font-weight: 600;
}
#sst1 .solve-hint::before { content: ''; display: block; width: 24px; height: 2px; background: var(--green); flex-shrink: 0; }

/* ═══════════════════════════════
   SLIDE SST-2 — DASHBOARD
   ═══════════════════════════════ */
#sst2 .slide-canvas { background: var(--n100); }
#sst2 .body-area { display: flex; }
#sst2 .lc { width: 42%; padding: 3.5% 3% 3% 5%; display: flex; flex-direction: column; justify-content: center; }
#sst2 .rc { width: 58%; padding: 3% 3% 3% 0; display: flex; flex-direction: column; justify-content: center; position: relative; }

/* ═══════════════════════════════
   SLIDE SST-3 — CONTROLE COLABORADORES
   ═══════════════════════════════ */
#sst3 .slide-canvas { background: var(--n100); }
#sst3 .body-area { display: flex; }
#sst3 .lc { width: 58%; padding: 3% 3% 3% 5%; display: flex; align-items: center; }
#sst3 .rc { width: 42%; padding: 3.5% 4% 3% 3%; display: flex; flex-direction: column; justify-content: center; }

/* ═══════════════════════════════
   SLIDE SST-4 — MATRIZ TREINAMENTOS
   ═══════════════════════════════ */
#sst4 .slide-canvas { background: var(--deep); }
#sst4 .body-area { display: flex; z-index: 1; position: relative; }
#sst4 .lc { width: 58%; padding: 3% 3% 3% 5%; display: flex; align-items: center; }
#sst4 .rc { width: 42%; padding: 3.5% 4% 3% 3%; display: flex; flex-direction: column; justify-content: center; }

/* ═══════════════════════════════
   SLIDE SST-5 — MATRIX COLABORADOR (COMPLIANCE ENGINE)
   ═══════════════════════════════ */
#sst5 .slide-canvas { background: var(--n100); }
#sst5 .body-area { display: flex; }
#sst5 .lc { width: 42%; padding: 3.5% 3% 3% 5%; display: flex; flex-direction: column; justify-content: center; }
#sst5 .rc { width: 58%; padding: 3% 3% 3% 0; display: flex; align-items: center; }

/* ═══════════════════════════════
   SLIDE SST-6 — AGENDAMENTOS
   ═══════════════════════════════ */
#sst6 .slide-canvas { background: var(--n100); }
#sst6 .body-area { display: flex; }
#sst6 .lc { width: 58%; padding: 3% 3% 3% 5%; display: flex; align-items: center; }
#sst6 .rc { width: 42%; padding: 3.5% 4% 3% 3%; display: flex; flex-direction: column; justify-content: center; }

/* ═══════════════════════════════
   SLIDE SST-7 — MOBILIZAÇÃO
   ═══════════════════════════════ */
#sst7 .slide-canvas { background: var(--deep); }
#sst7 .body-area { display: flex; z-index: 1; position: relative; }
#sst7 .lc { width: 42%; padding: 3.5% 3% 3% 5%; display: flex; flex-direction: column; justify-content: center; }
#sst7 .rc { width: 58%; padding: 3% 3% 3% 0; display: flex; align-items: center; }

/* ═══════════════════════════════
   SLIDE SST-8 — CERTIFICADOS
   ═══════════════════════════════ */
#sst8 .slide-canvas { background: var(--n100); }
#sst8 .body-area { display: flex; }
#sst8 .lc { width: 55%; padding: 3% 3% 3% 5%; display: flex; align-items: center; }
#sst8 .rc { width: 45%; padding: 3.5% 4% 3% 3%; display: flex; flex-direction: column; justify-content: center; }

/* ═══════════════════════════════
   SLIDE SST-9 — ARQUIVOS
   ═══════════════════════════════ */
#sst9 .slide-canvas { background: var(--n100); }
#sst9 .body-area { display: flex; }
#sst9 .lc { width: 42%; padding: 3.5% 3% 3% 5%; display: flex; flex-direction: column; justify-content: center; }
#sst9 .rc { width: 58%; padding: 3% 3% 3% 0; display: flex; align-items: center; }

/* ═══════════════════════════════
   SLIDE SST-10 — COMPLIANCE ENGINE
   ═══════════════════════════════ */
#sst10 .slide-canvas { background: var(--deep); }
#sst10 .body-area { padding: 2.5% 5% 1%; z-index: 1; position: relative; }

/* ═══════════════════════════════
   SLIDE SST-11 — ENCERRAMENTO
   ═══════════════════════════════ */
#sst11 .slide-canvas { background: var(--deep); }
#sst11 .body { position: absolute; inset: 0; display: flex; z-index: 1; }
#sst11 .lc { width: 55%; padding: 7% 5% 5% 6%; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255,255,255,.05); }
#sst11 .rc { width: 45%; padding: 6% 5% 5% 5%; display: flex; flex-direction: column; justify-content: center; }

/* ── SHARED COMPONENTS ── */

/* Screen mockup frame */
.screen-frame {
  width: 100%; border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.12);
  overflow: hidden; display: block;
}
.screen-frame img { width: 100%; display: block; }
.screen-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--blue); color: #fff; font-size: .62vw; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .5% 1.4%; border-radius: 2px;
  margin-bottom: 1.5%;
}

/* Feature list */
.feat-list { display: flex; flex-direction: column; gap: 1.8%; margin-bottom: 2%; }
.feat-item {
  display: flex; align-items: flex-start; gap: 3%;
  padding: 2.2% 3%; border-left: 3px solid var(--blue);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(10,17,36,.05);
}
.feat-item.green { border-left-color: var(--green); }
.feat-item.on-dark { background: rgba(255,255,255,.05); border-left-color: var(--blue); }
.feat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: .5vw; }
.feat-dot.green { background: var(--green); }
.feat-content {}
.feat-t { font-size: .88vw; font-weight: 700; color: var(--deep); margin-bottom: .3%; line-height: 1.2; }
.feat-t.light { color: #fff; }
.feat-d { font-size: .78vw; color: var(--n700); line-height: 1.45; }
.feat-d.light { color: rgba(255,255,255,.55); }

/* Pain → Solve cards */
.pain-solve { display: grid; grid-template-columns: 1fr 1fr; gap: 2%; margin-bottom: 2%; }
.pain-col { background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.18); padding: 3% 4%; }
.pain-col-label { font-size: .68vw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 2%; }
.pain-row { font-size: .8vw; color: var(--n700); padding: 1.5% 0; border-bottom: 1px solid rgba(239,68,68,.1); line-height: 1.4; display: flex; gap: 2%; }
.pain-row:last-child { border-bottom: none; }
.pain-row::before { content: '✕'; color: var(--red); font-weight: 700; flex-shrink: 0; }
.solve-col { background: rgba(46,204,143,.06); border: 1px solid rgba(46,204,143,.2); padding: 3% 4%; }
.solve-col-label { font-size: .68vw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 2%; }
.solve-row { font-size: .8vw; color: var(--n700); padding: 1.5% 0; border-bottom: 1px solid rgba(46,204,143,.1); line-height: 1.4; display: flex; gap: 2%; }
.solve-row:last-child { border-bottom: none; }
.solve-row::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }

/* Status badge */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68vw; font-weight: 700; padding: .4% 1.2%; border-radius: 2px;
}
.sb-green { background: rgba(46,204,143,.15); color: var(--green); }
.sb-red   { background: rgba(239,68,68,.15); color: var(--red); }
.sb-orange{ background: rgba(245,158,11,.15); color: var(--orange); }
.sb-gray  { background: rgba(158,163,175,.15); color: var(--n400); }

/* Compliance statuses legend */
.status-legend { display: flex; flex-wrap: wrap; gap: 1.5% 2%; margin-bottom: 2%; }
.sl-item { display: flex; align-items: center; gap: 4px; font-size: .72vw; color: var(--n700); }
.sl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Engine diagram */
.engine-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5%; }
.engine-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-top: 2px solid var(--blue); padding: 3% 3.5%; }
.engine-card.green { border-top-color: var(--green); }
.engine-card.orange { border-top-color: var(--orange); }
.engine-n { font-size: .68vw; font-weight: 700; color: var(--blue); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1%; }
.engine-t { font-size: .92vw; font-weight: 700; color: #fff; margin-bottom: 1%; line-height: 1.2; }
.engine-d { font-size: .75vw; color: rgba(255,255,255,.5); line-height: 1.45; }

/* Big stat */
.big-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 2%; margin-bottom: 3%; }
.big-stat { text-align: center; padding: 3% 2%; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); }
.big-stat-v { font-size: 2vw; font-weight: 700; color: var(--blue); line-height: 1; margin-bottom: .5%; }
.big-stat-l { font-size: .72vw; color: rgba(255,255,255,.45); line-height: 1.3; }

/* Highlight quote */
.highlight-quote {
  background: rgba(37,99,235,.12); border-left: 3px solid var(--blue);
  padding: 3% 4%; font-size: .92vw; font-style: italic;
  color: rgba(255,255,255,.75); line-height: 1.55; margin-bottom: 3%;
}
.highlight-quote.green { background: rgba(46,204,143,.1); border-left-color: var(--green); color: var(--n700); font-style: normal; }