/* =====================================================================
   Componentes comuns da Fazenda Cruzeiro (tema central, 0157).
   Botoes, campos, mensagens, cartoes, titulo da pagina, etiquetas, tabelas e
   rodape: um visual so nos 4 apps. Fica em HubFazendaCruzeiro/app/static/tema/
   e cada app o carrega depois do layout.css e antes do proprio CSS.

   Regras:
   - So variaveis do tema (var(--cor-...)), nunca cor fixa.
   - Um nome para cada coisa: .btn-secondary, .btn-danger, .btn-warning, .btn-sm,
     .page-subtitle, .table-wrap, .field-full, .empty-state, .system-footer,
     .badge-sucesso/-aviso/-info/-perigo/-neutro, .caixa-info/-aviso/-perigo,
     .selo-em-breve, .card-indisponivel, .fundo-modal (0187),
     .prioridade-baixa/-normal/-alta/-urgente/-fora (0235), .pulsar-atencao/-perigo (0238), .pulsar-forte (0239).
   - O app fica so com o que e dele (conteudo); componente comum muda aqui.
   ===================================================================== */

/* Base */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--cor-fundo);color:var(--cor-texto)}
a{color:inherit}
.muted{color:var(--cor-texto-secundario)}

/* Botoes */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:8px;padding:10px 14px;background:var(--cor-destaque);color:var(--cor-sobre-destaque);text-decoration:none;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
button:hover,.btn:hover{background:var(--cor-destaque-hover)}
button:focus-visible,.btn:focus-visible{outline:3px solid var(--cor-destaque-vivo);outline-offset:2px}
button[hidden],.btn[hidden]{display:none}
.btn-secondary{background:var(--cor-superficie-realce);color:var(--cor-texto)}
.btn-secondary:hover{background:var(--cor-superficie-hover)}
.btn-danger,.btn-danger:hover{background:var(--cor-perigo);color:var(--cor-sobre-forte)}
.btn-warning,.btn-warning:hover{background:var(--cor-aviso-solido)}
.btn-sm{padding:7px 10px;font-size:12px;border-radius:7px}
button:disabled,.btn:disabled{opacity:.42;cursor:not-allowed;pointer-events:none}

/* Campos */
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--cor-borda-forte);border-radius:8px;background:var(--cor-campo);font-family:inherit;font-size:14px;line-height:1.35;margin:6px 0 15px;color:var(--cor-texto)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cor-destaque);box-shadow:0 0 0 3px var(--cor-foco)}
input::placeholder,textarea::placeholder{font-size:14px;color:var(--cor-texto-fraco)}
select option{font-family:inherit;font-size:14px;font-weight:400}
textarea{resize:vertical}
label{font-size:13px;font-weight:700}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.field-full{grid-column:1/-1}

/* Mensagens */
.flash{margin-bottom:14px;padding:12px 14px;border-radius:8px;font-size:14px}
.sucesso{background:var(--cor-destaque-suave);color:var(--cor-destaque-texto)}
.erro{background:var(--cor-perigo-suave);color:var(--cor-perigo-forte)}
.aviso{background:var(--cor-aviso-suave);color:var(--cor-aviso)}
.empty-state{padding:28px!important;text-align:center;color:var(--cor-texto-secundario)}

/* Caixas de orientacao (0187): texto de ajuda, aviso e alerta dentro da pagina */
.caixa-info,.caixa-aviso,.caixa-perigo{padding:14px 16px;border:1px solid var(--cor-borda);border-radius:10px;font-size:13px;line-height:1.5;margin-bottom:18px}
.caixa-info{border-color:var(--cor-destaque-borda);background:var(--cor-superficie-suave);color:var(--cor-destaque-texto-forte)}
.caixa-aviso{border-color:var(--cor-aviso-borda);background:var(--cor-aviso-suave);color:var(--cor-aviso)}
.caixa-perigo{border-color:var(--cor-perigo-borda);background:var(--cor-perigo-suave);color:var(--cor-texto)}

