/* Praxis Dialyse · módulo hospitalar · Qualidade: indicadores por hospital, notificações, SAE e requisições. Prefixo hql-. */
.hql { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hql-corpo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hql-abas { max-width: 100%; }
.hql-cresce { flex: 1 1 auto; }
.hql-h3 { margin: 4px 0 8px; font-size: 1rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hql-h3 small { font-weight: 400; font-size: .82rem; }
.hql-nota { margin: 0 4px; font-size: .85rem; }
.hql .hql-filtro { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.hql-filtro .sp-abas { margin: 0; }
.hql-mes { display: flex; align-items: center; gap: 8px; }
.hql-mes b { min-width: 9.5em; text-align: center; }
.hql-sel { display: flex; align-items: center; gap: 6px; font-size: .9rem; min-width: 0; }
.hql-sel select { max-width: 100%; min-width: 0; }
.hql-kpis { margin: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.hql-kpis .sp-kpi.at { border-left: 4px solid var(--at); }
.hql-kpis .sp-kpi.mal { border-left: 4px solid var(--mal); }
.hql-kpis .sp-kpi.ok { border-left: 4px solid var(--ok); }
.hql-kpis .sp-kpi small { display: block; color: var(--aco); font-size: .78rem; }
.hql-v-at { color: var(--at); font-weight: 700; }
.hql-v-ok { color: var(--ok); font-weight: 700; }
.hql-aviso { background: var(--at-s); border: 1px solid var(--at); color: var(--tinta); border-radius: 8px; padding: 8px 10px; margin: 6px 0; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hql-linha-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

/* Gráficos */
.hql-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.hql-graf { margin: 0; min-width: 0; }
.hql-graf figcaption { font-weight: 700; margin-bottom: 6px; }
.hql-graf svg { width: 100%; height: auto; display: block; max-height: 360px; }
.hql-svg-r { font-size: 11px; fill: var(--aco); }
.hql-svg-v { font-size: 11px; fill: var(--tinta); font-weight: 700; }
.hql-svg-b { fill: var(--px); opacity: .55; }
.hql-svg-atual { opacity: 1; }
.hql-svg-at { fill: var(--at); opacity: .8; }
.hql-svg-mal { fill: var(--mal); opacity: .85; }
.hql-svg-eixo { stroke: var(--linha); stroke-width: 1; }

/* Tabelas: viram cartões no celular */
.hql-tab { width: 100%; }
.hql-tab td:not(:first-child), .hql-tab th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* Listas e cartões */
.hql-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hql-card { border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; background: var(--sup); display: flex; flex-direction: column; gap: 4px; min-width: 0; border-left-width: 4px; }
.hql-card.hql-u-at { border-left-color: var(--at); }
.hql-card.hql-u-mal { border-left-color: var(--mal); }
.hql-card.hql-velha { opacity: .65; }
.hql-card-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hql-card .acoes { margin-top: 4px; flex-wrap: wrap; }
.hql-desc { margin: 2px 0; font-size: .92rem; overflow-wrap: anywhere; }
.hql-itens { margin: 2px 0; padding-left: 18px; font-size: .92rem; }
.hql-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--linha); padding: 4px 0; }
.hql-item span { min-width: 0; overflow-wrap: anywhere; }

/* Gaveta (SAE, notificação, requisição) */
.hql-g { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hql-g h2 { margin: 0; font-size: 1.15rem; }
.hql-at { margin: 0; }
.hql-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hql-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha); border-radius: 999px; padding: 6px 12px; cursor: pointer; background: var(--sup); font-size: .9rem; max-width: 100%; }
.hql-chip { margin: 0; color: var(--tinta); font-weight: 500; }
.hql .hql-chip > input[type][name], .hql-g .hql-chip > input[type][name] { margin: 0; flex: none; width: auto; padding: 0; border: 0; }
.hql-chip span { overflow-wrap: anywhere; }
.hql-chip:has(input:checked) { border-color: var(--px); background: var(--px-suave); box-shadow: inset 0 0 0 1px var(--px); }
.hql-sug .btn { font-size: .8rem; }
.hql-add { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 8px; align-items: end; }
.hql-add .campo { margin: 0; }
.hql-ficha { width: 100%; border-collapse: collapse; }
.hql-ficha th { text-align: left; width: 34%; color: var(--aco); font-weight: 600; vertical-align: top; padding: 5px 8px 5px 0; }
.hql-ficha td { padding: 5px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.hql-ficha tr + tr { border-top: 1px solid var(--linha); }

/* Impressão (relatório e fichas) */
.hql-imp { width: 100%; border-collapse: collapse; margin: 4px 0 10px; font-size: 10.5pt; }
.hql-imp th, .hql-imp td { border: 1px solid #999; padding: 3px 6px; text-align: left; }
.hql-imp th { background: #eee; }

@media (max-width: 600px) {
  .hql .hql-filtro { gap: 8px; }
  .hql .hql-filtro > .btn { flex: 1 1 45%; }
  .hql-sel { flex: 1 1 100%; }
  .hql-sel select { flex: 1; }
  .hql-mes { flex: 1 1 100%; justify-content: space-between; }
  .hql-kpis { grid-template-columns: 1fr 1fr; }
  .hql-graficos { grid-template-columns: minmax(0, 1fr); }
  .hql-tab thead { display: none; }
  .hql-tab, .hql-tab tbody, .hql-tab tr, .hql-tab td { display: block; width: 100%; }
  .hql-tab tr { border: 1px solid var(--linha); border-radius: 8px; margin-bottom: 8px; padding: 6px 10px; background: var(--sup); }
  .hql-tab td { display: flex; justify-content: space-between; gap: 10px; border: 0; padding: 3px 0; text-align: right; }
  .hql-tab td::before { content: attr(data-r); color: var(--aco); text-align: left; font-weight: 400; }
  .hql-tab td:first-child { font-weight: 700; text-align: left; }
  .hql-tab td:first-child::before { content: none; }
  .hql-add { grid-template-columns: minmax(0, 1fr) 90px; }
  .hql-add .btn { grid-column: 1 / -1; }
  .hql-ficha th { width: 40%; }
}