#page_agendaoperacional, #page_ordensservico, #page_agenda_form {
	padding: 15px;
}

/* Resumo de equipamentos vinculados por módulo (visão estática da OS) —
   reaproveita .equipment-card-module/.equipment-image/.equipment-name
   (css/relatorios_unificados.css), só adiciona o grid e o badge de quantidade. */
.agenda-modulos-os-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
}

.agenda-modulos-os-grid .equipment-image {
	position: relative;
}

.agenda-modulo-os-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: #b13536;
	color: #fff;
	border-radius: 20px;
	min-width: 20px;
	height: 20px;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

/* O botão flutuante do chat (INSPE IA) fica fixo no canto inferior direito
   (120x120px) e sobrepõe o final da página; sem esse respiro o Salvar
   (último botão da barra sticky, encostado na direita) fica atrás dele. */
#page_agenda_form {
	padding-bottom: 140px;
}

.agenda-filtro-barra {
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
	align-items: stretch;
	margin-bottom: 15px;
}

/* Garante que todos os botões da barra (Filtro/Nova OS/Relatório de edições/
   Imprimir/Kanban) fiquem com a mesma altura mesmo com textos de tamanhos
   diferentes — sem isso "Relatório de edições" quebra em 2 linhas antes dos
   outros botões e fica mais alto que o resto da barra. */
.agenda-filtro-barra .btn {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn.agenda-btn-filtro {
	background: linear-gradient(135deg, #27ae60 0%, #8fb533 100%) !important;
	color: #fff !important;
	box-shadow: rgba(39, 174, 96, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

.btn.agenda-btn-kanban {
	background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%) !important;
	color: #fff !important;
	box-shadow: rgba(25, 118, 210, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

.btn.agenda-btn-novo {
	background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%) !important;
	color: #fff !important;
	box-shadow: rgba(25, 118, 210, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

/* ── Abas Lista de OS / Recorrentes (mesmo estilo pill dos botões da agenda) ── */
.os-abas {
	display: flex;
	gap: 8px;
	margin-bottom: 15px;
}

.os-aba-btn {
	flex: 1;
	padding: 10px;
	border: 1px solid #c0392b;
	border-radius: 20px;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: .3px;
	cursor: pointer;
	transition: .3s;
	background: transparent;
	color: #c0392b;
}

.os-aba-btn-ativa {
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	border-color: transparent;
	color: #fff;
	box-shadow: rgba(231, 76, 60, 0.4) 0px 4px 10px;
}

.agenda-filtro-painel {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: flex-end;
	margin-bottom: 15px;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 12px 15px;
}

.agenda-filtro-painel .form-group {
	min-width: 220px;
	margin-bottom: 0;
}

.agenda-filtro-painel .select2-container {
	width: 100% !important;
}

.agenda-vazio {
	color: #999;
	font-size: 13px;
	padding: 12px 0;
	text-align: center;
}

#agenda_calendario {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 20px;
}

.agenda-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 5px;
	margin-bottom: 10px;
}

.agenda-legenda-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #555;
}

.agenda-legenda-bolinha {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ── Kanban da Agenda Operacional (alternativa ao calendário) ── */
.agenda-kanban-board {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	overflow-x: auto;
	margin-bottom: 20px;
}

.agenda-kanban-coluna {
	flex: 1 1 0;
	min-width: 260px;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 10px;
}

.agenda-kanban-coluna-titulo {
	font-weight: 700;
	font-size: 13px;
	color: #555;
	border-top: 4px solid;
	padding-top: 6px;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
}

.agenda-kanban-contador {
	color: #999;
	font-weight: normal;
}

.agenda-kanban-lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 80px;
}

.agenda-kanban-lista.ui-sortable-over {
	background: #eef7ff;
	border-radius: 6px;
}

.agenda-kanban-lista .alertav2-card.ui-sortable-helper {
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	cursor: grabbing;
}

.agenda-kanban-lista .alertav2-card {
	cursor: grab;
}

.agenda-kanban-placeholder {
	border: 2px dashed #ccc;
	border-radius: 6px;
	margin-bottom: 0;
}

/* ── Listagem de Ordens de Serviço (cards, estilo Alertas Automáticos) ── */
#os_lista_cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}

/* ── Visualização estática de uma OS já existente (aberta pela agenda/lista) ── */
.agenda-view-card {
	border-radius: 8px;
	padding: 18px;
	margin-bottom: 20px;
}

.agenda-view-campo {
	margin-bottom: 16px;
}

.agenda-view-campo label {
	display: block;
	font-weight: bold;
	color: #555;
	margin-bottom: 4px;
}

.agenda-view-valor {
	font-size: 14px;
	color: #333;
}

.agenda-status-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 20px;
	color: #fff;
	font-size: 12.5px;
	font-weight: bold;
}

/* Caixa "X de Y equipamentos já inspecionados" — mesmo visual no formulário de
   edição (#agenda_inspecionados_info) e na visualização estática. */
.agenda-inspecionados-info {
	padding: 10px 12px;
	background: #eef7f0;
	border-radius: 6px;
	border-left: 3px solid #43a047;
	font-size: 13px;
}

#agenda_view_equipamentos .agenda-equip-item-popup {
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
}

/* ── Cabeçalho da página de formulário ── */
.agenda-form-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.agenda-form-header h3 {
	margin: 0;
}

.agenda-ajuda {
	display: block;
	color: #888;
	font-size: 12px;
	margin-top: 4px;
}

/* Observação de campo no mesmo azul usado em outras partes do sistema
   (ver .info-assinatura-universal em css/cadastro_clientes.css), só que compacta
   para caber logo abaixo de cada campo sem pesar um formulário com vários campos. */
.agenda-ajuda-azul {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	background: #E3F2FD;
	color: #1976D2;
	border-left: 4px solid #1976D2;
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 4px;
}

.agenda-ajuda-azul .material-icons {
	font-size: 15px;
	line-height: 1.4;
	flex-shrink: 0;
}

/* Título do campo "Dias da semana" continua com a mesma aparência (negrito)
   dos demais labels de campo — só os chips de cada dia (abaixo) têm estilo próprio. */
.agenda-dias-semana-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.agenda-dias-semana-lista .agenda-dia-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 20px;
	padding: 7px 14px;
	font-weight: normal;
	font-size: 13px;
	color: #555;
	cursor: pointer;
	margin: 0;
	min-width: 64px;
	transition: background .15s, border-color .15s, color .15s;
}

