/* HarasPlan — composição da interface em espaço real, inclusive texto ampliado.
   A escala é definida por aplicarFonte; não altera permissões ou navegação. */
:root { --escala-interface: 1; --alvo-interface: max(44px, calc(44px / var(--escala-interface))); }

/* Todas as áreas permitidas: permanentes no PC e deslizantes no celular. */
.topo-inner { grid-template-areas: "marca acoes" "abas menu"; }
.topo .btn-todas-areas { display: inline-flex; grid-area: menu; justify-self: end; width: auto; min-width: 120px; padding: 8px 13px; background: transparent; border: 1px solid rgba(215,180,120,.45); color: #F7EFE2; }
.topo .abas { flex-wrap: wrap; overflow: visible; scrollbar-width: none; }
.topo .abas::-webkit-scrollbar { display: none; }
.topo #btn-todas-areas { display: none; }
.topo .marca .marca-produto { font-family: Georgia, "Times New Roman", serif; }
.btn-primario:hover { background: var(--verde-800); border-color: var(--verde-800); }
.tela :is(h2,h3), dialog :is(h2,h3) { font-weight: 650; line-height: 1.35; }
.formulario label { font-size: .83rem; }
.formulario .campo-dica { font-weight: 400; }
#btn-gerenciar-acessos { color: var(--tinta); background: var(--superficie); border-color: var(--linha); }
.tela input:focus, dialog input:focus, dialog select:focus, dialog textarea:focus { border-color: var(--verde-600); box-shadow: 0 0 0 3px rgba(47,90,77,.16); }
:root[data-tema="escuro"] :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline-color: var(--ouro); }
:root[data-tema="escuro"] :is(.tela,dialog) :is(input,select,textarea):focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(215,180,120,.2); }
/* O menu ocupa sua própria coluna. A barra pode rolar sem passar por baixo dele.
   Container queries também respeitam o espaço reduzido pelo zoom do aplicativo. */
