/* ===========================================================================
   VISUAL — a camada de acabamento do OdontoCare.

   Carregada DEPOIS de modulos.css, de propósito: nada aqui reescreve o
   arquivo grande, só ajusta o que está por cima. É o que deixa desfazer o
   visual novo removendo uma linha do index.html, sem risco para as 30 telas.

   POR QUE MEXER NO VISUAL. O sistema vai ser mostrado a uma clínica de
   estética, e numa clínica de estética a aparência é o produto. Uma tela
   correta e sem cuidado comunica "sistema de gestão"; a mesma tela com respiro,
   canto macio e um gráfico legível comunica "isto foi feito para mim".

   NADA DE `!important` PARA VENCER ESTILO INLINE. A barra lateral e a topo são
   escritas com style inline no index.html, e inline ganha de folha. Em vez de
   brigar por especificidade — que quebra calado quando alguém edita o HTML —
   o visual daquelas duas áreas é trocado pela PALETA, que elas já consomem por
   variável.
   =========================================================================== */

/* --------------------------------------------------------------- ritmo ---- */
.v2 { gap: 18px; }

/* ---------------------------------------------------------------- card ---- */
.v2-card {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(24, 16, 20, .04), 0 8px 24px -18px rgba(24, 16, 20, .18);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.v2-card:hover { box-shadow: 0 1px 2px rgba(24, 16, 20, .05), 0 14px 34px -20px rgba(24, 16, 20, .26); }
.v2-card-h { padding: 16px 18px 14px; }
.v2-card-h .v2-h { font-size: 14.5px; letter-spacing: -.01em; }
.v2-card-b { padding: 18px; gap: 14px; }

/* O título do cartão ganha um filete: é o detalhe que faz a tela parecer
   desenhada em vez de gerada. */
.v2-card-h .v2-h::before {
  content: ''; display: inline-block; width: 3px; height: 13px; border-radius: 2px;
  background: var(--primary); margin-right: 8px; vertical-align: -1px; opacity: .9;
}

/* ----------------------------------------------------------------- kpi ---- */
.v2-kpis { gap: 14px; }
.v2-kpi {
  border-radius: 14px; padding: 15px 17px; gap: 5px; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(24, 16, 20, .04);
}
.v2-kpi::after {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--primary); opacity: .55;
}
.v2-kpi-l { font-size: 10.5px; letter-spacing: .05em; }
.v2-kpi-v { font-size: 24px; letter-spacing: -.03em; }

/* --------------------------------------------------------------- tabela --- */
.v2-t { font-size: 12.8px; }
.v2-t th { font-size: 10px; letter-spacing: .06em; padding: 12px 16px; }
.v2-t td { padding: 13px 16px; }
.v2-t tbody tr { transition: background .12s ease; }
.v2-t tbody tr.clic:hover { background: var(--primary-soft); }

/* ----------------------------------------------------------------- tag ---- */
.v2-tag { padding: 4px 10px; font-size: 10.5px; letter-spacing: .01em; }

/* --------------------------------------------------------------- botão ---- */
.v2-btn { border-radius: 10px; padding: 9px 15px; transition: all .15s ease; }
.v2-btn.pri { box-shadow: 0 2px 10px -3px var(--primary); }
.v2-btn:active { transform: translateY(1px); }

/* ================================================================ gráficos = */

.v2-gx { width: 100%; }
.v2-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* rosca --------------------------------------------------------------------- */
.v2-rosca { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.v2-rosca-svg { flex: none; width: 148px; }
.v2-rosca-svg svg { width: 148px; height: 148px; display: block; }
.v2-rosca-l { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.v2-rosca-i { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.v2-rosca-i i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.v2-rosca-i .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-rosca-i .v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* barras horizontais -------------------------------------------------------- */
.v2-bh { display: flex; flex-direction: column; gap: 11px; }
.v2-bh-l { display: grid; grid-template-columns: minmax(96px, 168px) 1fr auto; align-items: center; gap: 12px; }
.v2-bh-l .r { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-bh-l .b { height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.v2-bh-l .f { height: 100%; border-radius: 999px; transition: width .4s ease; }
.v2-bh-l .v { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-bh-l .v .d { font-weight: 500; color: var(--text-muted); margin-left: 7px; font-size: 11.5px; }
@media (max-width: 640px) {
  .v2-bh-l { grid-template-columns: 1fr auto; }
  .v2-bh-l .b { grid-column: 1 / -1; }
}

/* anel de meta -------------------------------------------------------------- */
.v2-anel { display: flex; align-items: center; gap: 13px; }
.v2-anel svg { width: 80px; height: 80px; flex: none; }
.v2-anel-t { min-width: 0; }

/* sparkline ----------------------------------------------------------------- */
.v2-spark { width: 100%; max-width: 130px; height: 30px; display: block; margin-top: 4px; }

/* grade de gráficos --------------------------------------------------------- */
.v2-graficos { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 980px) { .v2-graficos { grid-template-columns: minmax(0, 1fr); } }

/* colunas antigas: só arredonda o topo para combinar com o resto ------------- */
.v2-graf .b { border-radius: 5px 5px 0 0; }