.agenda-dias-semana-lista .agenda-dia-chip.selected {
	background: #fdecea;
	border-color: #b13536;
	color: #b13536;
	font-weight: 600;
}

.agenda-dias-semana-lista .agenda-dia-chip input[type="checkbox"] {
	width: 15px !important;
	height: 15px !important;
	margin: 0 !important;
}

/* O Materialize (framework do tema) espera "input[type=checkbox] + label" como
   irmãos para desenhar o check customizado; como nossos checkboxes ficam
   DENTRO do label (<label><input> Texto</label>), o Materialize esconde o
   input nativo e nunca desenha o check customizado, deixando a caixinha
   invisível. Força a exibição nativa do checkbox, sobrescrevendo o tema. */
#page_agenda_form input[type="checkbox"],
#agenda_equip_sel_todos,
.agenda_equip_check {
	-webkit-appearance: checkbox !important;
	appearance: checkbox !important;
	opacity: 1 !important;
	position: static !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 6px 0 0 !important;
	cursor: pointer !important;
	vertical-align: middle;
}

/* Grid (não mais barra fixa/sticky) — 2 botões por linha, do mesmo tamanho,
   estática logo depois do card, igual o padrão já usado na Lista de OS
   (#os_lista_cards .alertav2-card-actions). */
.agenda-form-acoes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 20px;
	padding: 15px 0;
}