/* Pagina de erro (500), fora da casca do app */
.erro-pagina{max-width:560px;margin:12vh auto;padding:0 16px;text-align:center}
.erro-pagina-codigo{font-size:48px;font-weight:700;color:var(--cor-perigo)}
.erro-pagina h1{margin:0 0 12px}

/* Area do app (0187): a casca e o conteudo, iguais nos apps com menu lateral (o Hub ajusta o dele) */
.app-shell{min-height:100vh}
.main{display:flex;flex-direction:column;min-height:100vh;padding-right:28px;padding-bottom:42px;padding-left:28px;background:var(--cor-superficie-suave)}

/* Grupos de botoes e resumo em numeros */
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.form-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:18px}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
/* Formulario em cartao (com .card) */
.form-card{max-width:820px;padding:24px}

/* Cartao */
.card{background:var(--cor-superficie);border:1px solid var(--cor-borda);border-radius:12px;padding:20px;box-shadow:var(--sombra)}
/* Cartao (ou atalho) sem acesso: esmaecido, mas legivel no tema noturno */
.card-indisponivel{opacity:.42;filter:saturate(.35);cursor:default}
html[data-theme="noturno"] .card-indisponivel{opacity:.85}
.card-indisponivel:hover,.card-indisponivel:hover *{transform:none}
/* "Em breve": selo no canto do cartao */
.selo-em-breve{position:absolute;right:18px;top:18px;padding:5px 7px;border-radius:999px;background:var(--cor-superficie-realce);color:var(--cor-texto-secundario);font-size:8px;font-weight:800;letter-spacing:.35px}

/* Fundo das janelas (modal): escurece a pagina e centraliza a janela */
body.modal-open{overflow:hidden}
.fundo-modal{position:fixed;inset:0;z-index:1800;display:grid;place-items:center;padding:20px;background:var(--cor-sobreposicao);backdrop-filter:blur(3px)}
.fundo-modal[hidden]{display:none}

/* Titulo da pagina */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.page-head h1{margin:0;font-size:30px;line-height:1.1}
.page-subtitle{margin:6px 0 0;color:var(--cor-texto-secundario);font-size:14px;line-height:1.45}

/* Etiqueta e selos de situacao (0187): uma cor por sentido, nos 4 apps */
.badge{display:inline-block;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700;white-space:nowrap}
.badge-sucesso{background:var(--cor-sucesso-suave);color:var(--cor-sucesso)}
.badge-aviso{background:var(--cor-aviso-suave);color:var(--cor-aviso)}
.badge-info{background:var(--cor-info-suave);color:var(--cor-info)}
.badge-perigo{background:var(--cor-perigo-suave);color:var(--cor-perigo-forte)}
.badge-neutro{background:var(--cor-superficie-realce);color:var(--cor-texto-secundario)}
/* Selo da prioridade (0235): os do Chamados, agora de todos (fazenda_common.prioridades, filtro |selo_prioridade) */
.prioridade-urgente{background:var(--cor-perigo-suave);color:var(--cor-perigo-forte)}
.prioridade-alta{background:var(--cor-alerta-suave);color:var(--cor-alerta)}
.prioridade-normal{background:var(--cor-info-suave);color:var(--cor-info)}
.prioridade-baixa{background:var(--cor-destaque-suave-hover);color:var(--cor-sucesso)}
.prioridade-fora{background:var(--cor-roxo-suave);color:var(--cor-roxo)}
/* Pulsar de atenção (0238): o halo que chama o olho para o que mudou ou pede ação. Veio do fluxo
   da correção do Bon (etapaPulse, mesmo efeito); .pulsar-perigo é a versão do que venceu. */
@keyframes pulsar-atencao{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cor-aviso-solido) 24%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
@keyframes pulsar-perigo{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cor-perigo) 28%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
.pulsar-atencao{animation:pulsar-atencao 1.8s infinite}
.pulsar-perigo{animation:pulsar-perigo 1.8s infinite}
/* .pulsar-forte (0239), junto com um dos dois: halo maior e mais forte e o fundo acendendo, para o que
   precisa ser visto de longe (os cards da Agenda). O Bon segue com o suave. */
