:root{
  --bg:#f5f7fb;
  --card:#fff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#0d6efd;
  --border:#e5e7eb;
  --topbar-h:56px;
}

/* Em telas médias/grandes, evita quebra dentro de .filters para manter a topbar com uma linha */
@media(min-width: 900px){
  .topbar .filters{ flex-wrap: nowrap; overflow-x: auto; }
}

/* Ajustes de responsividade da topbar para evitar crescimento vertical */
@media(max-width: 900px){
  .filters{ gap:.35rem }
  .filters input{ min-width:120px }
  .topbar{ padding:.45rem .6rem }
}

/* Ajustes de responsividade da topbar para evitar crescimento vertical */
@media(max-width: 900px){
  .filters{ gap:.35rem }
  .filters input{ min-width:120px }
  .topbar{ padding:.45rem .6rem }
}

*{
  box-sizing:border-box
}

body{
  margin:0;
  background:var(--bg);
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  color:var(--text);
  line-height:1.5
}

/* Página: overlay de transição para comparar topbar entre telas */
.page-transition{
  position:fixed;
  inset:0;
  background:var(--bg);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:10000;
}
.page-transition.active{ opacity:1; pointer-events:auto }

.topbar{
  display:flex;
  flex-wrap:nowrap;
  gap:.6rem;
  align-items:center;
  justify-content:space-between;
  padding:.4rem calc(.75rem + 1px + 1rem);
  background:var(--card);
  border-bottom:1px solid var(--border);
  max-width:1375px;
  margin:0 auto;
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:saturate(1.2);
  overflow-x:auto;
  min-height: var(--topbar-h);
}

.topbar h1{
  font-size:1.25rem;
  margin:0;
  white-space:nowrap
}

/* Botão de alternância de filtros (oculto por padrão; visível no mobile) */
.filter-toggle{
  display:none;
}

.filters{
  display:flex;
  flex-wrap:nowrap; /* evita aumentar a altura da topbar */
  gap:.5rem;
  align-items:center
}

/* Agrupamento dos botões à direita (Individual + Filtros) */
.topbar .topbar-actions{
  display:flex;
  gap:.5rem;
  align-items:center;
  margin-left:auto;
}

.filters label{
  color:var(--muted);
  font-size:.85rem;
  display:flex;
  flex-direction:row; /* texto + input na mesma linha para não crescer */
  align-items:center;
  gap:.35rem;
  margin:0;
}

.filters input{
  padding:.4rem .5rem;
  border-radius:.5rem;
  border:1px solid var(--border);
  background:#fff;
  min-width:140px
}

/* Normaliza altura dos controles da topbar para altura consistente */
.topbar .filters input,
.topbar .filters select,
.topbar .filters button{
  height:36px;
}

/* Normaliza botões na topbar para altura fixa */
.topbar .filters button{
  padding:0 .75rem;
  line-height:1;
}

button{
  padding:.5rem .75rem;
  border-radius:.5rem;
  border:1px solid var(--primary);
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  font-size:.9rem;
  transition:all 0.2s ease
}

button:hover{
  transform:none;
  box-shadow:none
}

button.ghost{
  background:#fff;
  color:var(--primary)
}

button.ghost:hover{
  background:#f8f9fa
}