.topo { container: hp-topo / inline-size; }
.topo .marca { min-width: 0; max-width: 100%; }
.topo .marca > div { min-width: 0; }
.topo .marca h1 { max-width: 100%; }
.topo :is(button, .marca) { min-height: var(--alvo-interface); min-width: var(--alvo-interface); }
.topo #btn-todas-areas { min-height: var(--alvo-interface); }
.topo .menu-topo {
  width: min(340px, calc(100% - 32px));
  max-height: min(520px, calc(var(--altura-visivel, 100dvh) / var(--escala-interface) - 220px));
}
.topo .menu-topo:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
.topo:has(.menu-topo:not([hidden])) { z-index: var(--z-menu); }
@media (max-width: 760px) {
  .topo:has(.menu-topo:not([hidden])) { position: relative; }
}
.menu-topo-cab { flex: 0 0 auto; flex-wrap: wrap; }
.menu-topo-cab > span { flex: 1; }
#btn-fechar-notificacoes { flex: 0 0 var(--alvo-interface); width: var(--alvo-interface); height: var(--alvo-interface); padding: 10px; }
.lista-notif { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.alerta-texto-bloco { overflow-wrap: anywhere; }
.menu-topo :is(button, .alerta-item) { min-height: var(--alvo-interface); }
.menu-topo .alerta-ler { width: var(--alvo-interface); height: var(--alvo-interface); }

@container hp-topo (max-width: 760px) {
  .topo-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marca acoes" "abas abas";
    gap: 10px 8px;
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  }
  .topo-inner > .abas { width: 100%; min-width: 0; justify-self: stretch; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  .topo .btn-todas-areas {
    display: block; grid-area: menu; justify-self: end;
    width: auto; min-width: 104px; min-height: 44px;
    padding: 8px 10px; font-size: 12px; background: var(--superficie); color: var(--tinta);
  }
  /* Avisos em uma folha inferior: continuam acessíveis em telas baixas e no zoom. */
  .topo .menu-topo {
    position: fixed; top: auto; bottom: calc(var(--fundo-visivel, 0px) / var(--escala-interface) + max(12px, env(safe-area-inset-bottom)));
    right: max(12px, env(safe-area-inset-right));
    width: min(360px, calc(100% - 24px));
    max-height: min(520px, calc(var(--altura-visivel, 100dvh) / var(--escala-interface) - 24px));
    overscroll-behavior: contain;
  }
}
/* No computador, as áreas permitidas ficam sempre visíveis no topo. */
@container hp-topo (min-width: 761px) {
  .topo-inner { grid-template-areas: "marca acoes" "abas abas"; }
  .topo .btn-todas-areas { display: none; }
}
/* Em orientação horizontal, a altura disponível importa tanto quanto a largura. */
:root[data-viewport-baixo] .topo .menu-topo {
  position: fixed; top: auto;
  bottom: calc(var(--fundo-visivel, 0px) / var(--escala-interface) + max(12px, env(safe-area-inset-bottom)));
  right: max(12px, env(safe-area-inset-right));
  width: min(360px, calc(100% - 24px));
  max-height: calc(var(--altura-visivel, 100dvh) / var(--escala-interface) - 24px);
}
:root[data-viewport-baixo] .topo { position: relative; }
@container hp-topo (max-width: 390px) {
  .topo-inner { grid-template-areas: "marca marca" "acoes acoes" "abas abas"; }
  .topo .marca { width: 100%; }
  .topo .marca .marca-produto { font-size: 22px; }
  .topo .marca h1 {
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;
  }
  .topo-acoes { justify-self: end; }
}

/* Colunas podem encolher; identificações extensas conservam todo o conteúdo. */
main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.tela:not(#tela-perfil) :is(.cartao, .cartao-painel, .cartao-tabela, .barra-ferramentas, .dia-coluna, .corpo-atv, .resumo-textos) { min-width: 0; }
.tela:not(#tela-perfil) :is(.cartao, .cartao-painel, .dia-coluna, .lista-simples, .barra-ferramentas, .modulo-cabecalho) { overflow-wrap: anywhere; }
.barra-ferramentas > :is(input, select, label) { min-width: 0; max-width: 100%; }
.barra-ferramentas > label { flex-wrap: wrap; }
.barra-ferramentas label > :is(input, select) { min-width: 0; max-width: 100%; }
.rotulo-mes { flex-wrap: wrap; }
.quadro-semana { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.dia-coluna li { flex-wrap: wrap; }
.dia-coluna .corpo-atv { flex: 1 1 120px; overflow-wrap: anywhere; }
.dia-coluna .acoes-atv { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; margin-left: auto; }
#tela-agenda .agenda-item-fim { min-width: 0; flex-wrap: wrap; gap: 8px 10px; }
#tela-agenda .agenda-item-fim > .valor-lista { flex: 0 0 auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#tela-agenda .agenda-item-acoes { flex-wrap: wrap; margin-left: auto; }
.res-prop { min-width: 0; flex-wrap: wrap; }
.res-prop-nome { min-width: 0; overflow-wrap: anywhere; }
.res-prop-nums { min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 6px 14px; white-space: normal; }
.res-prop-nums > * { max-width: 100%; overflow-wrap: anywhere; }

/* Área acionável mínima uniforme: inclusive nomes, ações de linha e calendário. */
:is(.tela:not(#tela-perfil), dialog[open]) :is(button, a.btn) {
  min-height: var(--alvo-interface); min-width: var(--alvo-interface); max-width: 100%;
}
.tela:not(#tela-perfil) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { min-height: var(--alvo-interface); }
.tela:not(#tela-perfil) label:has(> input[type="checkbox"]), dialog label:has(> input[type="checkbox"]) { min-height: var(--alvo-interface); }
.tela:not(#tela-perfil) :is(.btn, .btn-mini, .link-nome), dialog :is(.btn, .btn-mini) {
  white-space: normal; overflow-wrap: anywhere;
}
.tela:not(#tela-perfil) .btn-icone, dialog .btn-icone { width: 44px; height: 44px; padding: 10px; }
.tela:not(#tela-perfil) .link-nome { text-align: left; }
.calendario { grid-template-columns: repeat(7, minmax(58px, 1fr)); overflow-x: auto; padding-bottom: 8px; overscroll-behavior-inline: contain; }
.calendario .cal-dia { min-width: 0; }
.calendario .cal-evento {
  min-height: 44px; min-width: 44px; width: 100%; height: auto;
  border-radius: 6px; padding: 4px; font-size: 10.5px; line-height: 1.35;
}
.cartao-tabela { overscroll-behavior-inline: contain; scrollbar-width: thin; }
.cartao-tabela:focus-visible { outline: 2px solid var(--latao); outline-offset: 3px; }

/* Altura do diálogo usa o mesmo espaço disponível que o aplicativo ampliado. */
dialog[open], dialog.modal-largo[open], dialog.modal-perfil[open], dialog.modal-mapa[open] {
  position: fixed; right: auto; bottom: auto; margin: 0;
  left: calc(50vw / var(--escala-interface));
  top: calc(var(--altura-visivel, 100dvh) / var(--escala-interface) / 2 + var(--topo-visivel, 0px) / var(--escala-interface));
  transform: translate(-50%, -50%);
  max-width: calc(100% - 16px);
  max-height: calc(var(--altura-visivel, 100dvh) / var(--escala-interface) - 24px);
}
.modal-cabecalho > :is(h2, div), .chat-cabecalho > :is(h2, div, strong) { min-width: 0; overflow-wrap: anywhere; }
.modal-cabecalho > button { flex-shrink: 0; }
#modal-chat .chat-cab-acoes { flex: 0 0 auto; }
#modal-chat[open] {
  max-width: calc(100% - 16px);
  height: min(780px, calc(84dvh / var(--escala-interface)));
  max-height: calc(var(--altura-visivel, 100dvh) / var(--escala-interface) - 24px);
}
#modal-chat #chat-input { min-height: var(--alvo-interface); }
@media (max-height: 700px) {
  #modal-chat[open] { height: calc(var(--altura-visivel, 100dvh) / var(--escala-interface) - 24px); }
  #modal-chat .chat-ajuda-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #modal-chat .chat-ajuda-acoes:has(#btn-chat-conversar[hidden]) { grid-template-columns: minmax(0, 1fr); }
  #modal-chat .chat-ajuda-acoes > button { min-width: 0; }
}
.hp-novidades-acoes { min-width: 0; }
.hp-novidades-acoes .btn { overflow-wrap: normal; }
#modal-compras .modal-botoes .btn { overflow-wrap: normal; }
/* Busca: a lista rola dentro da área visível, inclusive com teclado e texto maior. */
#modal-busca[open] {
  width: min(560px, calc(100vw / var(--escala-interface) - 24px));
  max-width: calc(100vw / var(--escala-interface) - 24px);
  overflow: hidden;
}
#modal-busca .busca-caixa {
  min-height: 0; height: auto;
  max-height: min(560px, calc(var(--altura-visivel, 100dvh) / var(--escala-interface) - 28px));
}
#modal-busca .busca-campo, #modal-busca .busca-rodape { flex: 0 0 auto; }
#modal-busca .busca-campo .btn-icone { color: var(--tinta); opacity: 1; }
#modal-busca .busca-resultados { flex: 1 1 auto; min-height: 0; }
@media (max-width: 620px) {
  #modal-busca .busca-caixa { height: calc(var(--altura-visivel, 100dvh) / var(--escala-interface) - 28px); }
  #modal-busca .busca-item { flex-direction: column; align-items: stretch; gap: 4px; }
  #modal-busca .busca-tipo { width: auto; }
}
/* Usa também a altura visual: alguns teclados não reduzem a altura do CSS. */
:root[data-viewport-baixo] .modal-formulario .modal-cabecalho { padding: 6px 12px; gap: 8px; }
:root[data-viewport-baixo] .modal-formulario .modal-simbolo { display: none; }
:root[data-viewport-baixo] .modal-formulario .modal-cabecalho h2 { font-size: var(--txt-lg); line-height: 1.2; }
:root[data-viewport-baixo] .modal-formulario .modal-campos { padding: 12px; gap: 12px; }
:root[data-viewport-baixo] .modal-formulario .modal-botoes { flex-wrap: nowrap; padding: 6px 12px max(6px, env(safe-area-inset-bottom)); }
:root[data-viewport-baixo] .modal-formulario .modal-botoes .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
/* Três ações precisam de toda a largura para o rótulo, além do espaço do ícone. */
:root[data-viewport-baixo] #modal-compras .modal-botoes { padding-inline: 8px; gap: 4px; }
:root[data-viewport-baixo] #modal-compras .modal-botoes .btn { display: flex; flex: 1 1 0; flex-direction: column; align-items: stretch; gap: 4px; padding-inline: 2px; line-height: 1.25; text-align: center; }
:root[data-viewport-baixo] #modal-compras #btn-whats-compras { flex-grow: 1.55; }
:root[data-viewport-baixo] #modal-compras .modal-botoes [value="ok"] { flex-grow: .9; }
:root[data-viewport-baixo] #modal-compras .modal-botoes .hp-icone { align-self: center; }
@media (max-width: 480px) {
  .hp-novidades-acoes { flex-direction: column; align-items: stretch; }
  .hp-novidades-acoes .btn { width: 100%; flex: none; }
  .tela:not(#tela-perfil) .barra-ferramentas > :is(input, select, label) { flex-basis: 100%; width: 100%; }
  .tela:not(#tela-perfil) .rotulo-mes > input { flex: 1 1 150px; }
  #tela-competicoes .controle-segmentado { display: grid; grid-template-columns: minmax(0, 1fr); }
  #tela-competicoes .segmento { text-align: left; }
}
/* Cuidados e coberturas: cada registro usa a largura inteira no celular. */
@media (max-width: 700px) {
  :is(.tabela-saude-historico, .tabela-reproducao) { display: block; width: 100%; }
  :is(.tabela-saude-historico, .tabela-reproducao) thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  :is(#tabela-saude, #tabela-reproducao) { display: grid; gap: var(--e-3); }
  :is(#tabela-saude, #tabela-reproducao) tr { display: block; min-width: 0; padding: var(--e-3); border-radius: var(--raio-sm); background: var(--fundo); }
  :is(#tabela-saude, #tabela-reproducao) td { display: block; width: 100%; min-width: 0; padding: var(--e-2); border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  :is(#tabela-saude, #tabela-reproducao) td::before { content: attr(data-label); display: block; margin-bottom: var(--e-1); color: var(--tinta-suave); font-size: var(--txt-xs); font-weight: 600; }
  :is(#tabela-saude, #tabela-reproducao) .col-acoes { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--e-2); }
  :is(#tabela-saude, #tabela-reproducao) .col-acoes::before { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .topo, .topo *, .tela:not(#tela-perfil) .btn, .menu-topo { scroll-behavior: auto; }
}
/* A navegação pertence à lista, com controles estáveis para teclado/toque. */
.paginacao-lista { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:14px 0; padding:10px; border-top:1px solid var(--linha); }
.paginacao-lista[hidden] { display:none; }
.paginacao-lista > span { flex:1 1 170px; text-align:center; color:var(--tinta-suave); font-size:.82rem; overflow-wrap:anywhere; }
.paginacao-lista > button { min-height:44px; min-width:88px; }
.paginacao-lista > button:focus-visible { outline:2px solid var(--verde-600); outline-offset:3px; }