@keyframes pulsar-forte-atencao{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cor-aviso-solido) 60%,transparent),inset 0 0 0 999px transparent}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--cor-aviso-solido) 22%,transparent),inset 0 0 0 999px color-mix(in srgb,var(--cor-aviso-solido) 16%,transparent)}75%{box-shadow:0 0 0 12px transparent,inset 0 0 0 999px transparent}}
@keyframes pulsar-forte-perigo{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cor-perigo) 60%,transparent),inset 0 0 0 999px transparent}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--cor-perigo) 24%,transparent),inset 0 0 0 999px color-mix(in srgb,var(--cor-perigo) 14%,transparent)}75%{box-shadow:0 0 0 12px transparent,inset 0 0 0 999px transparent}}
.pulsar-atencao.pulsar-forte{animation:pulsar-forte-atencao 1.4s ease-in-out infinite}
.pulsar-perigo.pulsar-forte{animation:pulsar-forte-perigo 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.pulsar-atencao,.pulsar-perigo,.pulsar-atencao.pulsar-forte,.pulsar-perigo.pulsar-forte{animation:none}}

/* Tabelas */
.table-wrap{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 10px;border-bottom:1px solid var(--cor-borda-suave);text-align:left;font-size:13px;vertical-align:middle}
th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--cor-texto-secundario);background:var(--cor-superficie-suave)}
tr:last-child td{border-bottom:0}

/* Relatorios e Auditoria: abas (fazenda_common/abas.html), bloco recolhivel e tabela de relatorio */
.report-switch{display:inline-flex;gap:4px;padding:4px;background:var(--cor-superficie-realce);border:1px solid var(--cor-borda);border-radius:10px;flex:0 0 auto}
.report-tab{background:transparent;color:var(--cor-texto);padding:8px 14px;border-radius:7px;box-shadow:none}
.report-tab:hover{background:var(--cor-superficie-hover)}
.report-tab.active{background:var(--cor-destaque);color:var(--cor-sobre-destaque)}
.report-panel{display:none}
.report-panel.active{display:block}
.report-table{min-width:700px}
.report-table tfoot td{background:var(--cor-superficie-suave);border-top:1px solid var(--cor-borda);border-bottom:0}
.report-table .num{text-align:right;white-space:nowrap}
.report-table .center{text-align:center}
.sector-report-details{padding:0;overflow:hidden;margin-bottom:18px}
.sector-report-details>summary{cursor:pointer;list-style:revert;padding:20px;font-family:inherit;font-size:24px;font-weight:700;letter-spacing:normal;line-height:normal;color:var(--cor-texto);display:list-item;margin-left:20px}
.sector-report-details>summary::marker{color:var(--cor-destaque-hover);font-size:.72em}
.sector-report-details .sector-report-body{padding:0 20px 20px}
.sector-report-details .report-switch{margin:0 0 16px auto;width:max-content}
.actions.table-actions{justify-content:flex-end;margin-top:0}

/* Rodape (macro casca.rodape) */
.system-footer{margin-top:auto;padding:28px 12px 18px;text-align:center;font-size:12px;color:var(--cor-texto-fraco);letter-spacing:.15px}

/* Anexo (0189): clipe de papel no lugar da barra do navegador, em todo campo de arquivo.
   Macro campos.anexo (fazenda_common/campos.html); o formularios.js mostra os nomes escolhidos. */
