/* ============================================================
   EHM | Sistema de Gestão da Qualidade — ISO 9001:2015
   Design system compartilhado
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --paper:#F2F4EA;
  --paper-raised:#FFFFFF;
  --ink:#182A22;
  --ink-soft:#54635A;
  --ink-faint:#8B9A8F;
  --line:#DAE2CD;
  --line-soft:#E9EEDF;

  --teal:#1F6B45;
  --teal-dark:#123F29;
  --teal-tint:#E2F0E5;

  --amber:#A9791F;
  --amber-tint:#F3ECD8;

  --pol:#6B4A26;   --pol-tint:#F1E8DC;
  --doc:#1F6B45;   --doc-tint:#E2F0E5;
  --pcs:#2E6F7E;   --pcs-tint:#E2EEF0;
  --pro:#A9791F;   --pro-tint:#F3ECD8;
  --for:#4C7A34;   --for-tint:#E9F1E1;
  --req:#5B6960;   --req-tint:#E9ECE7;

  --risk-1:#4C8C57; --risk-2:#8FAE45; --risk-3:#D9A62E; --risk-4:#D9722C; --risk-5:#B23A2E;

  --radius:3px;
  --shadow: 0 1px 2px rgba(28,35,49,.06), 0 6px 20px rgba(28,35,49,.05);
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', -apple-system, Segoe UI, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:var(--teal-dark);}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}

h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); margin:0 0 .5em; font-weight:600; line-height:1.2;}
p{margin:0 0 1em; color:var(--ink);}
.lede{color:var(--ink-soft); font-size:1.05rem; max-width:62ch;}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; gap:16px;
  padding:14px 28px;
  background:var(--ink);
  color:#EFEAE0;
  position:sticky; top:0; z-index:40;
  border-bottom:3px solid var(--teal);
}
.topbar img.logo{height:34px; width:auto; display:block; background:#fff; border-radius:4px; padding:3px;}
.topbar .brandtext{font-family:var(--serif); font-size:1.05rem; line-height:1.15;}
.topbar .brandtext strong{display:block; font-size:1.02rem;}
.topbar .brandtext span{display:block; font-size:.72rem; letter-spacing:.02em; color:#B9C4C1;}
.topbar nav{margin-left:auto; display:flex; gap:22px; font-size:.86rem;}
.topbar nav a{color:#D8D2C4; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;}
.topbar nav a:hover{color:#fff; border-color:var(--amber);}
.topbar .home-link{color:#EFEAE0; text-decoration:none; display:flex; align-items:center; gap:12px;}

/* ---------- Doc header (individual pages) ---------- */
.docmeta{
  background:var(--paper-raised);
  border-bottom:1px solid var(--line);
}
.docmeta-inner{
  max-width:920px; margin:0 auto; padding:34px 28px 22px;
}
.crumbs{font-size:.8rem; color:var(--ink-faint); margin-bottom:14px;}
.crumbs a{color:var(--ink-faint); text-decoration:none;}
.crumbs a:hover{color:var(--teal-dark);}
.doc-code{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  padding:3px 9px; border-radius:20px; letter-spacing:.03em;
}
.doc-titlewrap{display:flex; align-items:flex-start; gap:16px; margin-top:12px; flex-wrap:wrap;}
.doc-titlewrap h1{font-size:1.9rem; margin:0; flex:1; min-width:260px;}
.doc-meta-row{display:flex; gap:22px; flex-wrap:wrap; margin-top:16px; font-size:.83rem; color:var(--ink-soft);}
.doc-meta-row div strong{display:block; color:var(--ink); font-size:.78rem; font-weight:600; text-transform:none;}
.doc-meta-row div span.label{display:block; color:var(--ink-faint); font-size:.72rem; margin-bottom:2px;}

/* colored badges by family */
.badge-POL{background:var(--pol-tint); color:var(--pol);}
.badge-DOC{background:var(--doc-tint); color:var(--doc);}
.badge-PCS{background:var(--pcs-tint); color:var(--pcs);}
.badge-PRO{background:var(--pro-tint); color:var(--pro);}
.badge-FOR{background:var(--for-tint); color:var(--for);}
.badge-REQ{background:var(--req-tint); color:var(--req);}

/* ---------- Content wrapper ---------- */
.wrap{max-width:920px; margin:0 auto; padding:34px 28px 90px;}
.wrap.wide{max-width:1120px;}

