/* The report dashboard (packages/web/painel.js), shared by the app and the public example pages. */
.dash { padding-top: 18px; }
.dash .hero { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 18px 20px; border-radius: 14px; background: #f8fafc; }
.dash .vbig { display: flex; gap: 14px; align-items: center; }
.dash .vic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font: 700 28px Inter, sans-serif; flex: none; }
.dash .vbig .lbl { font-size: 12.5px; color: #52514e; }
.dash .vbig .vv { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.dash .vbig .vsub { font-size: 12.5px; color: #898781; margin-top: 2px; }
.dash .vchecks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: #1f2937; max-width: 440px; }
.dash .vchecks li { display: flex; gap: 8px; align-items: flex-start; }
.dash .ci { width: 18px; height: 18px; border-radius: 5px; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; margin-top: 1px; }
.dash .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.dash .tile { padding: 14px 16px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; }
.dash .tile .tl { font-size: 12.5px; color: #52514e; }
.dash .tile .tv { font-size: 22px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }
.dash .tile .ts { font-size: 12px; color: #898781; margin-top: 2px; }
.dash .resumo { margin-top: 14px; padding: 16px 20px; border-radius: 12px; border: 1px solid #dbeafe; background: #f8fbff; font-size: 14px; display: block; }
.dash .resumo p { margin: 0 0 8px; } .dash .resumo ul, .dash .resumo ol { margin: 6px 0 10px; }
.dash .enquete { margin-top: 14px; padding: 16px 20px; border-radius: 12px; border: 1px solid #d1fae5; background: #f6fef9; font-size: 14px; display: block; }
.dash .enquete .et { display: block; font-size: 15px; margin-bottom: 4px; }
.dash .enquete .hint { margin: 0 0 10px; color: #4b5563; font-size: 13px; }
.dash .enquete p { margin: 0 0 8px; } .dash .enquete ul, .dash .enquete ol { margin: 6px 0 10px; }
.dash .enquete .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dash .enquete .acoes button, .dash .enquete .acoes a { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid #10b981; background: #fff; color: #047857; font: 600 13px Inter, sans-serif; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.dash .enquete .acoes a { background: #059669; border-color: #059669; color: #fff; }
.dash .charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; margin-top: 14px; }
.dash .viz { margin: 0; padding: 16px 18px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; background: #fcfcfb; }
.dash .viz figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.dash .viz figcaption b { font-size: 14px; } .dash .viz figcaption span { font-size: 12.5px; color: #52514e; }
.dash .svg { width: 100%; height: auto; display: block; overflow: visible; }
.dash .svg .ax { font: 11px Inter, sans-serif; fill: #898781; font-variant-numeric: tabular-nums; }
.dash .svg .lb { font: 500 12.5px Inter, sans-serif; fill: #52514e; }
.dash .svg .vl { font: 600 12.5px Inter, sans-serif; fill: #0b0b0b; }
.dash .svg [data-tip] { cursor: default; }
.dash .waffle rect[data-tip]:hover { opacity: .8; }
.dash .lgd { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: #52514e; align-items: center; }
.dash .lgd i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dash .lgd i.ln { height: 2px; width: 14px; border-radius: 1px; vertical-align: 3px; }
.vtip { position: fixed; z-index: 40; display: none; max-width: 320px; padding: 8px 11px; border-radius: 8px; background: #111827; color: #f9fafb; font-size: 12.5px; line-height: 1.45; white-space: pre-line; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.2); }