/* CARD_HARMON_V1 — harmoniza grids/cards mobile+PC, sem corte/sobreposicao/desproporcao */

/* =========================================================================
   CARD_HARMON_V1
   Carregado DEPOIS do base.css em TODAS as telas.
   Objetivo: resolver (1) espaco grande entre cards, (2) corte/sobreposicao,
   (3) desproporcao (card gigante esticado). So mexe em layout/espaco/grid/
   tamanho — NUNCA em cor/tema/fonte. NAO esconde conteudo. NAO toca em
   bottom-nav (.bnav), topbar nem modais.
   Breakpoints: <=430 (celular pequeno) | <=640 (celular) | >=641 (tablet/PC) | >=901 (PC largo)
   ========================================================================= */


/* -------------------------------------------------------------------------
   0) VARIAVEIS DE ESPACO (tokens) — fonte unica de gap/radius/padding.
   Usadas pelos blocos abaixo. Ajuste num lugar so se quiser recalibrar.
   ------------------------------------------------------------------------- */
:root{
  --ch-gap-mobile: 10px;   /* gap uniforme no celular */
  --ch-gap-desk: 13px;     /* gap uniforme no PC/tablet */
  --ch-radius: 15px;       /* radius coerente dos cards (14-16) */
  --ch-pad-mobile: 12px;   /* padding interno coerente no celular */
}


/* -------------------------------------------------------------------------
   1) ESPACO UNIFORME — gap padrao em TODOS os grids conhecidos.
   :where() mantem specificity baixa pra nao brigar com casos legitimos,
   mas cobre o conjunto de grids citados. Gap unico evita "buraco" entre cards.
   ------------------------------------------------------------------------- */
:where(
  .grid, .grid-2, .grid-3, .grid-4, .grid-auto,
  .today-grid, .quick-grid, .wear-grid, .wellness-bar,
  .pro-stats, .actions-grid, .kpi-row,
  .qa-grid, .kpis, .kpi-mega, .l118-stats,
  .calc-grid, .pat-list, .cards, .metric-row, .totals
){
  gap: var(--ch-gap-mobile);
  row-gap: var(--ch-gap-mobile);
  column-gap: var(--ch-gap-mobile);
}

/* No PC/tablet o gap respira um pouco mais (12-14px). */
@media (min-width:641px){
  :where(
    .grid, .grid-2, .grid-3, .grid-4, .grid-auto,
    .today-grid, .quick-grid, .wear-grid, .wellness-bar,
    .pro-stats, .actions-grid, .kpi-row,
    .qa-grid, .kpis, .kpi-mega, .l118-stats,
    .calc-grid, .pat-list, .cards, .metric-row, .totals
  ){
    gap: var(--ch-gap-desk);
    row-gap: var(--ch-gap-desk);
    column-gap: var(--ch-gap-desk);
  }
}


/* -------------------------------------------------------------------------
   1b) ELIMINAR ESPACO DOBRADO — cards que ja vivem DENTRO de um grid conhecido
   nao precisam de margin-top/bottom propria (gap ja cuida do espacamento).
   Seletor restrito a FILHOS DIRETOS de grids conhecidos -> nao quebra cards
   soltos que dependem de margin pra respirar fora de grid.
   ------------------------------------------------------------------------- */
:where(
  .today-grid, .quick-grid, .wear-grid, .wellness-bar,
  .pro-stats, .actions-grid, .kpi-row,
  .qa-grid, .kpis, .kpi-mega, .l118-stats,
  .calc-grid, .cards, .metric-row, .totals,
  .grid-2, .grid-3, .grid-4, .grid-auto
) > *{
  margin-top: 0;
  margin-bottom: 0;
}

/* Cards-vilao citados (.kpi/.banner/.recov/.meta-block) com margin extra
   ALEM do gap: zera so a margin vertical redundante, mantem o resto. */
:where(.kpi, .banner, .recov, .meta-block){
  margin-top: 0;
  margin-bottom: 0;
}


/* -------------------------------------------------------------------------
   2) SEM CORTE / SOBREPOSICAO HORIZONTAL.
   Itens de grid recebem min-width:0 (permite encolher dentro da coluna em
   vez de estourar) + box-sizing + max-width:100%. overflow-x:clip nos grids
   evita vazamento lateral sem cortar verticalmente (clip != hidden no eixo Y).
   ------------------------------------------------------------------------- */
:where(
  .today-grid, .quick-grid, .wear-grid, .wellness-bar,
  .pro-stats, .actions-grid, .kpi-row,
  .qa-grid, .kpis, .kpi-mega, .l118-stats,
  .calc-grid, .pat-list, .cards, .metric-row, .totals,
  .grid, .grid-2, .grid-3, .grid-4, .grid-auto
){
  max-width: 100%;
  overflow-x: clip;
}