/* ===== Mobile adjustments for topbar filters ===== */
@media (max-width: 600px){
  .topbar{
    align-items:center;
    padding:.5rem .75rem;
    flex-wrap:wrap; /* permite quebrar linha para o dropdown */
    height: var(--topbar-h); /* fixa a altura para não deslocar ao abrir menu */
    overflow:visible; /* permite o dropdown sair para fora */
  }
  .topbar .topbar-actions{
    order:2; /* fica à direita do título na primeira linha */
  }
  .topbar h1{
    order:1;
  }
  .topbar h1{
    font-size:1.1rem;
    margin-bottom:0;
  }
  .filter-toggle{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    margin-left:auto; /* mantém o botão à direita da barra */
    position:relative;
  }
  .filter-toggle::after{ content:'▾'; display:inline-block; transition:transform .15s ease }
  .filter-toggle[aria-expanded='true']::after{ transform:rotate(180deg) }
  .topbar { position: sticky; top: 0; }
  .topbar .filters{
    display:none; /* vira menu colapsável */
    position:absolute; /* sobrepõe sem empurrar layout */
    left:.75rem; right:.75rem; top:calc(100% + .25rem);
    flex-direction:column; /* painel em coluna para organização */
    align-items:stretch;
    gap:.55rem;
    width:auto;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:.6rem;
    padding:.65rem;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    z-index:101; /* acima do conteúdo */
  }
  .topbar .filters.open{ display:flex }
  .topbar .filters label{
    flex:1 1 auto;
    flex-direction:column; /* empilha texto e input no mobile */
    align-items:flex-start;
    gap:.2rem;
    white-space:normal;
  }
  .topbar .filters input,
  .topbar .filters select{
    min-width:0; /* permite encolher */
    width:100%; /* preencher a largura do painel */
  }
  .topbar .filters button{
    flex:0 0 auto;
    width:auto; /* botões lado a lado ficam mais elegantes */
  }
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:.6rem;
  padding:0.75rem;
  max-width:1375px;
  margin:0 auto
}

.card{
  grid-column:span 12;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:.75rem;
  padding:1rem;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
  transition:box-shadow 0.2s ease
}

.card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,0.1)
}

/* Colunas responsivas: empilhado no mobile, 6/6 no desktop */
.col{
  grid-column:span 12;
  display:grid;
  gap:.6rem
}

@media(min-width:1000px){
  .col-left{grid-column:span 6}
  .col-right{grid-column:span 6}
}

.kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:.6rem;
  margin-bottom:.75rem
}

/* Força 5 colunas na metade da tela (desktop) */
@media(min-width:1000px){
  .col-left .kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media(max-width:600px){
  .kpis{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
}

.kpi{
  background:#fafafa;
  border:1px solid var(--border);
  border-radius:.5rem;
  padding:.35rem .5rem;
  transition:background-color 0.2s ease
}

.kpi:hover{
  background:#f0f0f0
}

.kpi-label{
  font-size:.7rem;
  color:var(--muted);
  margin-bottom:2px
}

.kpi-value{
  font-size:1.05rem;
  font-weight:600;
  color:var(--text)
}

.table-wrap{
  overflow:auto;
  border-radius:.5rem
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem
}

th,td{
  padding:.5rem .6rem;
  border-bottom:1px solid var(--border);
  text-align:left
}

th{
  background:#fafafa;
  color:#374151;
  font-weight:600;
  position:sticky;
  top:0;
  z-index:1
}

.table-wrap #top3Table th:first-child,
.table-wrap #top3Table td:first-child{
  width:64px;
  text-align:center;
  white-space:nowrap
}

.winner-box{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background:#fafafa;
  border:1px solid var(--border);
  border-radius:.5rem;
  padding:calc(.72rem + 1px) .76rem;
  margin:.6rem 0 .62rem;
  overflow:visible
}

.winner-box .medal{
  font-size:1.1rem;
  line-height:1;
  display:inline-flex;
  transform:scale(3.0) translateY(-1px);
  transform-origin:center;
}

.winner-box .medal svg{
  width:1em;
  height:1em;
  display:block
}

.winner-box .winner-name{
  font-weight:800;
  color:#4b5563;
  font-size:1.5rem;
  line-height:1;
  padding-left:.9rem
}

.footer{
  text-align:center;
  color:var(--muted);
  padding:1rem;
  font-size:.85rem
}

/* Alert melhorado */
.alert{
  grid-column:span 12;
  background:#fff3cd;
  border:1px solid #ffe69c;
  color:#664d03;
  padding:.75rem 1rem;
  border-radius:.5rem;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  animation:slideIn 0.3s ease
}

@keyframes slideIn{
  from{
    opacity:0;
    transform:translateY(-10px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}

.hidden{
  display:none
}

/* Área de gráfico com responsividade melhorada */
.chart-area{
  position:relative;
  min-height:320px;
  max-height:500px;
  overflow:hidden;
  padding:8px;
  border-radius:.5rem;
  background:#fafafa
}

/* Canvas responsivo */
.chart-area canvas{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  border-radius:.25rem
}

/* Ajustes específicos para mobile */
@media(max-width:600px){
  .chart-area{
    min-height:280px;
    max-height:450px;
    padding:6px
  }
  :root{ --topbar-h:52px; }
  
  .grid{
    gap:.4rem;
    padding:.5rem
  }
  
  .card{
    padding:.8rem
  }
  
  .topbar{
    padding:.4rem .6rem;
    gap:.4rem
  }
  
  .topbar h1{
    font-size:1.1rem
  }
  
  .filters{
    gap:.3rem
  }
  
  .filters input{
    min-width:120px;
    padding:.3rem .4rem
  }
  
  button{
    padding:.4rem .6rem;
    font-size:.85rem
  }
}

/* Específicos: Ranking e Quantidade ficam um pouco maiores no mobile */
@media(max-width:600px){
  #cardRankingMedia .chart-area,
  #cardQuantidade .chart-area{
    min-height:340px;
    max-height:480px
  }
}

/* Top 3 list melhorada */
.top3-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:.25rem
}

.top3-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.5rem .6rem;
  border:1px solid var(--border);
  border-radius:.5rem;
  background:#fafafa;
  transition:all 0.2s ease
}

