/* ============================================================
   AZPET™ · Report Design System — CSS de impressão (A4)
   Fonte única de estilo para os relatórios em HTML → PDF.
   Paleta/tipografia do DS v3.0 (mesma da landing e dashboards).
   Render: Chrome/Puppeteer · page.pdf({printBackground:true})
   ============================================================ */

:root{
  --navy:#071827; --navy2:#0D1F3C;
  --teal:#0099BB; --teal-deep:#006F8A; --teal-light:#E0F7FC;
  --long:#5B8DEF;
  --green:#2E9D70; --amber:#D97706;
  --ink:#071827; --ink2:#33485A; --ink3:#5B7180; --ink4:#7B8F9C;
  --line:#E6EDF2; --line2:#EEF2F5; --nevoa:#F8FAFC;
  --disp:'Plus Jakarta Sans',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff}
body{
  font-family:var(--body);color:var(--ink2);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Página A4 ---------- */
@page{size:A4;margin:0}
.page{
  width:210mm;height:296.5mm;position:relative;overflow:hidden;
  border-top:1.1mm solid var(--teal); /* faixa teal canônica (Norma v2.1 · ~4px) */
  page-break-after:always;break-after:page;
  background:
    radial-gradient(120mm 70mm at 105% -6%, #E7F8FC 0, rgba(231,248,252,0) 60%),
    radial-gradient(100mm 60mm at -8% 2%, #EEF6FF 0, rgba(238,246,255,0) 55%),
    linear-gradient(180deg,#FDFEFF 0,#F7FBFD 100%);
  padding:16mm 14mm 18mm;
  display:flex;flex-direction:column;
}
.page:last-child{page-break-after:auto;break-after:auto}

/* DNA visual — rede hexagonal sutil (canto sup-esq) + onda no rodapé */
.page::before{
  content:'';position:absolute;left:0;top:0;width:70mm;height:52mm;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='200' viewBox='0 0 260 200'><g fill='none' stroke='%23BDECF5' stroke-width='1.1'><path d='M30 20l14-8 14 8v16l-14 8-14-8z'/><path d='M70 44l14-8 14 8v16l-14 8-14-8z'/><path d='M22 78l14-8 14 8v16l-14 8-14-8z'/><path d='M112 18l14-8 14 8v16l-14 8-14-8z'/><path d='M64 120l14-8 14 8v16l-14 8-14-8z'/><circle cx='58' cy='36' r='2.4' fill='%23BDECF5'/><circle cx='104' cy='60' r='2.4' fill='%23BDECF5'/><circle cx='36' cy='110' r='2.4' fill='%23BDECF5'/><path d='M58 36L70 52M98 52l14-18M50 94l14 18' stroke='%23D5F2F9'/></g></svg>");
  background-repeat:no-repeat;
}
.page::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:26mm;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='100' viewBox='0 0 800 100' preserveAspectRatio='none'><path d='M0 70 C 160 30 320 95 480 60 C 620 32 720 70 800 48 L 800 100 L 0 100 Z' fill='%23E7F8FC' opacity='.55'/><path d='M0 84 C 200 55 400 100 620 72 C 700 62 760 74 800 66 L 800 100 L 0 100 Z' fill='%23DDF4FA' opacity='.45'/></svg>");
  background-size:100% 100%;background-repeat:no-repeat;
}
.content{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;min-height:0}

/* ---------- Cabeçalho das páginas internas ---------- */
.rhead{display:flex;align-items:center;justify-content:space-between;padding-bottom:4mm;border-bottom:.4mm solid var(--line);margin-bottom:7mm}
.rhead .id{display:flex;align-items:center;gap:3.2mm}
.rhead .id img{height:9mm;width:auto}
.rhead .id .prod{font-family:var(--disp);font-weight:700;font-size:10.5pt;color:var(--navy);line-height:1.15}
.rhead .id .sub{font-family:var(--mono);font-size:6pt;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);margin-top:.8mm}
.rhead .meta{text-align:right;font-family:var(--mono);font-size:6.4pt;color:var(--ink4);line-height:1.7}
.rhead .meta b{color:var(--ink2);font-weight:600}

/* ---------- Rodapé ---------- */
.rfoot{position:absolute;left:14mm;right:14mm;bottom:7mm;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:8mm}
.rfoot .gov{font-size:6.6pt;color:var(--ink4);font-style:italic;max-width:120mm;line-height:1.45}
.rfoot .brand{font-family:var(--mono);font-size:6.2pt;color:var(--ink4);text-align:right;white-space:nowrap}
.rfoot .brand b{color:var(--teal-deep);font-style:normal}

/* ---------- Tipografia ---------- */
.eyebrow{font-family:var(--mono);font-size:6.8pt;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-deep);font-weight:600}
h1.title{font-family:var(--disp);font-weight:800;font-size:20pt;color:var(--navy);letter-spacing:-.02em;line-height:1.06;margin:1.6mm 0 0}
h2.title{font-family:var(--disp);font-weight:800;font-size:14.5pt;color:var(--navy);letter-spacing:-.015em;margin:1.4mm 0 0}
.deck{font-size:8.8pt;color:var(--ink3);margin-top:1.8mm;line-height:1.5}
.rule{width:14mm;height:1.1mm;border-radius:2mm;background:var(--teal);margin-top:2.6mm}
.lbl{font-family:var(--mono);font-size:6.2pt;letter-spacing:.13em;text-transform:uppercase;color:var(--ink4);font-weight:500}
.sec{font-family:var(--mono);font-size:6.8pt;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin:6mm 0 2.6mm}

/* ---------- Cartões ---------- */
.card{background:#fff;border:.35mm solid var(--line);border-radius:3.6mm;padding:5mm;box-shadow:0 1.2mm 3mm rgba(7,24,39,.045)}
.card.soft{background:linear-gradient(150deg,#F3FBFD 0,#EFF5FB 100%);border-color:rgba(0,153,187,.18)}
.card.flat{box-shadow:none}
.grid{display:grid;gap:4mm}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr 1fr}.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- Pílulas de banda (Vitality Score™ — 4 bandas canônicas) ---------- */
.pill{display:inline-flex;align-items:center;gap:1.8mm;border-radius:99mm;padding:1.4mm 3.2mm;font-family:var(--mono);font-size:7pt;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pill .dot{width:2.2mm;height:2.2mm;border-radius:50%;flex:0 0 auto}
.pill.estavel{background:#E7F5EF;color:#1F6E4E}.pill.estavel .dot{background:var(--green)}
.pill.observacao{background:var(--teal-light);color:var(--teal-deep)}.pill.observacao .dot{background:var(--teal)}
.pill.atencao{background:#FBF1E2;color:#8F5104}.pill.atencao .dot{background:var(--amber)}
.pill.prioritario{background:#FBF1E2;color:#8F5104;border:.4mm solid var(--amber)}.pill.prioritario .dot{background:var(--amber)}
.pill.neutro{background:var(--line2);color:var(--ink3)}.pill.neutro .dot{background:var(--ink4)}
.pill.calib{background:var(--line2);color:var(--ink3);font-size:6.2pt}.pill.calib .dot{background:var(--ink4)}

/* chips de status pequenos (tabelas) */
.chip{display:inline-block;border-radius:1.6mm;padding:.8mm 2.2mm;font-family:var(--mono);font-size:6.2pt;font-weight:600}
.chip.atencao{background:#FBF1E2;color:#8F5104}
.chip.estavel{background:#E7F5EF;color:#1F6E4E}
.chip.obs{background:var(--teal-light);color:var(--teal-deep)}
.chip.neutro{background:var(--line2);color:var(--ink3)}

/* ---------- Tabelas ---------- */
table.tb{width:100%;border-collapse:collapse}
.tb th{font-family:var(--mono);font-size:6.2pt;letter-spacing:.11em;text-transform:uppercase;color:var(--ink4);font-weight:500;text-align:left;padding:2mm 2.4mm;border-bottom:.4mm solid var(--line)}
.tb td{font-size:8.2pt;color:var(--ink2);padding:2.4mm;border-bottom:.25mm solid var(--line2);vertical-align:middle}
.tb td.mono{font-family:var(--mono);font-size:7.4pt}
.tb tr:last-child td{border-bottom:none}
.tb td b{color:var(--navy);font-weight:600}

/* ---------- Barras de score por sistema ---------- */
.sysrow{display:flex;align-items:center;gap:3mm;margin-bottom:2.8mm}
.sysrow .nm{width:22mm;font-family:var(--disp);font-weight:700;font-size:8pt;color:var(--navy)}
.sysrow .bar{flex:1;height:3.4mm;border-radius:2mm;background:var(--line2);overflow:hidden}
.sysrow .bar i{display:block;height:100%;border-radius:2mm}
.sysrow .val{width:8mm;text-align:right;font-family:var(--mono);font-size:7.6pt;font-weight:600;color:var(--navy)}
.sysrow .st{width:26mm;text-align:right}

/* ---------- Listas ---------- */
ul.dash{list-style:none}
ul.dash li{position:relative;padding-left:4.6mm;font-size:8.4pt;color:var(--ink2);line-height:1.5;margin-bottom:1.8mm}
ul.dash li::before{content:'';position:absolute;left:0;top:1.55mm;width:2.4mm;height:.7mm;border-radius:1mm;background:var(--teal)}
ul.dash li b{color:var(--navy);font-weight:600}

/* ---------- Cartão de sinal (Clinical Signals™) ---------- */
.signal{border:.35mm solid var(--line);border-radius:3mm;padding:3.4mm 4mm;background:#fff}
.signal.prev{border-left:1.4mm solid var(--amber)}
.signal.long{border-left:1.6mm solid var(--long)}
.signal.conv{border:.6mm solid var(--amber)}
.signal.estab{border-left:1.4mm solid var(--green)}
.signal h4{font-family:var(--disp);font-weight:700;font-size:8.6pt;color:var(--navy)}
.signal p{font-size:7.6pt;color:var(--ink3);margin-top:1mm;line-height:1.45}
.signal .ref{font-family:var(--mono);font-size:6pt;color:var(--ink4);margin-top:1.4mm}

/* ---------- Sparkline / gráfico ---------- */
.spark svg{display:block}
.axis{font-family:var(--mono);font-size:5.8pt;fill:var(--ink4)}

/* ---------- Gráfico em pizza (donut) — valores dentro das fatias ---------- */
.pie{display:flex;align-items:center;justify-content:center;gap:5mm}
.pie .chartbox{flex:0 0 auto}
.pie .chartbox svg{display:block;width:100%;height:100%}
.plg{display:flex;flex-direction:column;gap:1.5mm;min-width:0}
.plg .it{display:flex;align-items:center;gap:2mm;font-size:7pt;color:var(--ink2);line-height:1.25;white-space:nowrap}
.plg .sw{width:2.6mm;height:2.6mm;border-radius:.8mm;flex:0 0 auto}
.plg .it b{color:var(--navy);font-weight:600}
.plg .it .n{font-family:var(--mono);font-size:6.4pt;color:var(--ink3);margin-left:auto;padding-left:3mm;white-space:nowrap}

/* ---------- Capa ---------- */
.cover{align-items:stretch;text-align:left}
.cover .brandrow{display:flex;align-items:center;justify-content:space-between}
.cover .brandrow img.logo{height:22mm}
.cover .prodpill{display:inline-flex;align-items:center;gap:2mm;background:#fff;border:.4mm solid rgba(0,153,187,.35);color:var(--teal-deep);border-radius:99mm;padding:2.2mm 5mm;font-family:var(--mono);font-weight:600;font-size:8pt;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 1.5mm 4mm rgba(0,153,187,.12)}
.cover h1.big{font-family:var(--disp);font-weight:800;font-size:30pt;letter-spacing:-.025em;color:var(--navy);line-height:1.04}
.cover h1.big em{font-style:normal;color:var(--teal)}
.cover .tagline-en{font-family:var(--mono);font-size:7pt;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-deep)}
.petcard{background:rgba(255,255,255,.8);border:.4mm solid rgba(255,255,255,.9);border-radius:5mm;box-shadow:0 4mm 10mm rgba(7,24,39,.10);padding:6mm;display:flex;gap:6mm;align-items:center;backdrop-filter:blur(4px)}
.petcard img.photo{width:34mm;height:34mm;border-radius:4mm;object-fit:cover;border:.5mm solid #fff;box-shadow:0 2mm 5mm rgba(7,24,39,.18)}
.petcard .avatar{width:34mm;height:34mm;border-radius:4mm;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:26pt;color:#fff;background:linear-gradient(150deg,#22B8D4,#0099BB 55%,#007E9C)}
.petcard h2{font-family:var(--disp);font-weight:800;font-size:19pt;color:var(--navy);letter-spacing:-.02em}
.petcard .species{font-size:8.6pt;color:var(--ink3);margin-top:1mm}
.petcard .idline{font-family:var(--mono);font-size:7pt;color:var(--teal-deep);margin-top:1.6mm;letter-spacing:.06em}
.kpirow{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm}
.kpi{background:#fff;border:.35mm solid var(--line);border-radius:3.4mm;padding:3.6mm 4mm;box-shadow:0 1mm 2.6mm rgba(7,24,39,.04)}
.kpi .v{font-family:var(--disp);font-weight:800;font-size:13pt;color:var(--navy)}
.kpi .k{font-family:var(--mono);font-size:5.8pt;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);margin-top:.8mm}
.qrbox{display:flex;align-items:center;gap:4mm}
.qrbox img{width:17mm;height:17mm;border:.35mm solid var(--line);border-radius:2mm;background:#fff;padding:1mm}
.qrbox .t{font-size:7.4pt;color:var(--ink3);line-height:1.5}
.qrbox .t b{font-family:var(--mono);color:var(--teal-deep);font-weight:600;font-size:7pt}

/* co-branding */
.cobrand{display:flex;align-items:center;gap:3.5mm;background:#fff;border:.35mm solid var(--line);border-radius:3mm;padding:3mm 4mm;box-shadow:0 1mm 2.6mm rgba(7,24,39,.04)}
.cobrand img{width:11mm;height:11mm;border-radius:2mm;object-fit:cover}
.cobrand .nm{font-family:var(--disp);font-weight:700;font-size:8.6pt;color:var(--navy)}
.cobrand .tg{font-size:6.6pt;color:var(--ink4)}

/* utilitários */
.mt2{margin-top:2mm}.mt3{margin-top:3mm}.mt4{margin-top:4mm}.mt5{margin-top:5mm}.mt6{margin-top:6mm}.mt8{margin-top:8mm}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.gap4{gap:4mm}.gap6{gap:6mm}
.small{font-size:7.4pt;color:var(--ink3);line-height:1.5}
.micro{font-size:6.6pt;color:var(--ink4);line-height:1.45}
.navybox{background:linear-gradient(150deg,#F3FBFD 0,#EDF4FB 100%);border:.35mm solid rgba(0,153,187,.20);border-radius:3.4mm;padding:4.5mm 5mm}
.navybox .bt{font-family:var(--mono);font-size:6.4pt;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);font-weight:600;margin-bottom:1.8mm}
.navybox p{font-size:8.2pt;color:var(--ink2);line-height:1.55}

@media screen{
  body{background:#E9EFF4;padding:10mm 0}
  .page{margin:0 auto 10mm;box-shadow:0 6mm 18mm rgba(7,24,39,.16);border-radius:2mm}
}