.agenda-form-acoes .btn {
	margin: 0;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.btn.agenda-btn-cancelar {
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
	color: #fff !important;
	box-shadow: rgba(231, 76, 60, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

.btn.agenda-btn-concluir {
	background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%) !important;
	color: #fff !important;
	box-shadow: rgba(25, 118, 210, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

.btn.agenda-btn-salvar {
	background: linear-gradient(135deg, #27ae60 0%, #8fb533 100%) !important;
	color: #fff !important;
	box-shadow: rgba(39, 174, 96, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

.btn.agenda-btn-relatorio {
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
	color: #fff !important;
	box-shadow: rgba(231, 76, 60, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

/* Integração com Google Agenda (exportação manual de link/.ics) — mesmo azul
   degradê já usado em agenda-btn-kanban/agenda-btn-concluir. */
.btn.agenda-btn-google {
	background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%) !important;
	color: #fff !important;
	box-shadow: rgba(25, 118, 210, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.agenda-google-aviso {
	margin-top: 14px;
	background: #FFF3E0;
	color: #E65100;
	padding: 10px 12px;
	border-radius: 8px;
	border-left: 4px solid #FB8C00;
	font-size: 12px;
	line-height: 1.5;
}

#modalGoogleAgenda {
	z-index: 9999999;
	top: 70px;
}

#modalGoogleAgenda .modal-content {
	border-radius: 16px;
	overflow: hidden;
	border: none;
}

#modalGoogleAgenda .modal-header {
	background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%);
	border-bottom: none;
	margin: 0;
}

#modalGoogleAgenda .modal-title {
	color: #fff;
	font-weight: 700;
}

#modalGoogleAgenda .modal-header .close {
	color: #fff;
	opacity: .9;
	text-shadow: none;
}

/* Botões de ação da Lista de OS: sempre 2 por linha, do mesmo tamanho — em vez
   do flex-wrap padrão de .alertav2-card-actions (compartilhado com outras
   telas de cards, como Alertas automáticos/Portal), onde cada botão só fica
   do tamanho do próprio texto. */
#os_lista_cards .alertav2-card-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

#os_lista_cards .alertav2-card-actions .btn {
	width: 100%;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Botão "Concluir" da lista de OS — mesmo azul do "Ver rota"/Kanban, com o
   degradê + pill que os outros botões da linha de ações já têm (o .bg-blue
   genérico do tema, sozinho, fica quadrado/chapado e destoa dos outros). */
.alertav2-card-actions .btn.bg-blue {
	background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: rgba(25, 118, 210, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

/* Botão "Imprimir" da visualização estática de OS e da Lista de OS (também usado
   no app, css/agenda_operacional.css em app/InspefireAndroid12Novo/www/css/). */
.btn.agenda-btn-imprimir {
	background: linear-gradient(135deg, #546E7A 0%, #90A4AE 100%) !important;
	color: #fff !important;
	box-shadow: rgba(84, 110, 122, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

/* Botão "Navegar" (Waze/Google Maps/Apple Maps) da lista e da visualização
   estática de OS — mesmo roxo do botão "Ver rota" do mapa operacional. */
.btn.agenda-btn-navegar {
	background: linear-gradient(135deg, #8e24aa 0%, #4a0072 100%) !important;
	color: #fff !important;
	box-shadow: rgba(142, 36, 170, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

/* Opções dentro do modal #modalNavegar. */
.btn.agenda-btn-waze {
	background: linear-gradient(135deg, #00C2E8 0%, #0288A8 100%) !important;
	color: #fff !important;
	box-shadow: rgba(0, 194, 232, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

.btn.agenda-btn-mapa-google {
	background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%) !important;
	color: #fff !important;
	box-shadow: rgba(25, 118, 210, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

.btn.agenda-btn-apple-maps {
	background: linear-gradient(135deg, #424242 0%, #1a1a1a 100%) !important;
	color: #fff !important;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 10px;
	border-radius: 20px !important;
}

#modalNavegar {
	z-index: 9999999;
	top: 70px;
}

#modalNavegar .modal-content {
	border-radius: 16px;
	overflow: hidden;
	border: none;
}

#modalNavegar .modal-header {
	background: linear-gradient(135deg, #8e24aa 0%, #4a0072 100%);
	border-bottom: none;
	margin: 0;
}

#modalNavegar .modal-title {
	color: #fff;
	font-weight: 700;
}

#modalNavegar .modal-header .close {
	color: #fff;
	opacity: .9;
	text-shadow: none;
}

/* ── Abas do picker de equipamentos (estilo Certificados/Laudos) ── */
.agenda-equip-tab {
	flex: 1;
	padding: 10px;
	border: none;
	border-radius: 20px;
	font-size: 13px;
	font-weight: bold;
	cursor: pointer;
	transition: 0.3s;
}

.agenda-equip-tab-ativo-verde {
	background: linear-gradient(135deg, #27ae60 0%, #8fb533 100%);
	color: #fff;
	box-shadow: rgba(39, 174, 96, 0.4) 0px 4px 10px;
}

.agenda-equip-tab-ativo-azul {
	background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%);
	color: #fff;
	box-shadow: rgba(25, 118, 210, 0.4) 0px 4px 10px;
}

.agenda-equip-tab-inativo {
	background: #eee;
	color: #666;
	box-shadow: none;
}

/* Cards de resultado de busca (checkbox), igual ao padrão de certificados */
#agenda_busca_resultado .agenda-equip-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	transition: background .15s;
}

#agenda_busca_resultado .agenda-equip-item:hover {
	background: #f5f5f5;
}

#agenda_busca_resultado .agenda-equip-item.selected {
	background: #e8f5e9 !important;
	border-left: 4px solid #4caf50;
}

/* Lista de equipamentos já vinculados (staged localmente até salvar) */
.agenda-vinc-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid #f0f0f0;
}

.agenda-vinc-btn-remover {
	background: none;
	border: 1px solid #e74c3c;
	color: #e74c3c;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	font-size: 16px;
	cursor: pointer;
	flex-shrink: 0;
	line-height: 1;
	margin-top: 2px;
}

.agenda-equip-item-popup {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-bottom: 1px solid #f0f0f0;
}

.agenda-equip-modulo-icone {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}

.agenda-equip-item-texto {
	flex: 1;
	min-width: 0;
}

.agenda-equip-badge {
	flex-shrink: 0;
	padding: 2px 10px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: bold;
	color: #fff;
	white-space: nowrap;
}

.agenda-equip-badge-ok {
	background: #43a047;
}

.agenda-equip-badge-pendente {
	background: #e74c3c;
}

/* FullCalendar: ajustes gerais para não estourar o container */
#agenda_calendario .fc {
	font-size: 13px;
	/* Grade mais clara/discreta (inspirado no Google Agenda) — não mexe nas
	   cores dos compromissos, só na linha de grade entre os dias. */
	--fc-border-color: #e8eaed;
	/* Bolinha do modo Lista maior, já que agora ela é preenchida (cor cheia do
	   status) em vez do anel fino padrão. */
	--fc-list-event-dot-width: 10px;
}

/* css/style_add_novo.css define "table { table-layout: fixed; }" SEM escopo,
   afetando também as tabelas internas do FullCalendar. Nas visões de grade
   (Mês/Semana) o layout fixo é necessário (mantém as colunas dos dias com a
   mesma largura) — só a tabela do modo Lista tem problema, porque sua linha de
   cabeçalho (nome do dia) usa colspan e encolhe para a largura de 1 coluna só. */
#agenda_calendario .fc-list-table {
	table-layout: auto !important;
}

/* Causa raiz real: css/style_add_novo.css define "th > div { transform: rotate(270deg);
   width:0px; }" sem escopo algum. O cabeçalho de dia do FullCalendar (Mês/Semana usa
   .fc-scrollgrid-sync-inner, Lista usa a div do fc-list-day-cushion) é sempre uma div
   filha direta de th, então cai nessa regra e fica rotacionado/com largura zero. */
#agenda_calendario th > div {
	transform: none !important;
	width: auto !important;
	margin: 0 !important;
}

#agenda_calendario th {
	height: auto !important;
}

#agenda_calendario .fc-toolbar {
	flex-wrap: wrap;
	row-gap: 8px;
}

#agenda_calendario .fc-toolbar-title {
	font-size: 17px;
}

#agenda_calendario .fc-button {
	padding: 4px 10px;
	font-size: 12.5px;
}

#agenda_calendario .fc-daygrid-day-frame {
	min-height: 70px;
}

/* Compromisso sempre clicável (abre o formulário via eventClick), independente
   do status — sem isso o FullCalendar usa cursor "default" nos eventos que não
   são arrastáveis (Concluído/Cancelado, editable:false). Cobre Mês, Semana e Lista. */
#agenda_calendario .fc-event,
#agenda_calendario .fc-daygrid-event,
#agenda_calendario .fc-timegrid-event,
#agenda_calendario .fc-list-event {
	cursor: pointer !important;
}