.section{margin-bottom:34px;}
.section h2{
  font-size:1.15rem; padding-bottom:8px; border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.section h3{font-size:1.02rem; margin-top:20px;}

ol.steps{margin:0; padding-left:0; list-style:none; counter-reset:step;}
ol.steps li{
  counter-increment:step; position:relative; padding:14px 0 14px 46px;
  border-top:1px solid var(--line-soft);
}
ol.steps li:first-child{border-top:none;}
ol.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:14px;
  width:28px; height:28px; border-radius:50%;
  background:var(--teal-tint); color:var(--teal-dark);
  font-family:var(--mono); font-weight:600; font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
}
ol.steps li strong{display:block; margin-bottom:3px; color:var(--ink);}
ol.steps li span.who{
  display:inline-block; margin-top:6px; font-size:.74rem; color:var(--teal-dark);
  background:var(--teal-tint); padding:2px 8px; border-radius:20px; font-weight:600;
}

table{width:100%; border-collapse:collapse; font-size:.9rem;}
table.plain th, table.plain td{
  text-align:left; padding:10px 12px; border:1px solid var(--line);
  vertical-align:top;
}
table.plain th{background:var(--paper); font-family:var(--serif); font-weight:600; color:var(--ink);}
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);}
.table-scroll table{border:none;}
.table-scroll table th, .table-scroll table td{border:none; border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft);}

.callout{
  background:var(--amber-tint); border-left:3px solid var(--amber);
  padding:14px 18px; border-radius:0 4px 4px 0; font-size:.92rem; color:#5A431C;
}
.callout.teal{background:var(--teal-tint); border-color:var(--teal); color:var(--teal-dark);}
.callout.gray{background:var(--req-tint); border-color:var(--ink-faint); color:var(--ink-soft);}

