/* Ajustes da auditoria de UX (2026-10-28) para os apps da Equipe e do Cliente. EXPERIMENTO SÓ LOCAL (ver ajustes-ux-local.js).
   Camada por cima do CSS existente. Apagar este arquivo desfaz tudo. */

/* [1] Alvos de toque: mínimo de 44 px (o recomendado pra dedo) */
html .eq-sino, html .eq-avatar, html .eq-menu, html .ta-seta { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
html .eq-avatar.logo { width: 44px; height: 44px; }
html .mp-btn { min-height: 48px; }
html .mp-btn.peq { min-height: 44px; padding-left: 16px; padding-right: 16px; }
html .eq-arquivo .mp-btn, html .eq-post-acoes .mp-btn.peq { min-height: 40px; }
html .mp-doc, html .mp-sair-perfil { min-height: 48px; }
html select, html .mp-campo { min-height: 46px; }
html .ta-linha { min-height: 48px; }

/* [2] Letras: piso de 12 px (barra de baixo, contadores, selos, datas) */
html .mp-aba, html .mp-contador, html .eq-sino-n, html .fr-dia-nome, html .eq-agenda-tipo, html .mp-selo, html small { font-size: 12px; }
html .mp-aba { gap: 3px; }

/* [3] Contraste do texto de apoio: de 3,4:1 para acima de 4,5:1 */
:root { --ink-faint: #6e695c; }

/* [4] Um só desenho para filtro: pílulas (substituem o segmentado, as pílulas pretas e as abas sublinhadas) */
html .ta-pills, html .ta-visoes, html .eq-abas-int { display: flex; flex-wrap: wrap; gap: 8px; border: 0; background: transparent; border-radius: 0; overflow: visible; margin-bottom: 12px; }
html .ta-pills button, html .ta-visoes button, html .eq-abas-int button {
  min-height: 44px; padding: 0 18px; border: 1.5px solid var(--linha, #e6e1d6); border-radius: 999px; background: #fff; color: var(--ink, #1e1d1b);
  font: inherit; font-size: 14px; font-weight: 700; margin: 0;
}
html .ta-pills button.ativa, html .ta-visoes button.ativa, html .eq-abas-int button.ativa { background: #15140f; color: #fff; border-color: #15140f; }
html .ta-filtros-linha select, html .eq-filtros select, html .ta-filtros-agenda select { border-radius: 14px; min-height: 46px; padding: 0 14px; }
html .ta-filtros-agenda .ta-visoes button { height: auto; }

/* [5] Cartões sem fundo amarelo: branco com faixa lateral colorida; a urgência fica nos selos */
html .mp-card.eq-card-ouro { border: 1px solid var(--linha, #e6e1d6); border-left: 6px solid #e8c54a; background: #fff; box-shadow: 0 1px 2px rgba(19, 18, 16, .05), 0 14px 28px -22px rgba(19, 18, 16, .3); }
html .eq-card-cab { background: #fff; border-bottom: 1px solid var(--linha, #e6e1d6); }
html .eq-cab-texto span { color: var(--ink-soft, #55514a); }
html .eq-col-a-gravar .mp-card.eq-card-ouro { background: #fff; }
html .eq-col-gravadas .mp-card.eq-card-ouro { background: #fff; border-color: var(--linha, #e6e1d6); border-left: 6px solid #2f7d55; }

/* [6] Botões "Aprovar": todos iguais (dourados, como sempre foram). A regra que deixava só o primeiro dourado foi tirada a pedido do usuário. */

/* [7] App do Cliente: Início com o primeiro conteúdo pra aprovar já ali, com os botões (montado pelo ajustes-ux-local.js) */
#tf-aprov-direta { margin: 0 0 16px; }
#tf-aprov-direta h2 { font-size: 16px; font-weight: 800; margin: 4px 0 10px; }
#tf-aprov-direta .mp-card { margin: 0; border-left: 6px solid #e8c54a; }

/* [8] App do Cliente, aba Arquivos: o envio fica recolhido atrás de um botão; a lista de documentos aparece primeiro */
#mp-briefing-arquivos:not(.tf-aberto) > :not(.mp-bloco-titulo):not(#mp-arquivos-lista) { display: none; }
#mp-briefing-arquivos > .mp-bloco-titulo { cursor: pointer; }
#mp-briefing-arquivos > .mp-bloco-titulo h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px; border: 1.5px solid #15140f; border-radius: 14px; background: #fff; font-size: 15px; font-weight: 800; }
#mp-briefing-arquivos > .mp-bloco-titulo h2::after { content: "＋"; font-size: 20px; line-height: 1; }
#mp-briefing-arquivos.tf-aberto > .mp-bloco-titulo h2::after { content: "－"; }
#mp-briefing-arquivos.tf-aberto > .mp-bloco-titulo h2 { margin-bottom: 10px; }

/* [9] App do Cliente no computador: coluna mais larga e listas de aprovação em duas colunas (no celular nada muda) */
@media (min-width: 1000px) {
  html .mp-app { max-width: 900px; }
  html .mp-barra { max-width: 900px; }
  html #mp-lista-conteudos, html #mp-lista-datas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  html #mp-lista-conteudos > .mp-card + .mp-card, html #mp-lista-datas > .mp-card + .mp-card { margin-top: 0; }
}

/* [10] App do Cliente: o que sobrou da auditoria (setas do mês, link "Ver todos", dia da semana nas datas) e o aviso que repetia o vídeo */
html .mp-data span { font-size: 12px; }
html .mp-mes-nav button { width: 44px; height: 44px; }
html .mp-bloco-titulo a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
/* com o vídeo já na tela, a linha "conteúdos esperam você" some; se não sobrar nenhuma linha, o quadro amarelo também */
html:has(#tf-aprov-direta .mp-aprov) #mp-linha-conteudos { display: none; }
html:has(#tf-aprov-direta .mp-aprov) #mp-caixa-espera:has(#mp-linha-datas[hidden]) { display: none; }

/* [11] Filtros em pílula sempre na MESMA linha (cabem 3 no celular): dividem a largura e não quebram para a linha de baixo */
html .ta-pills, html .ta-visoes, html .eq-abas-int { flex-wrap: nowrap; gap: 6px; }
html .ta-pills button, html .ta-visoes button, html .eq-abas-int button { flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: 13.5px; white-space: nowrap; text-align: center; }

/* Bloqueio da administradora principal sem o aceite da assinatura (2026-10-28) */
.bloq-ass { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: #121110; }
.bloq-ass-card { width: min(440px, 100%); padding: 34px 30px 28px; border-radius: 28px; background: #f5efe0; text-align: center; box-shadow: 0 46px 90px -34px rgba(0, 0, 0, .8); }
.bloq-ass-logo { display: inline-block; margin-bottom: 14px; font: 400 40px/1 "Archivo Black", "Archivo", sans-serif; color: #121110; padding-right: .5em; background: linear-gradient(#f2c94c, #f2c94c) no-repeat right .02em bottom .06em / .3em .3em; }
.bloq-ass-card h2 { margin: 0 0 8px; font: 400 26px/1.15 "Archivo Black", "Archivo", sans-serif; color: #1b1a16; }
.bloq-ass-card p { margin: 0 0 20px; color: #5f5b50; font-size: 15px; }
.bloq-ass-btn { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; background: #121110; color: #fff; font-weight: 800; text-decoration: none; }
.bloq-ass-sair { margin-top: 12px; height: 48px; width: 100%; border: 1.5px solid #1b1a16; border-radius: 999px; background: transparent; color: #1b1a16; font: 800 15px "Hanken Grotesk", sans-serif; cursor: pointer; }

/* Tarja vermelha de atraso da assinatura (2026-10-29): fixa no topo, em todas as telas do app */
:root { --tarja-h: 0px; }
html.tem-tarja { --tarja-h: 46px; }
#tarja-atraso { position: fixed; z-index: 9000; top: 0; left: 0; right: 0; height: var(--tarja-h); display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 2px 14px; padding: 0 14px; background: #c62f1f; color: #fff; font: 600 13px/1.25 "Hanken Grotesk", system-ui, sans-serif; text-align: center; box-shadow: 0 6px 18px -8px rgba(120, 20, 10, .6); }
#tarja-atraso b { font-weight: 800; }
html.tem-tarja body { padding-top: var(--tarja-h); }
@media (min-width: 900px) { html.tem-tarja body.eq-app-fixo .mp-app { height: calc(100vh - 10px - var(--tarja-h)); } }

/* Tarja de atraso: duas linhas curtas, sempre (2026-10-29) */
#tarja-atraso { flex-direction: column; flex-wrap: nowrap; gap: 1px; line-height: 1.25; }
#tarja-atraso b, #tarja-atraso span { display: block; white-space: nowrap; }
#tarja-atraso b { font-size: 14px; }
#tarja-atraso span { font-size: 13px; font-weight: 600; }
@media (max-width: 480px) { #tarja-atraso b { font-size: 13px; } #tarja-atraso span { font-size: 12px; } }

/* Filtro da agenda (2026-10-29, modelo escolhido): tipos numa barra única e a caixa de cliente ao lado */
html .ta-filtros-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
html .ta-filtros-agenda .ta-visoes { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 4px; margin: 0; background: #ebe3c7; border-radius: 999px; }
html .ta-filtros-agenda .ta-visoes button { flex: 0 0 auto; min-height: 36px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #5f5b50; font-size: 14px; font-weight: 800; }
html .ta-filtros-agenda .ta-visoes button.ativa { background: #15140f; color: #fff; }
html .ta-filtros-agenda .ta-curto { display: none; }
@media (max-width: 899px) {
  html .ta-filtros-agenda { display: grid; grid-template-columns: 1fr; gap: 8px; }
  html .ta-filtros-agenda .ta-visoes { display: flex; width: 100%; }
  html .ta-filtros-agenda .ta-visoes button { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 13px; }
  html .ta-filtros-agenda .ta-longo { display: none; }
  html .ta-filtros-agenda .ta-curto { display: inline; }
}

/* [12] Auditoria visual (2026-10-31), medida em 360/390/430 px e 1366 px: o que ainda escapava das regras acima */
/* letra mínima de 12 px onde uma regra mais específica passava por cima do piso (selos da Manutenção, chips e etiquetas do atendimento,
   "Ajuste pedido", hora "até" da agenda, cabeçalho do mês do Freela, rótulo da frase do dia, anel da nota) */
html .eq-manut-chips .mp-selo, html .ta-chip, html .ta-tag, html .eq-ajuste b, html .ta-comp-hora small, html .fr-mes-cab,
html .eq-frase-rotulo, html .fr-ev-rotulo small, html .dd-anel small { font-size: 12px; }
/* logo ainda não enviada (Perfil): iniciais num dourado mais escuro; o dourado claro sobre branco ficava em 1,8:1 */
html .foto-av.logo { color: #9a7400; }
@media (max-width: 899px) {
  /* alvos de toque de 44 px que ainda ficavam em 36-40 px: botões dos cartões abertos (Roteiro, Subir material, Enviar...), guia do dia,
     "Ver" do Início, filtros da agenda, linhas do Início do atendimento e "Mostrar concluídas" */
  html .eq-arquivo .mp-btn, html .eq-post-acoes .mp-btn.peq, html .eq-guia-linha .mp-btn { min-height: 44px; }
  html #t-inicio .mp-espera-linha .mp-btn { min-height: 44px; }
  html .ta-filtros-agenda .ta-visoes button { min-height: 44px; height: 44px; }
  html .ta-urgente, html .ta-aviso-linha { min-height: 44px; }
  html .ta-check { min-height: 44px; }
  html .ta-check input { width: 20px; height: 20px; }
  /* campos com letra de 16 px: abaixo disso o iPhone aproxima a tela sozinho ao tocar no campo */
  html select, html textarea, html input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) { font-size: 16px !important; }
  /* semana do Freela (Início e Freela) em 360 px: menos espaço entre os dias pra cada dia ter 44 px de largura */
  html .fr-dias { gap: 3px; }
}