/* Modo Lista: nome do dia e a data ficam lado a lado (padrão de tabela),
   sem isso o texto quebra e empilha na vertical. */
#agenda_calendario .fc-list-day-cushion {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

#agenda_calendario .fc-list-day-text,
#agenda_calendario .fc-list-day-side-text {
	float: none !important;
	white-space: nowrap;
}

/* Modo Semana: nome dos dias no cabeçalho estava branco sobre fundo branco.
   Aproveitado também pra deixar o cabeçalho de dia (DOM., SEG. ...) com a cara
   discreta/maiúscula do Google Agenda. */
#agenda_calendario .fc-col-header-cell-cushion {
	color: #70757a !important;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.3px;
	padding: 8px 4px;
}

/* Número do dia: mais discreto, e com destaque circular no dia de hoje —
   mesma disposição do Google Agenda. Não mexe na cor dos compromissos. */
#agenda_calendario .fc-daygrid-day-number {
	font-size: 13px;
	font-weight: 500;
	color: #3c4043;
	padding: 6px 8px;
}

#agenda_calendario .fc-day-today .fc-daygrid-day-number {
	background: #1565C0;
	color: #fff;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px;
	padding: 0;
}

/* Compromisso no calendário como um "chip": fundo claro + faixa colorida na
   esquerda (cor do status, setada em backgroundColor/borderColor/textColor no
   JS) — mesmo padrão das caixas de observação do sistema (ex: fundo #E3F2FD +
   borda esquerda azul), só que respeitando a cor de cada status da agenda.
   Vale pro Mês (fc-daygrid-event) e pra Semana (fc-timegrid-event). */
