/* Plano de Gestão da Pesca no Acre — design system único (site + PDF) */
:root{
  color-scheme: light;
  --bg:#f5f6f2;
  --surface:#ffffff;
  --surface-2:#eceee8;
  --ink:#141a1f;
  --ink-2:#48525b;
  --ink-3:#6c767f;
  --line:#dfe2db;
  --rule:#c3c8bf;
  --accent:#0f5f8c;      /* azul-rio */
  --accent-2:#0b7d55;    /* verde-mata */
  --warm:#c9611f;        /* laranja-barro */
  --gold:#9a7b1c;
  --fv:#0b7d55; --ne:#8a3b3b; --inf:#7a5a12;
  --shadow:0 1px 2px rgba(20,24,28,.05), 0 10px 28px -18px rgba(20,24,28,.28);
  --radius:12px;
  --w:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#121517; --surface:#1b1f22; --surface-2:#23282c;
    --ink:#eef0ec; --ink-2:#b9c0c5; --ink-3:#8a9298;
    --line:#2d3237; --rule:#3a4046;
    --accent:#6fb3dc; --accent-2:#4cc39a; --warm:#e88a4f; --gold:#d3b35a;
    --fv:#4cc39a; --ne:#e08a8a; --inf:#d3b35a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#121517; --surface:#1b1f22; --surface-2:#23282c;
  --ink:#eef0ec; --ink-2:#b9c0c5; --ink-3:#8a9298;
  --line:#2d3237; --rule:#3a4046;
  --accent:#6fb3dc; --accent-2:#4cc39a; --warm:#e88a4f; --gold:#d3b35a;
  --fv:#4cc39a; --ne:#e08a8a; --inf:#d3b35a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size:17px; line-height:1.55}
h1,h2,h3,h4{font-family:"Zilla Slab", Georgia, serif; line-height:1.15; margin:0 0 .5em; font-weight:600; letter-spacing:-.005em}
h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
h2{font-size:clamp(1.45rem,2.4vw,1.85rem); margin-top:2.2em; padding-top:.6em; border-top:3px solid var(--accent); scroll-margin-top:84px}
h3{font-size:1.2rem; margin-top:1.6em; color:var(--ink)}
h4{font-size:1.02rem; margin-top:1.2em; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; font-family:"Source Sans 3", sans-serif; font-weight:700}
p{margin:0 0 1em}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px}
small, .muted{color:var(--ink-3)}
code{font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.88em; background:var(--surface-2); padding:.1em .35em; border-radius:4px}
strong{font-weight:700}
hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.wrap{max-width:var(--w); margin:0 auto; padding:0 16px}

/* top bar */
.top{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:14px; height:60px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:"Zilla Slab", serif; font-weight:700; font-size:1.05rem}
.brand small{display:block; font-family:"Source Sans 3", sans-serif; font-weight:500; font-size:.72rem; color:var(--ink-3); letter-spacing:.03em}
.brand svg{color:var(--accent)}
.top .sp{flex:1}
.btn{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; font-weight:600; font-size:.92rem; cursor:pointer}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn:hover{filter:brightness(1.05)}
.navbtn{display:none}

/* hero */
.hero{padding:56px 0 36px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--bg)) 0%, var(--bg) 100%)}
.hero .kicker{font-family:"IBM Plex Mono", monospace; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin-bottom:10px}
.hero h1{max-width:18ch; margin-bottom:.35em}
.hero .lead{font-size:1.2rem; color:var(--ink-2); max-width:62ch; margin-bottom:1.2em}
.hero .meta{display:flex; flex-wrap:wrap; gap:10px 22px; font-size:.9rem; color:var(--ink-3)}
.hero .meta b{color:var(--ink)}
.hero .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

