/* ============================================================
   fatura.css — Fatura individual (visual moderno: big numbers + gráficos)
   Usado por relatorio-sala.html e gerar-conta.html
   ============================================================ */
.fatura-m {
  --g1:#0f7a3d; --g2:#1f9d57; --g3:#34b14e;
  max-width:780px; margin:0 auto 28px; background:#eef2f1;
  border-radius:18px; overflow:hidden;
  box-shadow:0 12px 32px rgba(15,122,61,.12);
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif; color:#0f172a;
}

/* Header */
.fm-header {
  background:linear-gradient(135deg,#0f7a3d 0%,#1f9d57 55%,#34b14e 100%);
  color:#fff; padding:20px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.fm-header .logo { background:#fff; border-radius:12px; padding:8px 14px; line-height:0; }
.fm-header .logo img { height:40px; display:block; }
.fm-header .meta { text-align:right; }
.fm-header .meta .doc { font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:.9; }
.fm-header .meta .comp { font-size:24px; font-weight:800; }

/* Corpo */
.fm-body { padding:22px 26px; display:flex; flex-direction:column; gap:16px; }
.fm-card { background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(2,6,23,.05); }

/* Hero do valor */
.fm-hero { padding:22px 26px; border-left:6px solid var(--g2);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.fm-hero .sala { font-size:22px; font-weight:800; }
.fm-hero .inq  { font-size:13px; color:#64748b; margin-top:2px; }
.fm-hero .per  { font-size:12px; color:#94a3b8; margin-top:6px; }
.fm-hero .valor { text-align:right; }
.fm-hero .valor .lbl { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--g2); font-weight:800; }
.fm-hero .valor .num { font-size:46px; font-weight:800; line-height:1; letter-spacing:-1px; }
.fm-hero .valor .num small { font-size:22px; font-weight:700; color:#64748b; margin-right:4px; }

/* KPIs (big numbers) */
.fm-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.fm-kpi { padding:16px; text-align:center; }
.fm-kpi .v { font-size:26px; font-weight:800; line-height:1; }
.fm-kpi .u { font-size:11px; color:#94a3b8; font-weight:700; margin-top:2px; }
.fm-kpi .l { font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.5px; margin-top:6px; }

/* Gráficos */
.fm-charts { display:grid; grid-template-columns:190px 1fr; gap:8px; padding:18px 22px; align-items:center; }
.fm-donut-wrap { text-align:center; }
.fm-donut { width:148px; height:148px; border-radius:50%; margin:0 auto; position:relative; }
.fm-donut-hole { position:absolute; inset:27px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.fm-donut-hole span { font-size:22px; font-weight:800; }
.fm-donut-hole small { font-size:10px; color:#94a3b8; font-weight:700; }
.fm-donut-leg { margin-top:12px; display:flex; flex-direction:column; gap:5px; font-size:12px; }
.fm-donut-leg span { display:inline-flex; align-items:center; gap:7px; justify-content:center; }
.fm-donut-leg i { width:11px; height:11px; border-radius:3px; }
.fm-hist-title, .fm-comp-title { font-size:12px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.fm-bars { display:flex; align-items:flex-end; gap:10px; height:150px; }
.fm-bcol { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.fm-bval { font-size:10px; color:#64748b; font-weight:600; margin-bottom:4px; }
.fm-bar-stack { width:72%; min-height:3px; background:linear-gradient(180deg,#34b14e,#1f9d57); border-radius:7px 7px 0 0; display:flex; flex-direction:column; transition:.2s; }
.fm-bar-p { width:100%; background:linear-gradient(180deg,#f87171,#dc2626); border-radius:7px 7px 0 0; }
.fm-bcol.on .fm-bar-stack { outline:2px solid var(--g1); outline-offset:1px; }
.fm-blbl { font-size:10px; color:#94a3b8; margin-top:6px; }
.fm-bcol.on .fm-blbl { color:var(--g1); font-weight:800; }

/* Composição */
.fm-comp { padding:18px 22px; }
.fm-bar { height:30px; border-radius:8px; display:flex; overflow:hidden; background:#f1f5f9; }
.fm-bar div { height:100%; }
.fm-comp-leg { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:12px; color:#475569; }
.fm-comp-leg span { display:inline-flex; align-items:center; gap:7px; }
.fm-comp-leg i { width:11px; height:11px; border-radius:3px; }
.fm-comp-leg b { color:#0f172a; }

/* Leitura + rodapé */
.fm-leitura { font-size:12px; color:#475569; padding:12px 22px; background:#f8fafc; border-radius:10px; }
.fm-leitura b { color:#0f172a; }
.fm-foot { display:flex; justify-content:space-between; font-size:11px; color:#94a3b8; padding:2px 4px; }

@media(max-width:680px){
  .fm-kpis { grid-template-columns:repeat(2,1fr); }
  .fm-charts { grid-template-columns:1fr; }
  .fm-hero .valor { text-align:left; }
}

@media print {
  /* Força o navegador a imprimir cores/gradientes de fundo (donut, barras, header) */
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .sidebar, .topbar, .no-print { display:none !important; }
  .main { margin:0 !important; } .content { padding:0 !important; }
  body { background:#fff; }
  .fatura-m { box-shadow:none; max-width:100%; margin:0 auto; page-break-after:always; page-break-inside:avoid; }
  .fatura-m:last-child { page-break-after:auto; }
  /* Evita que cards quebrem no meio da página */
  .fm-card, .fm-charts, .fm-comp { page-break-inside:avoid; }
}