/* TratoCerto — Modelo 2 "Verde Campo"
   Cores e fontes do Manual da Marca. Visual plano: sem sombras. */

:root {
	--azul: #1A5276;          /* Azul Tecnologia (primária) */
	--verde: #27AE60;         /* Verde Campo (primária) */
	--verde-escuro: #1E8449;  /* verde para texto/botões com branco (contraste) */
	--amarelo: #E5B33D;       /* Amarelo Cereal — ração */
	--agua: #1ABC9C;          /* Verde Água — líquidos/soro */

	--fundo: #f1f6f2;
	--superficie: #ffffff;
	--superficie-suave: #f6faf7;
	--borda: #d6e2d9;
	--texto: #102a3a;
	--texto-suave: #4f6272;
	--erro: #b42318;

	--raio: 18px;
	--raio-pequeno: 12px;
	--fonte-titulo: 'Montserrat', system-ui, sans-serif;
	--fonte-texto: 'Open Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fundo);
	color: var(--texto);
	font-family: var(--fonte-texto);
	font-size: 15px;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

a { color: var(--azul); }
a:hover { color: #123b55; }

:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

/* ---------- Cabeçalho ---------- */

.tc-topo {
	background: var(--superficie);
	border-bottom: 4px solid var(--verde);
	padding: 0 16px;
}
.tc-topo__conteudo {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 12px 0;
}
/* área de respiro da logo (manual: altura do "O") */
.tc-topo__logo { display: block; padding: 6px; }
.tc-topo__logo img { display: block; height: 76px; width: auto; }

.tc-topo__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	font-family: var(--fonte-titulo);
	font-weight: 600;
}
.tc-topo__menu a {
	padding: 10px 12px;
	text-decoration: none;
	color: var(--texto-suave);
	border-radius: 10px;
}
.tc-topo__menu a[aria-current="page"] { color: var(--azul); font-weight: 700; }
.tc-topo__usuario {
	padding: 10px 12px;
	color: var(--texto);
	font-family: var(--fonte-texto);
	font-weight: 600;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tc-topo__menu .tc-topo__sair { border: 1px solid var(--borda); color: var(--azul); }

/* ---------- Página ---------- */

.tc-pagina {
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.tc-rodape {
	text-align: center;
	padding: 24px 16px 32px;
	color: var(--texto-suave);
	font-size: 13px;
}

.tc-titulo {
	margin: 0;
	font-family: var(--fonte-titulo);
	font-size: 26px;
	font-weight: 800;
	color: var(--azul);
	line-height: 1.2;
}
.tc-subtitulo {
	margin: 0;
	font-family: var(--fonte-titulo);
	font-size: 18px;
	font-weight: 700;
	color: var(--azul);
}
.tc-rotulo-secao {
	margin: 0;
	font-family: var(--fonte-titulo);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--texto-suave);
}
.tc-texto-suave { color: var(--texto-suave); margin: 0; }
.tc-dica { display: block; font-size: 13px; color: var(--texto-suave); }

.tc-cabecalho-pagina {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.tc-voltar {
	display: inline-block;
	margin-bottom: 4px;
	font-weight: 600;
	text-decoration: none;
	font-size: 14px;
}

/* Lateral + conteúdo: a lateral sobe para o topo no celular */
.tc-colunas {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}
.tc-colunas__lateral { flex: 1 1 250px; min-width: 0; }
.tc-colunas__principal {
	flex: 999 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ---------- Cartões ---------- */

.tc-cartao {
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: var(--raio);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.tc-cartao--suave { background: var(--superficie-suave); }
.tc-grade-cartoes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}

.tc-vazio { align-items: flex-start; max-width: 640px; }

.tc-destaque {
	background: var(--verde-escuro);
	color: #fff;
	border-radius: 20px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tc-destaque__rotulo {
	font-family: var(--fonte-titulo);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .8px;
	color: #d9f2e2;
}
.tc-destaque__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}
.tc-destaque__titulo {
	margin: 0;
	font-family: var(--fonte-titulo);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.1;
	word-break: break-all;
}
.tc-destaque__editar {
	margin-left: auto;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .55);
	color: #fff;
	font-family: var(--fonte-titulo);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.tc-destaque__editar:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.tc-destaque__rodape {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 16px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .35);
	font-weight: 600;
	font-size: 14px;
}

/* ---------- Status ---------- */

.tc-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
}
.tc-status::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}
.tc-status--online { color: var(--verde-escuro); }
.tc-status--offline { color: var(--erro); }
.tc-status--claro {
	color: var(--verde-escuro);
	background: #fff;
	padding: 3px 12px;
	border-radius: 999px;
}

/* ---------- Lista de alimentadores ---------- */

.tc-alimentador__topo { display: flex; align-items: center; gap: 12px; }
.tc-icone-editar {
	margin-left: auto;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 10px;
	border: 1px solid var(--borda);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--azul);
}
.tc-icone-editar:hover { border-color: var(--azul); }
.tc-alimentador__codigo {
	margin: 0;
	font-family: var(--fonte-titulo);
	font-size: 18px;
	font-weight: 700;
	word-break: break-all;
}
.tc-icone-alim {
	width: 44px;
	height: 44px;
	border-radius: var(--raio-pequeno);
	background: #e2edf4;
	color: var(--azul);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tc-alimentador__dados { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tc-alimentador__dados dt { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.tc-alimentador__dados dd { margin: 0; font-weight: 600; }

.tc-lista-alim { display: flex; flex-direction: column; gap: 10px; }
.tc-lista-alim__item {
	min-height: 64px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid var(--borda);
	background: var(--superficie);
	color: var(--texto);
	text-decoration: none;
}
.tc-lista-alim__item:hover { border-color: var(--azul); color: var(--texto); }
.tc-lista-alim__item.is-atual { border: 2px solid var(--azul); }
.tc-lista-alim__sigla {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #e2edf4;
	color: var(--azul);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fonte-titulo);
	font-weight: 700;
	flex-shrink: 0;
}
.is-atual .tc-lista-alim__sigla { background: var(--azul); color: #fff; }
.tc-lista-alim__texto { display: flex; flex-direction: column; min-width: 0; }
.tc-lista-alim__texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Saídas (motores / dosadores) ---------- */

.tc-saida { margin: 0; }
.tc-saida__titulo {
	float: left; /* faz o legend se comportar como bloco dentro do cartão */
	width: 100%;
	padding: 0;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--fonte-titulo);
}
.tc-saida__titulo strong { display: block; font-size: 16px; }
.tc-saida__titulo + * { clear: both; }

.tc-sigla {
	width: 44px;
	height: 44px;
	border-radius: var(--raio-pequeno);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fonte-titulo);
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
}
.tc-sigla--racao { background: #fbf0d3; color: #6b4b00; }
.tc-sigla--soro { background: #d4f2ec; color: #0b5e4e; }
.tc-sigla--wifi { background: #e2edf4; color: var(--azul); }

/* Campo numérico com botões − / + */
.tc-passo {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	border-radius: var(--raio-pequeno);
	background: var(--superficie-suave);
	border: 1px solid var(--borda);
}
.tc-passo input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	padding: 8px 4px;
	-moz-appearance: textfield;
}
.tc-passo input::-webkit-outer-spin-button,
.tc-passo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tc-passo__botao {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 10px;
	border: 1px solid var(--borda);
	background: var(--superficie);
	color: var(--texto);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.tc-passo__botao:hover { border-color: var(--azul); }

/* ---------- Formulários ---------- */

.tc-form { display: flex; flex-direction: column; gap: 16px; }
.tc-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tc-campo label,
.tc-rotulo-campo { font-weight: 700; font-size: 14px; }

/* Valor exibido, mas não editável (ex.: código do alimentador) */
.tc-somente-leitura {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border: 1px dashed #b9c9be;
	border-radius: var(--raio-pequeno);
	background: var(--superficie-suave);
	color: var(--texto-suave);
	font-weight: 700;
	letter-spacing: 1px;
	word-break: break-all;
}

.tc-campo input:not([type="checkbox"]),
.tc-campo select {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid #b9c9be;
	border-radius: var(--raio-pequeno);
	background: var(--superficie);
	color: var(--texto);
	font: inherit;
	font-size: 16px; /* evita zoom automático no iPhone */
}
.tc-campo .tc-passo input { border: 0; min-height: 44px; }
.tc-campo input:focus,
.tc-campo select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(26, 82, 118, .18); }

.tc-input-codigo { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

.tc-grade-campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
.tc-grade-campos--cidade { grid-template-columns: minmax(0, 1fr) 110px; }

.campo-erro { color: var(--erro); font-size: 13px; font-weight: 600; }
.campo-erro:empty { display: none; }
.tc-campo input[aria-invalid="true"] { border-color: var(--erro); }

.tc-senha { position: relative; }
.tc-senha input { padding-right: 96px !important; }
.tc-senha__ver {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	min-height: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--azul);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.tc-acoes-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

/* ---------- Botões ---------- */

.tc-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: var(--raio-pequeno);
	border: 0;
	font-family: var(--fonte-titulo);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
}
.tc-botao--primario { background: var(--azul); color: #fff; }
.tc-botao--primario:hover { background: #123b55; color: #fff; }
.tc-botao--verde { background: var(--verde-escuro); color: #fff; }
.tc-botao--verde:hover { background: #17693a; color: #fff; }
.tc-botao--secundario { background: var(--superficie); color: var(--azul); border: 1px solid var(--borda); }
.tc-botao--tracejado { background: transparent; color: var(--verde-escuro); border: 2px dashed #9cc9aa; }
.tc-botao--largo { width: 100%; }

/* ---------- Alertas ---------- */

.tc-alerta {
	padding: 12px 16px;
	border-radius: var(--raio-pequeno);
	font-weight: 600;
	font-size: 14px;
}
.tc-alerta--sucesso { background: #dff3e7; color: #14532d; }
.tc-alerta--erro { background: #fde2e1; color: #8c1d18; }
.tc-alerta--aviso { background: #fbf0d3; color: #5c4100; }

.tc-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

.tc-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tc-botoes-cartao { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-novo-agendamento { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.tc-botoes-cartao .tc-botao { flex: 1 1 140px; }

.tc-botao--pequeno { min-height: 40px; padding: 0 14px; font-size: 14px; }
.tc-botao--perigo { background: var(--superficie); color: var(--erro); border: 1px solid #f1c3bf; }
.tc-botao--perigo:hover { background: #fde2e1; color: #8c1d18; }

/* ---------- Abas do alimentador ---------- */

.tc-abas {
	display: flex;
	gap: 6px;
	padding: 6px;
	border-radius: 14px;
	background: #e3ece6;
	overflow-x: auto;
}
.tc-abas__item {
	flex: 1 0 auto;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 16px;
	border-radius: 10px;
	color: var(--texto-suave);
	font-family: var(--fonte-titulo);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.tc-abas__item:hover { color: var(--azul); }
.tc-abas__item[aria-current="page"] { background: var(--superficie); color: var(--azul); font-weight: 700; }

/* ---------- Agenda ---------- */

.tc-etiqueta {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: #eef2f5;
	color: var(--texto-suave);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.tc-etiqueta--verde { background: #dff3e7; color: #14532d; }
.tc-etiqueta--azul { background: var(--azul); color: #fff; }

.tc-sigla--pequena { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }

.tc-hoje { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tc-hoje__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #eef3ef;
}
.tc-hoje__item:last-child { border-bottom: 0; }
.tc-hoje__hora { width: 52px; font-family: var(--fonte-titulo); font-weight: 700; }
.tc-hoje__texto { flex: 1; font-weight: 600; }
.tc-hoje__item.is-passado { color: var(--texto-suave); }
.tc-hoje__item.is-passado .tc-hoje__texto { font-weight: 400; }
.tc-hoje__item.is-proximo { background: #eaf2f7; margin: 0 -10px; padding: 10px; border-radius: 10px; border-bottom: 0; }

.tc-regra.is-pausada { background: var(--superficie-suave); }
.tc-regra.is-pausada .tc-regra__quantidade,
.tc-regra.is-pausada .tc-horarios li { opacity: .65; }
.tc-regra__topo { display: flex; align-items: center; gap: 12px; }
.tc-regra__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tc-regra__nome h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 16px; }
.tc-regra__quantidade { color: var(--texto-suave); }
.tc-regra__quantidade strong { font-family: var(--fonte-titulo); font-size: 26px; color: var(--texto); }
.tc-regra__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tc-regra__acoes form { display: contents; }
.tc-regra__acoes .tc-botao { flex: 1 1 auto; min-height: 44px; padding: 0 14px; font-size: 14px; }

.tc-dias { display: flex; gap: 4px; margin-bottom: 4px; }
.tc-dias__dia {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	background: #eef2f5;
	color: #8a99a6;
}
.tc-dias__dia.is-ativo { background: var(--azul); color: #fff; }

.tc-horarios { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tc-horarios li {
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--superficie-suave);
	border: 1px solid var(--borda);
	font-family: var(--fonte-titulo);
	font-weight: 700;
	font-size: 14px;
}

.tc-tabela-rolagem { overflow-x: auto; }
.tc-tabela { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.tc-tabela th, .tc-tabela td { padding: 10px; text-align: left; border-bottom: 1px solid #eef3ef; white-space: nowrap; }
.tc-tabela thead th { font-size: 13px; color: var(--texto-suave); }
.tc-tabela .is-hoje { background: #eaf2f7; }

/* ---------- Painel ---------- */

.tc-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
}
.tc-kpi { gap: 8px; }
.tc-kpi__rotulo {
	margin: 0;
	font-family: var(--fonte-texto);
	font-size: 14px;
	font-weight: 600;
	color: var(--texto-suave);
}
.tc-kpi__valor {
	font-family: var(--fonte-titulo);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: normal; /* números grandes ficam com largura natural */
}
.tc-kpi__valor span { font-size: 16px; font-weight: 600; color: var(--texto-suave); }
.tc-kpi__valor--heroi { font-size: 52px; }
.tc-kpi__valor--heroi span { font-size: 22px; }
.tc-kpi__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* Situação: sempre ícone + texto, nunca só a cor */
.tc-situacao {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}
.tc-situacao > span[aria-hidden] {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: #fff;
	flex-shrink: 0;
}
.tc-situacao--ok { color: #14532d; }
.tc-situacao--ok > span[aria-hidden] { background: #1E8449; }
.tc-situacao--alerta { color: #7a4a00; }
.tc-situacao--alerta > span[aria-hidden] { background: #B54708; }
.tc-situacao--falha { color: #8c1d18; }
.tc-situacao--falha > span[aria-hidden] { background: #B42318; }

.tc-legenda {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 13px;
	color: var(--texto-suave);
}
.tc-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.tc-legenda__barra { width: 12px; height: 12px; border-radius: 3px; }
.tc-legenda__linha { width: 16px; height: 2px; background: var(--texto); }
.tc-legenda__alerta,
.tc-grafico .tc-alerta-dia {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #B54708;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Grade de conexões: 7 dias × 24 horas */
.tc-grade-conexoes {
	display: grid;
	grid-template-columns: 52px repeat(24, minmax(0, 1fr));
	gap: 2px;
	align-items: center;
}
.tc-grade-conexoes__hora { font-size: 11px; color: var(--texto-suave); text-align: left; }
.tc-grade-conexoes__dia { font-size: 12px; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.tc-hora {
	height: 22px;
	min-width: 8px;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
}
.tc-legenda .tc-hora { width: 16px; height: 16px; }
.tc-hora--ok { background: #27AE60; }
.tc-hora--falha { background: #B42318; }
.tc-hora--pendente { background: #fff; box-shadow: inset 0 0 0 1px #c5d2c9; }
.tc-hora--sem_dados { background: #eef2ef; }
.tc-grade-conexoes .tc-hora:hover { outline: 2px solid var(--texto); outline-offset: 1px; }

.tc-lista-ocorrencias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tc-lista-ocorrencias li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }

/* Gráficos */
.tc-grafico-bloco { display: flex; flex-direction: column; gap: 10px; }
.tc-grafico { position: relative; width: 100%; min-height: 250px; }
.tc-grafico svg { display: block; width: 100%; overflow: visible; }
.tc-grafico text { font-family: var(--fonte-texto); font-size: 11px; fill: var(--texto-suave); font-variant-numeric: tabular-nums; }
.tc-grafico .tc-grafico__valor { fill: var(--texto); font-weight: 700; font-size: 12px; }
.tc-grafico .tc-grafico__grade { stroke: #e3eae5; stroke-width: 1; }
.tc-grafico .tc-grafico__base { stroke: #b9c9be; stroke-width: 1; }
.tc-grafico .tc-grafico__programado { stroke: var(--texto); stroke-width: 2; stroke-linecap: round; }
.tc-grafico .tc-grafico__realce { fill: #eef3ef; opacity: 0; }
.tc-grafico .tc-grafico__dia:hover .tc-grafico__realce,
.tc-grafico .tc-grafico__dia:focus .tc-grafico__realce { opacity: 1; }
.tc-grafico .tc-grafico__dia { outline: none; cursor: default; }
.tc-grafico .tc-grafico__dia:focus-visible .tc-grafico__realce { opacity: 1; stroke: var(--verde); stroke-width: 2; }

.tc-dados-grafico summary { cursor: pointer; font-weight: 600; color: var(--azul); font-size: 14px; min-height: 32px; }
.tc-dados-grafico[open] summary { margin-bottom: 8px; }

.tc-tabela__quebra { white-space: normal !important; min-width: 200px; }

/* Abas das portas do alimentador */
.tc-portas { gap: 16px; }
.tc-abas--portas { padding: 6px; }
.tc-abas--portas .tc-aba-porta {
	flex: 1 0 auto;
	justify-content: flex-start;
	min-height: 56px;
	gap: 10px;
	padding: 6px 12px;
}
.tc-aba-porta__texto { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.tc-aba-porta__texto strong { font-size: 15px; }
.tc-aba-porta__texto span {
	font-family: var(--fonte-texto);
	font-size: 12px;
	font-weight: 600;
	color: var(--texto-suave);
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tc-porta { display: flex; flex-direction: column; gap: 16px; }
.tc-subtitulo--menor { font-size: 16px; }
.tc-agenda-porta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.tc-agenda-porta .tc-rotulo-secao { width: 100%; }
.tc-agenda-porta a { font-weight: 700; }

.tc-tabela--saidas td, .tc-tabela--saidas th { vertical-align: middle; }
a.tc-saida-nome { color: var(--texto); text-decoration: none; }
a.tc-saida-nome:hover strong, a.tc-saida-nome:hover { color: var(--azul); }
.tc-tabela--saidas .tc-dica { display: block; }
.tc-tabela--saidas tr.is-vazia td,
.tc-tabela--saidas tr.is-vazia th { background: var(--superficie-suave); }
.tc-saida-nome { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.tc-alinhar-inicio { align-self: flex-start; }

/* Dica flutuante (gráficos e grade de conexões) */
.tc-dica-flutuante {
	position: fixed;
	z-index: 50;
	pointer-events: none;
	max-width: 260px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #102a3a;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	box-shadow: 0 4px 16px rgba(16, 42, 58, .25);
}
.tc-dica-flutuante[hidden] { display: none; }
.tc-dica-flutuante__titulo { font-weight: 700; margin-bottom: 4px; }
.tc-dica-flutuante__linha { display: flex; align-items: center; gap: 8px; }
.tc-dica-flutuante__chave { width: 12px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.tc-dica-flutuante__linha strong { font-variant-numeric: tabular-nums; }
.tc-dica-flutuante__linha span:last-child { color: #c9d6de; }

/* ---------- Formulário de agendamento ---------- */

.tc-opcoes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
}
.tc-opcao { position: relative; cursor: pointer; }
.tc-opcao input { position: absolute; opacity: 0; }
.tc-opcao__caixa {
	min-height: 64px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--borda);
	border-radius: 14px;
	background: var(--superficie);
}
.tc-opcao__caixa strong { display: block; font-family: var(--fonte-titulo); }
.tc-opcao input:checked + .tc-opcao__caixa { border: 2px solid var(--azul); background: #f2f7fa; }
.tc-opcao input:focus-visible + .tc-opcao__caixa { outline: 3px solid var(--verde); outline-offset: 2px; }

.tc-campo--curto { max-width: 280px; }
.tc-com-unidade { position: relative; }
.tc-com-unidade input { padding-right: 56px !important; font-weight: 700; font-size: 18px !important; }
.tc-com-unidade__unidade {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--fonte-titulo);
	font-weight: 700;
	color: var(--texto-suave);
}

.tc-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-dias-escolha { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-dia { position: relative; cursor: pointer; }
.tc-dia input { position: absolute; opacity: 0; }
.tc-dia span {
	min-width: 56px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border-radius: 12px;
	border: 1px solid var(--borda);
	background: var(--superficie);
	font-family: var(--fonte-titulo);
	font-weight: 700;
	color: var(--texto-suave);
}
.tc-dia input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.tc-dia input:focus-visible + span { outline: 3px solid var(--verde); outline-offset: 2px; }

.tc-lista-horarios {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px;
}
.tc-lista-horarios__item { display: flex; align-items: center; gap: 6px; }
.tc-lista-horarios__item input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 8px 12px;
	border: 1px solid #b9c9be;
	border-radius: var(--raio-pequeno);
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	color: var(--texto);
}

.tc-resumo {
	padding: 14px 16px;
	border-radius: var(--raio-pequeno);
	background: #eaf2f7;
	border: 1px solid #c9dbe8;
}
.tc-resumo p { margin: 4px 0 0; font-weight: 600; color: var(--azul); }

/* ---------- Login / cadastro ---------- */

.tc-acesso {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	padding: 24px 16px;
}
.tc-acesso__caixa {
	width: 100%;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tc-acesso__logo { align-self: center; display: block; padding: 10px; }
.tc-acesso__logo img { display: block; height: 150px; width: auto; max-width: 100%; }
.tc-acesso .tc-cartao { padding: 24px; }
.tc-acesso__rodape { text-align: center; margin: 0; }
.tc-acesso__rodape a { font-weight: 700; color: var(--verde-escuro); }

@media (max-width: 480px) {
	.tc-topo__logo img { height: 60px; }
	.tc-topo__usuario { display: none; }
	.tc-titulo { font-size: 22px; }
	.tc-destaque__titulo { font-size: 28px; }
	.tc-acesso__logo img { height: 120px; }
	.tc-acoes-form .tc-botao { flex: 1; }
}

/* Descadastrar alimentador (zona de perigo, no fim de Parâmetros) */
.tc-perigo { border: 1px solid #f1c3bf; gap: 12px; }
.tc-perigo .tc-subtitulo { color: var(--erro); }
/* Campo DELETE e botão na mesma linha; no celular o botão desce */
.tc-perigo__linha { display: flex; flex-wrap: wrap; gap: 12px; }
.tc-perigo__linha input { flex: 0 1 280px; min-width: 0; }
.tc-perigo__linha .tc-botao { flex: 0 0 auto; }
@media (max-width: 520px) {
	.tc-perigo__linha input, .tc-perigo__linha .tc-botao { flex: 1 1 100%; }
}
.tc-botao--perigo-forte { background: var(--erro); color: #fff; border: 1px solid var(--erro); }
.tc-botao--perigo-forte:hover { background: #8c1d18; border-color: #8c1d18; }
.tc-botao--perigo-forte:disabled { background: #f3c9c5; border-color: #f3c9c5; color: #fff; cursor: not-allowed; }

/* ---------- Administração ---------- */

/* Faixa fixa durante a simulação de acesso */
.tc-simulacao {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #7a4a00;
	color: #fff;
	padding: 8px 16px;
}
.tc-simulacao__conteudo {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	font-size: 14px;
}
.tc-simulacao .tc-botao { background: #fff; color: #7a4a00; border: 0; }
.tc-simulacao .tc-botao:hover { background: #fdf0d8; }

.tc-abas--admin { margin-bottom: 4px; }
.tc-abas--admin .tc-abas__item { flex: 0 0 auto; padding: 0 16px; }

.tc-kpi--link { text-decoration: none; color: inherit; }
.tc-kpi--link:hover { border-color: var(--azul); }

/* Filtros (GET) acima das tabelas */
.tc-filtros { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tc-filtros .tc-campo { flex: 1 1 200px; }

.tc-dados { margin: 0; display: grid; gap: 10px; }
.tc-dados div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.tc-dados dt { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.tc-dados dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.tc-botoes-acao { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-form-inline { display: inline; margin: 0; }

.tc-lista-atencao { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tc-lista-atencao > li { padding: 12px 0; border-bottom: 1px solid #eef3ef; }
.tc-lista-atencao > li:last-child { border-bottom: 0; }
.tc-lista-atencao__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.tc-lista-atencao__alertas { margin: 6px 0 0; padding-left: 20px; font-size: 14px; }

.tc-situacao--neutra { color: var(--texto-suave); }
.tc-situacao--neutra > span[aria-hidden] { background: #8a99a6; }

@media (max-width: 520px) {
	.tc-dados div { grid-template-columns: 1fr; gap: 2px; }
}

/* Blocos de código (JSON e SQL no admin) */
.tc-codigo {
	margin: 0;
	padding: 14px 16px;
	max-height: 520px;
	overflow: auto;
	background: #0f2433;
	color: #e6f0f5;
	border-radius: var(--raio-pequeno);
	font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
	white-space: pre;
	tab-size: 2;
}
.tc-bloco-sql { display: flex; flex-direction: column; gap: 8px; }
.tc-bloco-sql + .tc-bloco-sql { padding-top: 12px; border-top: 1px solid #eef3ef; }
.tc-lista-campos { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }

/* Caixa de seleção com texto ao lado (ex.: firmware obrigatório) */
.tc-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.tc-check input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--verde-escuro); }