.campo-anexo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 15px}
.campo-anexo input[type=file]{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
.botao-anexo{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:transparent;color:var(--cor-texto-secundario);cursor:pointer}
.botao-anexo:hover{background:var(--cor-superficie-realce);color:var(--cor-texto)}
.botao-anexo{position:relative}
.botao-anexo[data-qtd]{color:var(--cor-destaque-texto);background:var(--cor-destaque-suave)}
.botao-anexo[data-qtd]:after{content:attr(data-qtd);position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--cor-destaque);color:var(--cor-sobre-destaque);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.campo-anexo input[type=file]:focus-visible+.botao-anexo{outline:3px solid var(--cor-destaque-vivo);outline-offset:2px}
.botao-anexo svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.anexo-nomes{font-size:13px;color:var(--cor-texto-secundario);overflow-wrap:anywhere}
.anexo-nomes.escolhidos{color:var(--cor-texto);font-weight:700}
.form-actions .campo-anexo{margin:0}

/* Chat (0189): lista de mensagens, bolhas, eventos do sistema e o compositor (como no WhatsApp).
   Macros em fazenda_common/chat.html; Enter envia, Shift+Enter quebra a linha (formularios.js). */
.chat-lista{display:flex;flex-direction:column;gap:11px;padding:4px 0 10px}
.chat-mensagem{display:flex}
.chat-mensagem.minha{justify-content:flex-end}
.chat-bolha{max-width:min(78%,680px);padding:10px 12px;border-radius:12px;background:var(--cor-superficie-realce);border:1px solid var(--cor-borda);box-shadow:var(--sombra-suave);border-bottom-left-radius:4px}
.chat-mensagem.minha .chat-bolha{background:var(--cor-destaque-suave);border-color:var(--cor-destaque-borda);border-bottom-left-radius:12px;border-bottom-right-radius:4px}
.chat-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:5px;font-size:11px;color:var(--cor-texto-secundario)}
.chat-meta strong{color:var(--cor-destaque-texto);font-size:12px}
.chat-meta span{white-space:nowrap}
.chat-texto{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;font-size:14px}
.chat-arquivo{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;background:var(--cor-superficie);border:1px solid var(--cor-borda-suave);color:var(--cor-texto);font-size:13px;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.chat-arquivo:hover{border-color:var(--cor-destaque-borda);text-decoration:underline}
.chat-arquivo svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--cor-destaque-texto);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-arquivo-oculto{color:var(--cor-texto-secundario);font-weight:400;font-style:italic}
.chat-evento{align-self:center;width:min(92%,720px);padding:8px 12px;border-radius:9px;background:var(--cor-superficie-suave);text-align:center;font-size:12px;color:var(--cor-texto-secundario)}
.chat-evento-data{font-size:12px;color:var(--cor-texto-fraco);margin-bottom:5px}
.chat-novas{position:sticky;bottom:12px;margin:-4px auto 10px;display:block;width:max-content;min-height:auto;padding:7px 11px;border-radius:999px;box-shadow:var(--sombra-elevada);font-size:12px;z-index:2}
.chat-novas[hidden]{display:none}
.chat-compositor{display:flex;align-items:flex-end;gap:6px;padding:6px;border:1px solid var(--cor-borda-forte);border-radius:26px;background:var(--cor-campo)}
.chat-compositor:focus-within{border-color:var(--cor-destaque);box-shadow:0 0 0 3px var(--cor-foco)}
.chat-compositor .campo-anexo{margin:0;flex:0 0 auto}
.chat-compositor .campo-anexo .anexo-nomes{display:none}
.chat-compositor textarea{flex:1;min-height:42px;max-height:180px;margin:0;padding:10px 6px;border:0;background:transparent;resize:none;box-shadow:none;line-height:1.4;overflow-y:auto}
.chat-compositor textarea:focus{box-shadow:none}
.chat-enviar{width:42px;height:42px;flex:0 0 42px;padding:0;border-radius:50%}
.chat-enviar svg{width:20px;height:20px;fill:currentColor;margin-left:2px}
.chat-enviar:disabled{opacity:.55}
.chat-rodape{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:18px;margin:6px 4px 0;font-size:12px;color:var(--cor-texto-secundario)}
.chat-rodape .anexo-nomes.escolhidos{font-size:12px}
.chat-situacao{color:var(--cor-destaque-texto);font-weight:700;margin-left:auto}
/* Marcar alguém com @ no chat (lista de sugestões e o nome marcado no texto) */
.mention-wrap{position:relative}
.mention-list{position:absolute;left:0;right:0;top:100%;z-index:30;max-height:260px;overflow-y:auto;margin-top:-6px;padding:5px;background:var(--cor-superficie);border:1px solid var(--cor-borda);border-radius:10px;box-shadow:var(--sombra-flutuante)}
.mention-list[hidden]{display:none}
.mention-option{display:flex;width:100%;justify-content:space-between;gap:12px;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:var(--cor-texto);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.mention-option span{color:var(--cor-texto-secundario);font-size:12px}
.mention-option.active,.mention-option:hover{background:var(--cor-destaque-suave)}
.chat-texto .mention{padding:0 4px;border-radius:5px;background:var(--cor-destaque-suave);color:var(--cor-destaque-texto);font-weight:700}

@media(max-width:1100px){
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Celular e tablet */
@media(max-width:820px){
  .main{padding-right:14px;padding-bottom:28px;padding-left:14px;min-width:0}
  .form-actions{gap:8px}
  .form-card{padding:16px;max-width:none}
  .page-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:17px}
  .page-head h1{font-size:25px}
  .page-subtitle{font-size:13px;line-height:1.4}
  .page-head>.btn{width:100%}
  .card{padding:16px;border-radius:11px}
  .form-grid{grid-template-columns:1fr}
  .field-full{grid-column:auto}
  input,select,textarea{font-size:16px}
  input::placeholder,textarea::placeholder,select option{font-size:16px}
  .btn{min-height:42px;padding:10px 13px}
  .btn-sm{min-height:38px;padding:8px 10px}
  .table-wrap{-webkit-overflow-scrolling:touch}
  th,td{font-size:12px;padding:11px 9px}
  th{font-size:10px;white-space:nowrap}
  .system-footer{font-size:11px;padding:24px 8px 8px;line-height:1.4}
  .report-switch{width:100%}
  .report-tab{flex:1}
}
@media(max-width:430px){
  .main{padding-right:12px;padding-left:12px}
  .page-head h1{font-size:23px}
  .summary-grid{grid-template-columns:1fr}
  .fundo-modal{padding:10px}
  .chat-bolha{max-width:88%}
}

/* 0241: identidade de cada app (fazenda_common/apps.py). A classe app-<codigo> passa ao componente
   --app (a cor), --app-escuro, --app-suave e --app-texto; .app-selo e o icone do app num quadrado da cor dele. */
.app-hub{--app:var(--cor-app-hub);--app-escuro:var(--cor-app-hub-escuro);--app-suave:var(--cor-app-hub-suave);--app-texto:var(--cor-app-hub-texto)}
.app-chamados{--app:var(--cor-app-chamados);--app-escuro:var(--cor-app-chamados-escuro);--app-suave:var(--cor-app-chamados-suave);--app-texto:var(--cor-app-chamados-texto)}
.app-bonificacao{--app:var(--cor-app-bonificacao);--app-escuro:var(--cor-app-bonificacao-escuro);--app-suave:var(--cor-app-bonificacao-suave);--app-texto:var(--cor-app-bonificacao-texto)}
.app-agenda{--app:var(--cor-app-agenda);--app-escuro:var(--cor-app-agenda-escuro);--app-suave:var(--cor-app-agenda-suave);--app-texto:var(--cor-app-agenda-texto)}
.app-utilitarios{--app:var(--cor-app-utilitarios);--app-escuro:var(--cor-app-utilitarios-escuro);--app-suave:var(--cor-app-utilitarios-suave);--app-texto:var(--cor-app-utilitarios-texto)}
.app-selo{display:inline-grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:var(--app,var(--cor-destaque));color:var(--cor-sobre-destaque)}
.app-selo svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}