#agenda_calendario .fc-daygrid-event,
#agenda_calendario .fc-timegrid-event {
	border-radius: 6px;
	font-weight: 500;
}

#agenda_calendario .fc-daygrid-event {
	margin-top: 2px;
	margin-bottom: 2px;
	padding: 2px 6px;
	border-width: 1px;
	border-left-width: 3px;
}

#agenda_calendario .fc-timegrid-event {
	border-width: 1px;
	border-left-width: 3px;
	padding-left: 4px;
}

#agenda_calendario .fc-daygrid-event .fc-event-title,
#agenda_calendario .fc-daygrid-event .fc-event-time,
#agenda_calendario .fc-timegrid-event .fc-event-title,
#agenda_calendario .fc-timegrid-event .fc-event-time {
	font-size: 12.5px;
}

#agenda_calendario .fc-daygrid-event:hover,
#agenda_calendario .fc-timegrid-event:hover {
	filter: brightness(0.96);
}

/* Modo Lista: a linha toda ganha o fundo claro do status (setado via
   eventDidMount no JS, já que a view de Lista não usa fc-event como bloco),
   com a bolinha e o título na cor cheia do status. */
#agenda_calendario .fc-list-event-title {
	font-weight: 500;
	font-size: 13px;
}

#agenda_calendario .fc-list-event-time {
	font-size: 13px;
}

/* Link "Mais N" (dias com mais compromissos do que cabe na célula) */
#agenda_calendario .fc-daygrid-more-link {
	font-size: 12px;
	font-weight: 500;
	color: #1565C0;
	margin-top: 2px;
}

#agenda_calendario .fc-daygrid-more-link:hover {
	text-decoration: underline;
	background: transparent;
}

/* Responsivo: telas maiores (tablet/desktop) — os compromissos na visão de Mês
   ficavam minúsculos porque o calendário usava o mesmo tamanho de fonte/altura
   de célula do celular; aqui aumentamos só a partir do breakpoint que o JS já
   usa pra distinguir mobile (window.innerWidth < 768). */
