/* Tema Simple Agenda para o painel (proposta de 2026-09-28): a mesma cara do site simpleagenda.com.br.
   Carregado depois de estilo.css. Títulos e números na Manrope (negrito), botões com cantos de 12 px,
   menu com o destaque verde da marca e a logo completa no topo do menu. */
:root { --mono: 'Manrope', 'DM Sans', system-ui, sans-serif; }

/* Títulos e números: Manrope em negrito, como no site */
.faixa-consultas h1 { font-weight: 800; letter-spacing: -0.02em; }
.faixa-numero .n { font-weight: 800; letter-spacing: -0.03em; }
.faixa-numero .n b { font-weight: 800; }
.cabeca h1, .cabecalho h1, .login-caixa h1, .cartao-retorno h1 { font-weight: 800; letter-spacing: -0.02em; }
.ficha h2, dialog h2, .cartao-form h2, .cabecalho-lista h2, .ficha-paciente h2 { font-weight: 800; letter-spacing: -0.01em; }
.progresso .numero, .numero-robo, .faixa-dias .dia span { font-weight: 800; letter-spacing: -0.02em; }
.contador b, .contador .n { font-weight: 800; }
.faixa-dias .dia b, .grupo-hora h3, .letra-grupo, .linha-pasta.titulo, .tabela-simples th, .bloco-ficha h3 { font-weight: 700; }
.linha .hora, .envio .hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.bloco-titulo h2 { font-weight: 800; }

/* Botões: cantos de 12 px e o verde da marca */
.botao { border-radius: 12px; font-weight: 700; letter-spacing: 0; }
.botao.cheio { background: #059669; border-color: #059669; color: #ffffff; }
.botao.cheio:hover { background: #047857; border-color: #047857; }

/* Menu lateral: logo completa no topo e a clínica aberta logo abaixo */
.lateral-logo { flex-direction: column; align-items: stretch; gap: 14px; padding: 4px 6px 0; }
.lateral-logo img.lateral-marca { display: block; width: 184px; height: auto; margin: -14px 0 -12px -16px; padding: 0; background: none; border-radius: 0; }
.lateral-clinica { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); font: 700 14px/1.25 var(--sans); color: #ffffff; }
.lateral-clinica small { display: block; font: 600 11px var(--sans); color: #9AA8C4; margin-bottom: 1px; }
.lateral-logo .lateral-clinica img { width: 32px; height: 32px; flex: none; }
.lateral .navegacao button[aria-current="page"] { background: rgba(16, 185, 129, 0.14); color: #ffffff; box-shadow: inset 3px 0 0 #10B981; }
.lateral .navegacao button[aria-current="page"] .icone-menu { background: #10B981; color: #0B2A22; }
.lateral-prof[aria-selected="true"] { background: #10B981; color: #0B2A22; }
.lateral-profissionais h2, .lateral-unidades h2 { font-weight: 700; color: #9AA8C4; letter-spacing: 0.02em; }

/* ---------- Contadores no modelo C, com movimento ---------- */
.faixa-filtros { flex-direction: column; align-items: stretch; }
.faixa-filtros .busca { align-self: flex-start; }
.faixa-filtros .contadores.blocos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
.faixa-filtros .contadores.blocos .contador {
  --cor: #92400E; --cor-fio: #F59E0B; --ic-fundo: #FEF3C7;
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 2px 14px; align-items: center;
  padding: 18px; border: 1px solid var(--linha); border-bottom: 1px solid var(--linha); border-radius: 18px;
  background: var(--superficie); background-image: none;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease, background-color 320ms ease, border-color 320ms ease;
}
.contadores.blocos .contador.verde { --cor: #065F46; --cor-fio: #10B981; --ic-fundo: #D1FAE5; }
.contadores.blocos .contador.cinza { --cor: #374151; --cor-fio: #9CA3AF; --ic-fundo: #E5E7EB; }
.contadores.blocos .contador.coral { --cor: #991B1B; --cor-fio: #EF4444; --ic-fundo: #FEE2E2; }
.contadores.blocos .ic { grid-row: 1 / 4; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ic-fundo); color: var(--cor); transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.contadores.blocos .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.contadores.blocos .contador b { font: 800 30px/1 var(--sans); letter-spacing: -1px; color: var(--tinta); font-variant-numeric: tabular-nums; transition: color 320ms ease; }
.contadores.blocos .contador .nome { margin: 0; font: 600 13px/1.3 var(--sans); color: var(--tinta-2); transition: color 320ms ease; }
.contadores.blocos .fio { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; border-radius: 0 4px 0 0; background: var(--cor-fio); transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1); }
/* Passar o mouse: o bloco sobe e o ícone gira de leve */
.faixa-filtros .contadores.blocos .contador:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(20, 33, 61, 0.45); border-color: #D5DCEA; }
.contadores.blocos .contador:hover .ic { transform: rotate(-8deg) scale(1.06); }
/* Clicar: afunda e o ícone dá um pulinho */
.faixa-filtros .contadores.blocos .contador:active { transform: translateY(0) scale(0.97); box-shadow: none; }
.contadores.blocos .contador:active .ic { transform: scale(0.9); }
/* O escolhido fica azul-marinho */
.faixa-filtros .contadores.blocos .contador[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); }
.contadores.blocos .contador[aria-selected="true"] b { color: #ffffff; }
.contadores.blocos .contador[aria-selected="true"] .nome { color: #C9D3E6; }
.contadores.blocos .contador[aria-selected="true"] .ic { animation: contador-pulo 520ms cubic-bezier(0.2, 0.9, 0.3, 1.5); }
@keyframes contador-pulo { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }
.contadores.blocos .contador:focus-visible { outline: 3px solid #10B981; outline-offset: 3px; }
/* Quando o número muda (chegou uma resposta): o bloco brilha na cor dele */
.contadores.blocos .contador.mudou { animation: contador-brilho 1200ms ease; }
@keyframes contador-brilho { 0% { box-shadow: 0 0 0 0 var(--cor-fio); } 30% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-fio) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.contadores.blocos .contador.mudou b { animation: contador-numero 600ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes contador-numero { 0% { transform: translateY(6px); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
/* Entrada dos quatro blocos quando a tela abre */
.contadores.blocos .contador { animation: contador-entra 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.contadores.blocos .contador:nth-child(2) { animation-delay: 60ms; }
.contadores.blocos .contador:nth-child(3) { animation-delay: 120ms; }
.contadores.blocos .contador:nth-child(4) { animation-delay: 180ms; }
@keyframes contador-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .faixa-filtros .contadores.blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .contadores.blocos .contador, .contadores.blocos .ic, .contadores.blocos .fio, .contadores.blocos b { animation: none !important; transition: none !important; }
}
.contadores.blocos .pct { font: 700 12px var(--sans); color: var(--cor); opacity: 0.9; transition: color 320ms ease; }
.contadores.blocos .contador[aria-selected="true"] .pct { color: #6EE7B7; }

/* Regras da clínica: política de desmarque */
#clinica-cobra, #clinica-marcar { margin-bottom: 14px; }
.politica-parte { border-left: 3px solid #D1FAE5; padding: 2px 0 2px 14px; margin: 0 0 16px; }
.politica-parte[hidden], #clinica-parte-fora[hidden] { display: none; }