/* HomeFix · ajustes visuais da versão 7.6.25 (Manual de Marca 2023)
 * Cores oficiais: vermelho #D8101A (destaque), grafite #3C3C3B (estrutura), cinza #A8A8A8 (apoio), branco. */

@media screen {
  /* o logo oficial já fica na navegação superior: evita repetir o selo branco no topo de cada tela */
  body.hf-topnav .dashboard-brand-logo,
  body.hf-topnav .analytics-page-logo { display: none !important; }
  body.hf-topnav .dashboard-brand { gap: 0; }

  /* ---------- tela inicial única: Central de gestão como bloco da Visão geral ---------- */
  .home-management { margin-top: 28px; scroll-margin-top: calc(var(--hf-topnav-h, 112px) + 12px); }
  .home-management[hidden] { display: none !important; }
  .home-management .management-hero {
    background: #FFFFFF;
    color: var(--hf-graphite, #3C3C3B);
    border: 1px solid #D7D7D7;
    border-top: 4px solid var(--hf-red, #D8101A);
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: none;
  }
  .home-management .management-hero::after { display: none; }
  .home-management .management-hero h2 { color: var(--hf-graphite, #3C3C3B); font-size: 30px; line-height: 1; }
  .home-management .management-hero p { color: #6B6B6A; }
  .home-management .management-hero p.text-\[10px\] { color: var(--hf-red, #D8101A); }
  .home-management .management-hero label { color: var(--hf-graphite, #3C3C3B); }
  .home-management .management-hero input {
    border: 1px solid #A8A8A8;
    background: #FFFFFF;
  }
  .home-management .management-hero input:focus-visible { outline: 2px solid var(--hf-red, #D8101A); outline-offset: 1px; }
  .home-management .management-hero .btn-secondary {
    border: 1px solid #A8A8A8;
    background: #FFFFFF;
    color: var(--hf-graphite, #3C3C3B);
  }
}

/* ---------- atalhos de período (botões segmentados, referência Veeries) ---------- */
.hf-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 2px;
}
.hf-segmented button {
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .38);
  background: transparent;
  color: #FFFFFF;
  font: 600 12px var(--hf-fonte-marca, 'Metropolis', Arial, sans-serif);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hf-segmented button:hover { background: rgba(255, 255, 255, .12); }
.hf-segmented button.active { background: #FFFFFF; color: var(--hf-graphite, #3C3C3B); border-color: #FFFFFF; }
.hf-segmented button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* ---------- botão "Imagem" com rótulo nos cartões de gráfico ---------- */
.dashboard-tool.hf-tool-image {
  width: auto !important;
  padding: 0 10px !important;
  gap: 5px;
  display: inline-flex;
  align-items: center;
  font: 700 11px var(--hf-fonte-marca, 'Metropolis', Arial, sans-serif);
  color: var(--hf-graphite, #3C3C3B);
}
.dashboard-tool.hf-tool-image:hover { color: var(--hf-red, #D8101A); }

/* ---------- importação por foto: câmera do celular ---------- */
.hf-camera-import { display: none; margin-top: 8px; }
.hf-camera-import small { display: block; margin-top: 6px; color: #6B6B6A; font-size: 11px; line-height: 1.35; }
.hf-camera-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--hf-graphite, #3C3C3B);
  color: #FFFFFF;
  font: 700 13px var(--hf-fonte-marca, 'Metropolis', Arial, sans-serif);
  cursor: pointer;
}
.hf-camera-button svg { width: 18px; height: 18px; }
.hf-camera-import:focus-within .hf-camera-button { outline: 2px solid var(--hf-red, #D8101A); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 860px) { .hf-camera-import { display: block; } }

/* ---------- foco visível em todo o painel (substitui outlines removidos) ---------- */
body.hf-topnav :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--hf-red, #D8101A);
  outline-offset: 2px;
}

/* ---------- celular: toque e legibilidade ---------- */
@media (max-width: 860px) {
  /* campos com 16 px evitam o zoom automático do iPhone ao tocar */
  body.hf-topnav :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px !important; }
  /* alvos de toque de pelo menos 44 px */
  body.hf-topnav .dashboard-tool,
  body.hf-topnav .chart-menu-toggle,
  body.hf-topnav .hf-segmented button { min-height: 44px; min-width: 44px; }
  body.hf-topnav .hf-segmented { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  body.hf-topnav .hf-segmented::-webkit-scrollbar { display: none; }
  body.hf-topnav .hf-segmented button { flex: 0 0 auto; }
  body.hf-topnav { -webkit-tap-highlight-color: rgba(216, 16, 26, .12); }
  body.hf-topnav :is(button, a, label, select, summary) { touch-action: manipulation; }
}

/* ---------- movimento reduzido: sem animações de entrada nem rolagem suave ---------- */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  body.hf-topnav *, body.hf-topnav *::before, body.hf-topnav *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- celular: gráfico diário em largura total, indicadores do período abaixo em 2 colunas ----------
   (uma regra posterior do index.html forçava "gráfico + 220 px" e espremia o gráfico em ~60 px no celular) */
@media (max-width: 767px) {
  body.hf-topnav .dashboard-daily-layout { grid-template-columns: minmax(0, 1fr) !important; }
  body.hf-topnav .dashboard-daily-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* botão "Imagem" visível nos cartões de gráfico */
.hf-chart-image-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  margin-right: 6px;
  border: 1px solid #D7D7D7;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--hf-graphite, #3C3C3B);
  font: 700 12px var(--hf-fonte-marca, 'Metropolis', Arial, sans-serif);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.hf-chart-image-btn svg { width: 16px; height: 16px; }
.hf-chart-image-btn:hover { border-color: var(--hf-red, #D8101A); color: var(--hf-red, #D8101A); }
@media (max-width: 860px) { .hf-chart-image-btn { min-height: 44px; } }
@media (max-width: 860px) {
  body.hf-topnav #screen-dashboard button { min-width: 44px; }
}

/* áreas com rolagem horizontal contêm os textos para leitor de tela (.sr-only, position:absolute);
   sem isso eles "vazavam" e a Escala ganhava rolagem lateral na página inteira no celular */
#escalaGridWrap, .hf-mobile-table-scroll, .overflow-x-auto, .escala-scroll { position: relative; }