.taglist{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.tag{font-size:.76rem; background:var(--paper); border:1px solid var(--line); padding:4px 10px; border-radius:20px; color:var(--ink-soft);}

.related{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
.related a{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  background:var(--paper-raised); border:1px solid var(--line); padding:6px 11px; border-radius:20px;
  text-decoration:none; color:var(--ink);
}
.related a:hover{border-color:var(--teal); color:var(--teal-dark);}

/* ---------- Footer ---------- */
footer.sitefoot{
  border-top:1px solid var(--line); background:var(--paper-raised);
  padding:26px 28px; margin-top:60px;
}
footer.sitefoot .wrap{padding:0; max-width:920px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; color:var(--ink-faint);}
footer.sitefoot.wide-foot .wrap{max-width:1120px;}

/* ---------- Forms (FOR-xx) ---------- */
.formsheet{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:6px;
  padding:0; box-shadow:var(--shadow); overflow:hidden;
}
.formsheet .fs-head{
  display:flex; align-items:center; gap:16px; padding:20px 26px;
  border-bottom:2px solid var(--ink);
}
.formsheet .fs-head img{height:38px;}
.formsheet .fs-head .fs-titles{flex:1;}
.formsheet .fs-head .fs-titles strong{display:block; font-family:var(--serif); font-size:1.1rem;}
.formsheet .fs-head .fs-titles span{display:block; font-size:.78rem; color:var(--ink-soft);}
.formsheet .fs-head .fs-code{font-family:var(--mono); font-size:.85rem; text-align:right; color:var(--ink-soft);}
.formsheet .fs-code b{display:block; color:var(--ink); font-size:1rem;}
.formbody{padding:24px 26px;}

.field-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px;}
.field{flex:1; min-width:180px;}
.field label{display:block; font-size:.74rem; font-weight:600; color:var(--ink-soft); margin-bottom:5px; text-transform:none;}
.field input[type=text], .field input[type=date], .field select, .field textarea{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:4px;
  font-family:var(--sans); font-size:.92rem; background:#FDFCF9; color:var(--ink);
}
.field textarea{min-height:80px; resize:vertical;}

.datatable{width:100%; border-collapse:collapse; margin-top:6px;}
.datatable th, .datatable td{border:1px solid var(--line); padding:8px; font-size:.85rem;}
.datatable th{background:var(--paper); font-weight:600; text-align:left;}
.datatable td input, .datatable td select{width:100%; border:none; background:transparent; font-size:.85rem; padding:3px;}
.datatable td input:focus, .datatable td select:focus{background:var(--teal-tint); outline:none;}

.add-row-btn, .print-btn{
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  background:var(--teal); color:#fff; border:none; padding:9px 16px; border-radius:4px;
  cursor:pointer; margin-top:10px;
}
.add-row-btn{background:var(--paper); color:var(--teal-dark); border:1px solid var(--teal);}
.print-btn{background:var(--ink);}
.fs-actions{display:flex; gap:10px; margin-top:20px; padding-top:16px; border-top:1px dashed var(--line);}

.sign-row{display:flex; gap:30px; margin-top:34px; flex-wrap:wrap;}
.sign-box{flex:1; min-width:200px; text-align:center;}
.sign-box .line{border-top:1px solid var(--ink); margin-bottom:6px; height:40px;}
.sign-box span{font-size:.76rem; color:var(--ink-soft);}

@media print{
  .topbar, .print-btn, .add-row-btn, footer.sitefoot, .crumbs, .docmeta{display:none !important;}
  body{background:#fff;}
  .formsheet{box-shadow:none; border:none;}
}

/* ---------- IPER matrix (PRO-11) ---------- */
.iper-grid{display:grid; grid-template-columns:120px repeat(5,1fr); gap:3px; margin:18px 0; font-size:.8rem;}
.iper-grid .cell{padding:12px 6px; text-align:center; border-radius:3px; font-weight:600; color:#fff;}
.iper-grid .head{background:var(--ink); color:#fff; font-family:var(--mono); font-size:.72rem; display:flex; align-items:center; justify-content:center;}
.iper-grid .axis-label{grid-column:1/-1; text-align:center; font-size:.72rem; color:var(--ink-soft); font-family:var(--mono); letter-spacing:.04em; margin-top:2px;}
.risk-1{background:var(--risk-1);} .risk-2{background:var(--risk-2); color:#3a3200 !important;}
.risk-3{background:var(--risk-3); color:#3a2c00 !important;} .risk-4{background:var(--risk-4);}
.risk-5{background:var(--risk-5);}

.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:.78rem;}
.legend span{display:flex; align-items:center; gap:6px;}
.legend i{width:12px; height:12px; border-radius:2px; display:inline-block;}

/* ---------- Index page ---------- */
.hero{
  background:linear-gradient(135deg, var(--ink) 0%, #223047 70%, var(--teal-dark) 130%);
  color:#EFEAE0; padding:64px 28px 56px;
}
.hero-inner{max-width:1120px; margin:0 auto; display:flex; gap:48px; align-items:center; flex-wrap:wrap;}
.hero-text{flex:1; min-width:320px;}
.hero-eyebrow{font-family:var(--mono); font-size:.78rem; color:#9FD8C6; letter-spacing:.04em; margin-bottom:14px;}
.hero h1{color:#fff; font-size:2.5rem; max-width:15ch; margin-bottom:16px;}
.hero p.lede{color:#C9D3D8; font-size:1.08rem;}
.hero-stats{display:flex; gap:28px; margin-top:30px; flex-wrap:wrap;}
.hero-stats div{border-left:2px solid var(--amber); padding-left:12px;}
.hero-stats div b{display:block; font-family:var(--serif); font-size:1.7rem; color:#fff;}
.hero-stats div span{font-size:.76rem; color:#AEB9C2;}
.hero-badge{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:8px; padding:22px 26px; max-width:290px; backdrop-filter:blur(2px);
}
.hero-badge img{height:44px; margin-bottom:14px; background:#fff; border-radius:6px; padding:5px;}
.hero-badge strong{display:block; font-family:var(--serif); font-size:1.05rem; margin-bottom:4px;}
.hero-badge p{font-size:.82rem; color:#C9D3D8; margin:0;}

.catnav{
  display:flex; gap:0; max-width:1120px; margin:0 auto; padding:0 28px;
  overflow-x:auto; background:var(--paper-raised); border-bottom:1px solid var(--line);
  position:sticky; top:63px; z-index:30;
}
.catnav a{
  padding:14px 18px; font-size:.82rem; font-weight:600; color:var(--ink-soft);
  text-decoration:none; white-space:nowrap; border-bottom:3px solid transparent;
}
.catnav a:hover{color:var(--ink); border-color:var(--line);}

.catsection{max-width:1120px; margin:0 auto; padding:46px 28px 10px; scroll-margin-top:110px;}
.catsection-head{display:flex; align-items:baseline; gap:16px; margin-bottom:6px;}
.catsection-head h2{font-size:1.5rem; margin:0;}
.catsection-head .count{font-family:var(--mono); font-size:.8rem; color:var(--ink-faint);}
.catsection > p.lede{margin-bottom:26px;}

.cardgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
.doccard{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:5px;
  padding:16px 18px; text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, transform .15s ease;
  display:flex; flex-direction:column; gap:8px;
}
.doccard:hover{border-color:var(--teal); transform:translateY(-2px);}
.doccard .code{font-family:var(--mono); font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:20px; display:inline-block; width:fit-content;}
.doccard .name{font-family:var(--serif); font-size:1rem; font-weight:600; line-height:1.3;}
.doccard .desc{font-size:.8rem; color:var(--ink-soft); line-height:1.4;}

@media (max-width:640px){
  .topbar nav{display:none;}
  .hero h1{font-size:1.9rem;}
  .doc-titlewrap h1{font-size:1.5rem;}
}