/* layout */
.layout{display:grid; grid-template-columns:270px minmax(0,1fr); gap:40px; padding-top:28px; padding-bottom:80px}
.side{position:sticky; top:76px; align-self:start; max-height:calc(100vh - 92px); overflow:auto; padding-right:8px; font-size:.9rem}
.side h4{margin:0 0 8px; font-size:.72rem}
.side ol{list-style:none; margin:0 0 18px; padding:0}
.side li{margin:0}
.side a{display:block; padding:5px 10px; border-left:2px solid var(--line); color:var(--ink-2); text-decoration:none; line-height:1.3}
.side a:hover{color:var(--ink); border-color:var(--rule)}
.side a.active{color:var(--accent); border-color:var(--accent); font-weight:600}
.side .num{font-family:"IBM Plex Mono", monospace; font-size:.74rem; color:var(--ink-3); margin-right:6px}
.main{min-width:0}
.main > section{margin-bottom:12px}

/* content */
.main ul, .main ol{padding-left:1.3em; margin:0 0 1em}
.main li{margin:.25em 0}
.main li > p{margin:0}
blockquote{margin:1.2em 0; padding:14px 18px; border-left:4px solid var(--accent-2); background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; color:var(--ink-2)}
blockquote p:last-child{margin:0}
.table-wrap{overflow-x:auto; margin:1em 0 1.4em; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; font-size:.9rem; line-height:1.35}
th,td{padding:9px 11px; vertical-align:top; border-bottom:1px solid var(--line); text-align:left}
th{background:var(--surface-2); font-weight:700; font-size:.82rem; letter-spacing:.02em; position:sticky; top:0}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600}
.chip{display:inline-block; font-family:"IBM Plex Mono", monospace; font-size:.68rem; font-weight:600; letter-spacing:.04em; padding:1px 6px; border-radius:5px; border:1px solid currentColor; line-height:1.5; vertical-align:middle; white-space:nowrap}
.chip-fv{color:var(--fv)} .chip-ne{color:var(--ne)} .chip-inf{color:var(--inf)}
.legend{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.85rem; color:var(--ink-3); margin:8px 0 18px}

/* cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:1em 0 1.6em}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.card .k{font-family:"IBM Plex Mono", monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.card .v{font-family:"Zilla Slab", serif; font-size:1.8rem; font-weight:700; line-height:1.1; margin:4px 0 4px; color:var(--accent)}
.card .d{font-size:.88rem; color:var(--ink-2)}

/* phases */
.phases{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:1.2em 0 1.6em}
.phase{background:var(--surface); border:1px solid var(--line); border-top:5px solid var(--accent); border-radius:var(--radius); padding:14px 16px}
.phase.p0{border-top-color:var(--warm)} .phase.p1{border-top-color:var(--accent)} .phase.p2{border-top-color:var(--accent-2)} .phase.p3{border-top-color:var(--gold)} .phase.p4{border-top-color:#5a4fa3}
.phase .t{font-family:"Zilla Slab", serif; font-weight:700; font-size:1.05rem}
.phase .w{font-family:"IBM Plex Mono", monospace; font-size:.72rem; color:var(--ink-3); margin-bottom:6px}
.phase ul{padding-left:1.1em; margin:6px 0 0; font-size:.9rem}

/* diagram */
figure{margin:1.2em 0 1.6em}
figure svg{width:100%; height:auto; display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
figcaption{font-size:.85rem; color:var(--ink-3); margin-top:6px}

.sources ol{font-size:.86rem; color:var(--ink-2); word-break:break-word}
.foot{border-top:1px solid var(--line); padding:26px 0 40px; font-size:.86rem; color:var(--ink-3)}

@media (max-width:900px){
  .layout{grid-template-columns:1fr; gap:0}
  .side{position:static; max-height:none; margin-bottom:10px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
  .side ol{columns:2; column-gap:16px}
  .hero{padding:36px 0 26px}
  body{font-size:16px}
  h2{scroll-margin-top:70px}
}

/* ---------- PRINT / PDF ---------- */
@media print{
  :root{color-scheme:light; --bg:#fff; --surface:#fff; --surface-2:#f1f2ee; --ink:#111; --ink-2:#3b434b; --ink-3:#5d666f; --line:#d9dcd5; --rule:#b9bfb6; --shadow:none}
  @page{size:A4; margin:18mm 16mm 20mm 16mm}
  body{font-size:10.6pt; line-height:1.42; background:#fff}
  .top, .side, .actions, .noprint{display:none !important}
  .wrap{max-width:none; padding:0}
  .layout{display:block; padding:0}
  .hero{padding:0; border:0; background:none; min-height:220mm; display:flex; flex-direction:column; justify-content:center; page-break-after:always}
  .hero h1{font-size:30pt; max-width:none}
  .hero .lead{font-size:13pt}
  h2{font-size:18pt; page-break-before:always; margin-top:0; padding-top:4pt; border-top:3px solid var(--accent); break-after:avoid}
  h2.no-break{page-break-before:auto}
  h3{font-size:13pt; break-after:avoid}
  h4{font-size:10.5pt; break-after:avoid}
  p, li{orphans:3; widows:3}
  .table-wrap{overflow:visible; border:0; box-shadow:none; break-inside:auto}
  table{font-size:8.6pt; page-break-inside:auto}
  tr{page-break-inside:avoid}
  th{position:static; background:#eef0ea !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  thead{display:table-header-group}
  .card, .phase, blockquote{break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .cards{grid-template-columns:repeat(4,1fr); gap:8pt}
  .card .v{font-size:16pt}
  .phases{grid-template-columns:repeat(5,1fr); gap:6pt}
  .phase{padding:8pt 9pt; font-size:8.6pt}
  .phase ul{font-size:8pt}
  a{color:var(--ink); text-decoration:none}
  .sources a{color:var(--accent)}
  figure svg{border:1px solid #ccc}
  .chip{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* número do capítulo no título */
h2 .num{font-family:"IBM Plex Mono", monospace; font-size:.62em; font-weight:600; color:var(--accent); letter-spacing:.04em; margin-right:.5em; vertical-align:.18em}
.hero{scroll-margin-top:70px}
.main > section{scroll-margin-top:66px}
.phases{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.phase{padding:12px 13px}
.phase .t{font-size:.98rem}
.phase ul{font-size:.86rem}
.ref{font-family:"IBM Plex Mono", monospace; font-size:.7em; color:var(--ink-3); white-space:nowrap; vertical-align:.12em}
@media (max-width:900px){
  .table-wrap table{min-width:620px}
  .phases{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
@media print{
  .table-wrap table{min-width:0}
  .ref{font-size:6.6pt}
  h2 .num{color:var(--accent); -webkit-print-color-adjust:exact; print-color-adjust:exact}
}
.fig-scroll{overflow-x:auto}
.fig-scroll svg{min-width:780px}
@media print{ .fig-scroll{overflow:visible} .fig-scroll svg{min-width:0} }
.toc-print{display:none}
@media print{
  .toc-print{display:block; page-break-after:always}
  .toc-print .toc-title{font-family:"Zilla Slab", serif; font-size:20pt; font-weight:700; margin:0 0 14pt; padding-top:4pt; border-top:3px solid var(--accent)}
  .toc-print ol{list-style:none; padding:0; margin:0}
  .toc-print li{font-size:12pt; padding:6pt 0; border-bottom:1px solid var(--line)}
  .toc-print .num{font-family:"IBM Plex Mono", monospace; font-size:9.5pt; color:var(--accent); margin-right:10pt}
}
@media (max-width:900px){
  .side ol{columns:1; max-height:230px; overflow:auto}
  .side li{break-inside:avoid}
}
.chip-note{font-size:.78em; color:var(--ink-3)}

/* selo da conferência diária */
.valida{display:inline-flex; gap:8px; align-items:center; margin-top:14px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:.9rem; font-weight:600; text-decoration:none; color:var(--ink)}
.valida[hidden]{display:none}
.valida.ok::before{content:"✓"; color:var(--accent-2); font-weight:700}
.valida.alerta{border-color:#b3261e; color:#b3261e}
.valida.alerta::before{content:"!"; font-weight:700}
.valida-print{display:none}
@media print{ .valida-print{display:block; font-size:10pt; color:var(--ink-3); margin-top:10mm} }