.top3-item:hover{
  background:#f0f0f0;
  transform:translateY(-1px)
}

.top3-item .medal{
  font-size:1.1rem;
  line-height:1;
  width:1.4rem;
  text-align:center
}

.top3-item .name{
  flex:1 1 auto;
  font-weight:600;
  color:#374151;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.top3-item .rating{
  margin-left:auto
}

/* Título com ícone de informação */
.title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.75rem
}

.title-row h2{
  margin:0;
  font-size:1.1rem;
  color:var(--text)
}

.card#cardRankingMedia .title-row h2{
  margin-top:calc(.75rem + 3px)
}

.info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fef3c7;
  color:#92400e;
  border:1px solid #f59e0b;
  font-weight:700;
  cursor:help;
  transition:all 0.2s ease;
  font-size:.8rem
}

.info-icon:hover{
  background:#fde68a;
  transform:scale(1.1)
}

/* Card espelho para Médicos (mesmo visual do Resumo) */
.card-like-resumo{
  min-height:260px
}

.card-like-resumo .kpis.mirror{
  grid-template-columns:repeat(5,minmax(0,1fr))
}

/* Altura específica do card de Pontualidade */
#cardPontualidade{
  min-height:420px
}

@media(max-width:600px){
  #cardPontualidade{
    min-height:320px
  }
}

/* Modal melhorado */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.6);
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index:1000;
  backdrop-filter:blur(4px)
}

.modal-overlay[aria-hidden="false"]{
  display:flex;
  animation:fadeIn 0.3s ease
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

.modal{
  background:#fff;
  border-radius:.75rem;
  max-width:520px;
  width:100%;
  max-height:90vh;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  border:1px solid var(--border);
  animation:slideUp 0.3s ease
}

@keyframes slideUp{
  from{
    opacity:0;
    transform:translateY(20px) scale(0.95)
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1)
  }
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
  background:#fafafa;
  border-radius:.75rem .75rem 0 0
}

.modal-header h3{
  margin:0;
  font-size:1.1rem;
  color:var(--text)
}

.modal-body{
  padding:.75rem 1rem;
  color:#374151;
  max-height:60vh;
  overflow-y:auto
}

.modal-body .muted{
  color:var(--muted)
}

.modal-body h4{
  margin:1rem 0 .5rem 0;
  color:var(--text);
  font-size:1rem
}