:where(
  .today-grid, .quick-grid, .wear-grid, .wellness-bar,
  .pro-stats, .actions-grid, .kpi-row,
  .qa-grid, .kpis, .kpi-mega, .l118-stats,
  .calc-grid, .pat-list, .cards, .metric-row, .totals,
  .grid, .grid-2, .grid-3, .grid-4, .grid-auto
) > *{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}


/* -------------------------------------------------------------------------
   3) SEM DESPROPORCAO — matar o auto-fit que estica 1 card sozinho.
   Trocamos os grids conhecidos por COLUNAS FIXAS responsivas. !important
   pra vencer base.css e estilos inline da propria tela.
   Escala global: <=430 -> 2col | 431-640 -> 2col | 641-900 -> 3col | >=901 -> 4col
   ------------------------------------------------------------------------- */

/* 3.1) KPIs / quick-actions / stats: 2 colunas no celular (equilibrado) */
.today-grid, .quick-grid, .wear-grid,
.pro-stats, .kpi-row, .qa-grid,
.kpis, .kpi-mega, .l118-stats,
.metric-row, .totals{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
}

/* .wellness-bar permanece 2 colunas (1fr 1fr) — ja e o ideal no celular */
.wellness-bar{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
}

/* 3.2) actions-grid / pat-list / cards / calc-grid = cards LARGOS.
   No celular pequeno ficam em 1 coluna pra nao espremer texto/acoes. */
.actions-grid, .pat-list, .cards, .calc-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
}

/* Cards largos: a partir de 431px ja cabem 2 colunas confortaveis. */
@media (min-width:431px){
  .actions-grid, .pat-list, .cards, .calc-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 3.3) Tablet / PC pequeno (641-900): 3 colunas pros grids de KPI/acao. */
@media (min-width:641px){
  .today-grid, .quick-grid, .wear-grid,
  .pro-stats, .kpi-row, .qa-grid,
  .kpis, .kpi-mega, .l118-stats,
  .metric-row, .totals,
  .actions-grid, .pat-list, .cards, .calc-grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 3.4) PC largo (>=901): 4 colunas — aproveita a tela sem esticar card. */