@media (min-width: 768px) {
	#agenda_calendario .fc {
		font-size: 15px;
	}

	#agenda_calendario .fc-daygrid-day-frame {
		min-height: 120px;
	}

	#agenda_calendario .fc-daygrid-day-number {
		font-size: 15px;
		padding: 4px 6px;
	}

	#agenda_calendario .fc-daygrid-event {
		padding: 3px 6px;
		margin-bottom: 3px;
	}

	#agenda_calendario .fc-timegrid-event {
		padding-left: 5px;
	}

	#agenda_calendario .fc-daygrid-event .fc-event-title,
	#agenda_calendario .fc-daygrid-event .fc-event-time,
	#agenda_calendario .fc-timegrid-event .fc-event-title,
	#agenda_calendario .fc-timegrid-event .fc-event-time {
		font-size: 13.5px;
	}

	#agenda_calendario .fc-list-event-title,
	#agenda_calendario .fc-list-event-time {
		font-size: 14px;
	}

	#agenda_calendario .fc-toolbar-title {
		font-size: 19px;
	}
}

/* Responsivo: telas pequenas (celular) */
@media (max-width: 767px) {
	#page_agendaoperacional, #page_ordensservico, #page_agenda_form {
		padding: 8px;
	}

	.agenda-filtro-barra {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.agenda-filtro-barra .btn {
		margin: 0;
		width: 100%;
	}

	.agenda-dias-semana-lista {
		gap: 6px;
	}

	.agenda-dias-semana-lista .agenda-dia-chip {
		min-width: calc(25% - 5px);
		padding: 6px 4px;
		font-size: 12.5px;
	}

	.agenda-filtro-painel {
		flex-direction: column;
		align-items: stretch;
		padding: 10px;
	}

	.agenda-filtro-painel .form-group {
		min-width: 100%;
	}

	#os_lista_cards {
		grid-template-columns: 1fr;
	}

	/* Kanban continua em linha (não empilha) — .agenda-kanban-board já tem
	   overflow-x:auto na regra base, então em telas pequenas as colunas
	   ficam lado a lado com rolagem horizontal, igual desktop. */

	#agenda_calendario {
		padding: 6px;
	}

	#agenda_calendario .fc-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	#agenda_calendario .fc-toolbar-chunk {
		display: flex;
		justify-content: center;
	}

	#agenda_calendario .fc-toolbar-title {
		font-size: 15px;
		text-align: center;
	}

	#agenda_calendario .fc-button {
		padding: 3px 7px;
		font-size: 11.5px;
	}

	#agenda_calendario .fc-daygrid-day-number {
		font-size: 11px;
	}

	#agenda_calendario .fc-list-event-title {
		font-size: 12.5px;
	}

	/* Visão Semana: 7 colunas de dia + eixo de horário não cabem na largura do
	   celular sem espremer tudo (texto/horário se sobrepondo). Forçamos uma
	   largura mínima na tabela da grade e deixamos a área rolar na horizontal.
	   Não dá pra usar a opção dayMinWidth do FullCalendar aqui — ela depende do
	   plugin premium @fullcalendar/scrollgrid, que não está incluído neste
	   projeto (plugins/fullcalendar/fullcalendar.min.js) e quebra com "Uncaught
	   Error: No ScrollGrid implementation". Esse scroll é puramente via CSS. */
	#agenda_calendario .fc-view-harness {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#agenda_calendario .fc-timeGridWeek-view .fc-scrollgrid {
		min-width: 1400px;
	}
}

/* css/style_add_novo.css tem um padrão de "tabela responsiva" (table/thead/tbody/
   th/td/tr virando display:block, thead escondido, cada tr virando um cartão com
   borda) pensado para outras telas do sistema, mas sem nenhum escopo — quebra a
   estrutura de tabela que o FullCalendar depende para desenhar Mês/Semana/Lista
   em telas <= 600px. Reverte pro comportamento padrão de tabela só aqui dentro. */
@media (max-width: 600px) {
	#agenda_calendario table,
	#agenda_calendario thead,
	#agenda_calendario tbody,
	#agenda_calendario th,
	#agenda_calendario td,
	#agenda_calendario tr {
		display: revert !important;
	}

	#agenda_calendario thead tr {
		display: revert !important;
	}

	#agenda_calendario tr {
		margin-bottom: 0 !important;
		border: 0 !important;
		padding: 0 !important;
	}

	#agenda_calendario td {
		border: 0 !important;
	}

	#agenda_calendario td::before {
		content: none !important;
	}
}