.modal-body h5{
  margin:.75rem 0 .25rem 0;
  color:var(--text);
  font-size:.9rem
}

.modal-body ul{
  margin:.5rem 0;
  padding-left:1.5rem
}

.modal-body p{
  margin:.5rem 0;
  line-height:1.6
}

.modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  padding:.75rem 1rem;
  border-top:1px solid var(--border);
  background:#fafafa;
  border-radius:0 0 .75rem .75rem
}

.close-btn{
  background:#fff;
  border:1px solid var(--border);
  border-radius:.5rem;
  cursor:pointer;
  width:32px;
  height:32px;
  font-size:1.1rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease
}

.close-btn:hover{
  background:#f0f0f0
}

.btn{
  background:var(--primary);
  color:#fff;
  border:1px solid var(--primary);
  border-radius:.5rem;
  padding:.5rem .9rem;
  cursor:pointer;
  transition:all 0.2s ease
}

.btn:hover{
  background:#0b5ed7;
  transform:translateY(-1px)
}

/* Fórmulas como imagem */
.formula-img{
  display:block;
  max-width:100%;
  height:auto;
  margin:.25rem auto 1rem auto
}

/* Avaliação com estrelas (estilo Google) melhorada */
.rating{
  display:flex;
  align-items:center;
  gap:.35rem
}

.rating .score{
  font-weight:600;
  color:#111827;
  min-width:2.4ch;
  font-size:.9rem
}

.rating .stars{
  position:relative;
  display:inline-block;
  line-height:1;
  font-size:.9rem
}

.rating .stars::before{
  content:"★★★★★";
  color:#e5e7eb
}

.rating .stars::after{
  content:"★★★★★";
  color:#f59e0b;
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap;
  overflow:hidden;
  width:calc((var(--rating,0)/5)*100%)
}

/* Melhorias de performance e acessibilidade */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Otimizações para telas de alta resolução */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .chart-area canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Melhor contraste para acessibilidade */
@media (prefers-contrast: high) {
  :root {
    --border: #000;
    --muted: #333;
  }
}

/* Adicione estas regras ao seu styles.css existente */

/* Cards com alturas padronizadas */
.card {
  grid-column: span 12;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  min-height: 420px; /* Altura mínima padrão */
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Alturas específicas por tipo de card */
#cardResumo {
  min-height: 480px;
}

#cardMedicosMirror {
  min-height: 480px; /* Mesmo tamanho do resumo */
}

#cardOrigem {
  min-height: 420px;
}

#cardRankingMedia {
  min-height: 420px;
}

#cardPontualidade {
  min-height: 420px;
}

#cardQuantidade {
  min-height: 420px;
}

/* Mobile: alturas menores e uniformes */
@media(max-width: 600px) {
  .card {
    min-height: 360px;
  }
  
  #cardResumo {
    min-height: 400px;
  }
  
  #cardMedicosMirror {
    min-height: 400px;
  }
  
  #cardOrigem,
  #cardRankingMedia,
  #cardPontualidade,
  #cardQuantidade {
    min-height: 360px;
  }
}

/* Tablet: alturas intermediárias */
@media(min-width: 601px) and (max-width: 999px) {
  .card {
    min-height: 390px;
  }
  
  #cardResumo {
    min-height: 440px;
  }
  
  #cardMedicosMirror {
    min-height: 440px;
  }
  
  #cardOrigem,
  #cardRankingMedia {
    min-height: 400px;
  }
  
  #cardPontualidade,
  #cardQuantidade {
    min-height: 400px;
  }
}

/* Garante que o conteúdo se distribua bem dentro do card */
.card > h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.card > .title-row {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.kpis {
  flex-shrink: 0;
}

.chart-area {
  flex: 1 1 auto;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-wrap {
  flex: 1 1 auto;
  overflow: auto;
}

.winner-box {
  flex-shrink: 0;
}

/* Ajuste para área de gráficos se expandir */
.chart-area canvas {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}