@media (min-width:901px){
  .today-grid, .quick-grid, .wear-grid,
  .pro-stats, .kpi-row, .qa-grid,
  .kpis, .kpi-mega, .l118-stats,
  .metric-row, .totals,
  .actions-grid, .pat-list, .cards, .calc-grid{
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* 3.5) AUTO-FIT seguro (grids inline genericos dentro de main/.container).
   A tecnica minmax(min(100%, X), 1fr) impede o item solitario de esticar
   pra largura inteira: quando sobra 1 card, ele ocupa no maximo a largura
   natural da coluna, nunca a linha toda. Cobre [class*=grid] genericos sem
   bater nos grids ja tratados acima (esses ja tem colunas fixas + !important
   que vencem). Specificity baixa de proposito (so :where + sem !important). */
:where(main, .container) :where([class*="grid"]){
  grid-auto-flow: row;
}
:where(main, .container) :where(.grid-auto){
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}


/* -------------------------------------------------------------------------
   4) HEROS COM MARGIN NEGATIVO (nutri .hero -60px, medico .hero -50px,
   .l118-hero) puxam os KPIs por cima e cortam. No celular: reduzir o overlap,
   garantir padding-bottom no hero e elevar os grids de KPI (position+z-index)
   pra ficarem ACIMA, visiveis e sem corte.
   ------------------------------------------------------------------------- */
@media (max-width:640px){
  /* Overlap menor no celular (de -50/-60 pra -28) -> KPI nao some atras */
  .hero, .l118-hero{
    margin-bottom: -28px !important;
    padding-bottom: 40px !important;   /* espaco interno pro conteudo nao colar */
  }

  /* KPIs logo abaixo do hero sobem por cima: garantir que fiquem ACIMA */
  /* HERO_FILTERBAR_FIX_V1: .filter-bar/.wrap tambem (telas prescricoes/exames/documentos
     tem botoes de filtro logo abaixo do hero — sem isto ficavam cortados atras do overlap) */
  .kpis, .kpi-mega, .l118-stats, .filter-bar, .hero + .wrap, .hero + .wrap > :first-child{
    position: relative;
    z-index: 2;
  }
  .hero + .wrap{ padding-top: 10px; }
}

/* No PC mantemos um overlap mais suave que o original tambem, pra nao cortar
   em telas medias; ainda preserva o efeito visual de sobreposicao do hero. */
@media (min-width:641px){
  .hero, .l118-hero{
    padding-bottom: 24px;
  }
  .kpis, .kpi-mega, .l118-stats, .filter-bar, .hero + .wrap, .hero + .wrap > :first-child{
    position: relative;
    z-index: 2;
  }
}


/* -------------------------------------------------------------------------
   5) CARD TAMANHO COERENTE — radius/padding padronizados e altura equilibrada.
   Aplica nos cards conhecidos (filhos diretos dos grids tratados) + classes
   de card comuns. NAO mexe em cor/borda/sombra (so geometria).
   ------------------------------------------------------------------------- */

/* Radius coerente nos cards conhecidos (14-16px) */
:where(
  .kpi, .banner, .recov, .meta-block, .card,
  .qa-grid > *, .kpis > *, .kpi-mega > *, .l118-stats > *,
  .pro-stats > *, .kpi-row > *, .actions-grid > *,
  .today-grid > *, .quick-grid > *, .wear-grid > *,
  .pat-list > *, .cards > *, .calc-grid > *
){
  border-radius: var(--ch-radius);
}

/* Celular: padding interno coerente + nao deixar KPI/quick virar bloco gigante.
   Itens de grids de KPI/quick recebem altura minima modesta e conteudo
   centrado verticalmente -> aspecto equilibrado, nao "alto demais". */
@media (max-width:640px){
  :where(
    .kpi, .banner, .recov, .meta-block,
    .qa-grid > *, .kpis > *, .kpi-mega > *, .l118-stats > *,
    .pro-stats > *, .kpi-row > *,
    .today-grid > *, .quick-grid > *, .wear-grid > *
  ){
    padding: var(--ch-pad-mobile);
  }

  /* Quick-actions / KPIs: aspecto compacto e uniforme (nao esticados). */
  :where(
    .qa-grid > *, .today-grid > *, .quick-grid > *, .wear-grid > *,
    .kpis > *, .kpi-mega > *, .l118-stats > *, .pro-stats > *, .kpi-row > *
  ){
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
   5b) NEUTRALIZAR CARD "GIGANTE" com largura fixa inline no celular.
   Cards com width fixo (style inline) estouram a tela -> no celular forcamos
   largura fluida. Cobre elementos de card conhecidos; specificity alta via
   classe + media pra vencer width inline em pixels.
   ------------------------------------------------------------------------- */
@media (max-width:640px){
  .card, .kpi, .banner, .recov, .meta-block,
  .actions-grid > *, .pat-list > *, .cards > *, .calc-grid > *{
    width: auto !important;
    max-width: 100% !important;
  }
}


/* -------------------------------------------------------------------------
   6) SAFETY GERAL — nenhum filho de grid conhecido pode vazar a tela inteira.
   Garante que mesmo cards com conteudo largo (tabela/imagem) nao empurrem
   o grid horizontalmente no celular.
   ------------------------------------------------------------------------- */
@media (max-width:640px){
  :where(
    .today-grid, .quick-grid, .wear-grid, .wellness-bar,
    .pro-stats, .actions-grid, .kpi-row,
    .qa-grid, .kpis, .kpi-mega, .l118-stats,
    .calc-grid, .pat-list, .cards, .metric-row, .totals
  ) > * img,
  :where(
    .today-grid, .quick-grid, .wear-grid, .wellness-bar,
    .pro-stats, .actions-grid, .kpi-row,
    .qa-grid, .kpis, .kpi-mega, .l118-stats,
    .calc-grid, .pat-list, .cards, .metric-row, .totals
  ) > * {
    max-width: 100%;
  }
}
/* =========================================================================
   CARD_HARMON_V1 — REFORÇO 1: grids inline com auto-fit (146 telas).
   Captura QUALQUER elemento cujo style contenha auto-fit minmax(...).
   Como o minmax inline pode deixar 1 card solitario esticar pra linha toda,
   forcamos colunas fixas responsivas por faixa. Specificity alta (atributo +
   !important) pra vencer o style inline.
   ========================================================================= */
[style*="auto-fit"]{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: var(--ch-gap-mobile, 10px) !important;
}
@media (min-width:641px){
  [style*="auto-fit"]{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: var(--ch-gap-desk, 13px) !important; }
}
@media (min-width:901px){
  [style*="auto-fit"]{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
/* grids inline com minmax >= 240px sao cards LARGOS -> 1 col no celular, 2 a partir de 561px */
@media (max-width:560px){
  [style*="minmax(2"], [style*="minmax(3"]{ grid-template-columns: 1fr !important; }
}
/* filhos desses grids inline tambem nao podem vazar */
[style*="auto-fit"] > *{ min-width:0 !important; max-width:100% !important; box-sizing:border-box; }

/* HERO_FILTERBAR_FIX_V1: filter-bar/.wrap elevados sobre o overlap do hero (fim cards cortados) */