* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; background: #f5f5f4; color: #2c2c2a; }
.menu-topo { background: #26215c; padding: 12px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.menu-topo a { color: #fff; text-decoration: none; }
.menu-topo a:hover { text-decoration: underline; }
.usuario-logado { margin-left: auto; color: #cecbf6; display: flex; align-items: center; gap: 6px; }
.conteudo { max-width: 1400px; margin: 20px auto; padding: 0 20px; }
.caixa-login { max-width: 340px; margin: 80px auto; padding: 24px; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
label { display: block; margin-bottom: 12px; font-size: 14px; }
input, select, textarea { width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
label.checkbox, label.linha-radio { display: flex; align-items: center; gap: 8px; }
label.checkbox input, label.linha-radio input { width: auto; }
button { background: #26215c; color: #fff; border: none; padding: 10px 18px; border-radius: 4px; cursor: pointer; font-size: 14px; }
button:hover { background: #3c3489; }
.tabela { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tabela th, .tabela td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; vertical-align: top; }
.etiqueta { padding: 2px 8px; border-radius: 12px; font-size: 12px; background: #d3d1c7; }
.etiqueta-aberto { background: #b5d4f4; }
.etiqueta-em_andamento { background: #fac775; }
.etiqueta-standby { background: #d3d1c7; }
.etiqueta-com_cliente { background: #f0997b; }
.etiqueta-concluido { background: #97c459; }
.erro { color: #a32d2d; }
.dica { font-size: 12px; color: #5f5e5a; }
.kanban { display: flex; gap: 12px; overflow-x: auto; }
.coluna-kanban { background: #fff; border-radius: 8px; padding: 10px; min-width: 200px; flex: 1; }
.lista-kanban { min-height: 100px; }
.cartao-kanban { background: #eeedfe; border-radius: 6px; padding: 8px; margin-bottom: 8px; cursor: grab; }
.cartao-kanban small { display: block; color: #5f5e5a; }
.comentario { border-bottom: 1px solid #ddd; padding: 8px 0; }
.data-comentario { font-size: 12px; color: #5f5e5a; margin-left: 8px; }
fieldset { border: 1px solid #ddd; border-radius: 6px; margin-bottom: 12px; padding: 10px; }
.seletor-modo { display: flex; gap: 8px; margin-bottom: 12px; }
.seletor-modo a { padding: 6px 14px; border-radius: 16px; background: #fff; color: #26215c; text-decoration: none; font-size: 13px; border: 1px solid #d3d1c7; }
.seletor-modo a.ativo { background: #26215c; color: #fff; }
.foto-miniatura { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.foto-miniatura-preview { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 8px; }
.linha-tarefa-inicial { display: flex; gap: 10px; align-items: end; margin-bottom: 8px; border: 1px dashed #ccc; padding: 8px; border-radius: 6px; }
.linha-tarefa-inicial label { flex: 1; margin-bottom: 0; }
.cronometro { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cronometro-display { font-family: monospace; font-size: 13px; min-width: 62px; }
.cronometro button, .linha-formulario-tempo button { padding: 4px 8px; font-size: 12px; }
.linha-formulario-tempo { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.input-horas { width: 70px; }
.input-data-tempo { width: 140px; }
.linha-formulario select { display: inline-block; width: auto; }
.linha-formulario { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linha-formulario input[type="text"] { width: auto; flex: 1; min-width: 140px; }
.grade-resumo { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.cartao-resumo { background: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.filtro-relatorio { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; background: #fff; padding: 12px; border-radius: 8px; }
.filtro-relatorio label { flex: 1; min-width: 140px; margin-bottom: 0; }
.filtro-relatorio button { height: 38px; margin-top: 4px; }

/* Fase 1: banco de horas, menu suspenso, departamentos */
.menu-suspenso { position: relative; }
.menu-suspenso-titulo { cursor: pointer; }
.menu-suspenso-lista { display: none; position: absolute; top: 100%; left: 0; background: #26215c; border-radius: 0 0 6px 6px; min-width: 140px; z-index: 10; padding: 4px 0; }
.menu-suspenso:hover .menu-suspenso-lista, .menu-suspenso:focus-within .menu-suspenso-lista { display: block; }
.menu-suspenso-lista a { display: block; padding: 8px 14px; white-space: nowrap; }
.grade-checkbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.grade-checkbox label.checkbox { margin-bottom: 0; }
.linha-moeda { display: flex; gap: 8px; }
.linha-moeda select { width: 110px; flex-shrink: 0; }
.aviso-sucesso { background: #d9f0c9; color: #2f5e1a; padding: 8px 12px; border-radius: 6px; display: inline-block; margin-bottom: 12px; }

/* Botao Salvar sempre visivel no formulario do job (formularios longos) */
.barra-salvar { position: sticky; bottom: 0; background: #fff; padding: 12px 16px; margin-top: 16px; border-top: 1px solid #ddd; box-shadow: 0 -2px 8px rgba(0,0,0,0.08); border-radius: 8px; }
.barra-salvar button { font-size: 15px; padding: 12px 24px; }

/* Barra flutuante para formularios curtos dentro de paginas longas (ex: Nova tarefa),
   onde a barra sticky (.barra-salvar) nao tem efeito por o formulario ser pequeno */
.barra-salvar-flutuante { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; padding: 10px 16px; box-shadow: 0 -2px 8px rgba(0,0,0,0.12); z-index: 20; display: flex; justify-content: center; }
.barra-salvar-flutuante button { font-size: 15px; padding: 12px 24px; }

/* Fase 3: banco de horas, moeda, notificacoes financeiras */
.link-sino { position: relative; font-size: 18px; }
.contador-sino { position: absolute; top: -6px; right: -10px; background: #c0392b; color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 6px; }
.rotulo-moeda { display: block; width: 100%; margin-bottom: 6px; font-size: 14px; }
.cartao-resumo.alerta-amarelo { background: #fff3cd; }
.cartao-resumo.alerta-vermelho { background: #f8d7da; }
.aviso-alerta { padding: 10px 14px; border-radius: 6px; margin: 10px 0; }
.aviso-amarelo { background: #fff3cd; color: #7a5c00; }
.aviso-vermelho { background: #f8d7da; color: #7a1c1c; }
.linha-nao-lida { font-weight: bold; }
.bolinha-nao-lida { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c0392b; }
.botao-link { display: inline-block; background: #26215c; color: #fff !important; text-decoration: none; padding: 10px 18px; border-radius: 4px; font-size: 14px; }
.botao-link:hover { background: #3c3489; }

/* Ajustes desta rodada: status do cliente, total do periodo no financeiro */
.linha-inativa { opacity: 0.55; }
.etiqueta-ativo { background: #97c459; }
.etiqueta-inativo { background: #d3d1c7; }
.cartao-total-periodo { font-weight: bold; background: #eeedfe; }

/* Duas datas lado a lado (ex: inicio/fim do job) */
.linha-dupla { display: flex; gap: 16px; }
.linha-dupla label { flex: 1; }

/* Botao de excluir inline ao lado do link de anexo */
.linha-formulario-inline { display: inline-block; margin-left: 8px; }
.linha-formulario-inline button { padding: 2px 8px; font-size: 12px; }

/* Rotulo indicando o formato de tempo (hh:mm:ss / hh:mm) */
.rotulo-formato-tempo { font-size: 10px; color: #8a8880; text-transform: uppercase; margin-right: 4px; }

/* Logo e versao no menu superior */
.marca-sistema { display: flex; align-items: center; gap: 6px; margin-right: 8px; }
.logo-sistema { height: 28px; width: auto; display: block; }
.versao-sistema { color: #cecbf6; font-size: 11px; font-weight: bold; }
/* espaço no topo que fica escondido pelo menu fixo */
.header-spacer {
    margin-top: 70px !important;
}