/* SANY Portal — moldura e componentes do núcleo. */

:root {
	--sp-primaria: #c8102e;
	--sp-primaria-escura: #9e0c24;
	--sp-primaria-clara: #fde8eb;
	--sp-tinta: #1d232b;
	--sp-tinta-2: #4a5462;
	--sp-mudo: #6b7684;
	--sp-borda: #dfe3e8;
	--sp-borda-forte: #c5ccd4;
	--sp-fundo: #f3f5f7;
	--sp-superficie: #ffffff;
	--sp-lateral: #161b21;
	--sp-lateral-2: #222a33;
	--sp-lateral-texto: #c3cad3;
	--sp-ok: #137a3a;
	--sp-ok-fundo: #e5f4ea;
	--sp-aviso: #8a5a00;
	--sp-aviso-fundo: #fff4d6;
	--sp-perigo: #b3261e;
	--sp-perigo-fundo: #fdecea;
	--sp-info: #1f5fa8;
	--sp-info-fundo: #e8f0fb;
	--sp-raio: 8px;
	--sp-sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
	--sp-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--sp-lateral-largura: 248px;
	--sp-topo-altura: 60px;
}

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

html { -webkit-text-size-adjust: 100%; }

body.sp-corpo {
	margin: 0;
	background: var(--sp-fundo);
	color: var(--sp-tinta);
	font: 14px/1.5 var(--sp-fonte);
	min-height: 100vh;
}

.sp-corpo a { color: var(--sp-primaria); }
.sp-corpo a:hover { color: var(--sp-primaria-escura); }
.sp-corpo :focus-visible { outline: 2px solid var(--sp-primaria); outline-offset: 2px; }

.sp-pular {
	position: absolute; left: -9999px; top: 8px; z-index: 1000;
	background: var(--sp-superficie); padding: 8px 12px; border-radius: var(--sp-raio);
}
.sp-pular:focus { left: 8px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

/* ------------------------------------------------------------------ estrutura */

.sp-app { display: flex; min-height: 100vh; }

.sp-lateral {
	position: fixed; inset: 0 auto 0 0; width: var(--sp-lateral-largura);
	background: var(--sp-lateral); color: var(--sp-lateral-texto);
	display: flex; flex-direction: column; z-index: 50; overflow-y: auto;
}

.sp-principal { flex: 1; margin-left: var(--sp-lateral-largura); min-width: 0; display: flex; flex-direction: column; }

.sp-marca {
	display: flex; align-items: center; gap: 10px; padding: 16px 18px;
	text-decoration: none; color: #fff !important; border-bottom: 1px solid rgba(255, 255, 255, .06);
	min-height: var(--sp-topo-altura);
}
.sp-marca img { max-height: 30px; max-width: 120px; }
.sp-marca-simbolo {
	display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px;
	background: var(--sp-primaria); color: #fff; font-weight: 800; font-size: 17px;
}
.sp-marca-nome { font-weight: 650; font-size: 15px; letter-spacing: .2px; }

.sp-nav { padding: 10px 0 24px; flex: 1; }
.sp-nav-grupo { margin: 2px 0; }
.sp-nav-lista { list-style: none; margin: 0; padding: 0; }
.sp-nav-grupo:not(.sp-aberto) > .sp-nav-lista:not(.sp-nav-inicio) { display: none; }

.sp-nav a, .sp-nav-titulo {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 8px 18px; color: var(--sp-lateral-texto); text-decoration: none;
	background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.sp-nav a:hover, .sp-nav-titulo:hover { background: var(--sp-lateral-2); color: #fff; }
.sp-nav-lista:not(.sp-nav-inicio) a { padding-left: 46px; font-size: 13.5px; }
.sp-nav a.sp-ativo { background: rgba(200, 16, 46, .18); color: #fff; box-shadow: inset 3px 0 0 var(--sp-primaria); }
.sp-nav-titulo span { flex: 1; }
.sp-nav .sp-ico, .sp-nav-titulo .sp-ico { width: 18px; height: 18px; flex: none; }
.sp-ico, .sp-seta, .sp-topo svg {
	fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.sp-seta { width: 14px; height: 14px; transition: transform .15s; }
.sp-aberto > .sp-nav-titulo .sp-seta { transform: rotate(90deg); }
.sp-nav-inicio a span { flex: 1; }

.sp-contador {
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11.5px; font-weight: 700;
	background: var(--sp-lateral-2); color: #fff; display: inline-grid; place-items: center;
}
.sp-contador.sp-critico { background: var(--sp-primaria); }

.sp-lateral-rodape {
	padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 12px;
	display: flex; justify-content: space-between; gap: 8px; color: #8a94a1;
}
.sp-lateral-rodape a { color: #aeb7c2 !important; text-decoration: none; }

/* ------------------------------------------------------------------ topo */

.sp-topo {
	position: sticky; top: 0; z-index: 40; height: var(--sp-topo-altura);
	display: flex; align-items: center; gap: 14px; padding: 0 24px;
	background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--sp-borda);
	backdrop-filter: saturate(1.2) blur(6px);
}
.sp-menu-btn {
	display: none; background: none; border: 0; padding: 6px; border-radius: 6px; color: var(--sp-tinta); cursor: pointer;
}
.sp-menu-btn svg { width: 22px; height: 22px; }

.sp-busca { flex: 1; max-width: 560px; position: relative; }
.sp-busca svg { position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--sp-mudo); }
.sp-busca input, .sp-corpo .sp-busca input[type="search"] {
	width: 100%; height: 38px; border: 1px solid var(--sp-borda); border-radius: 19px; background: var(--sp-fundo);
	padding: 0 14px 0 36px; font: inherit; color: var(--sp-tinta);
}
.sp-busca input:focus { background: #fff; border-color: var(--sp-borda-forte); outline: none; box-shadow: 0 0 0 3px rgba(200, 16, 46, .12); }

.sp-conexoes { display: flex; gap: 6px; position: relative; margin-left: auto; }
.sp-conexao {
	display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 15px;
	border: 1px solid var(--sp-borda); background: #fff; font: 600 12px/1 var(--sp-fonte); color: var(--sp-tinta-2); cursor: pointer;
}
.sp-conexao i { width: 8px; height: 8px; border-radius: 50%; background: #b9c1cb; }
.sp-conexao[data-estado="ok"] i { background: #1f9d55; }
.sp-conexao[data-estado="aviso"] i { background: #e0a100; }
.sp-conexao[data-estado="erro"] i { background: var(--sp-primaria); }
.sp-conexao[data-necessaria="1"] { border-color: var(--sp-borda-forte); }
.sp-conexao-painel {
	position: absolute; right: 0; top: 40px; width: 340px; background: #fff; border: 1px solid var(--sp-borda);
	border-radius: var(--sp-raio); box-shadow: 0 10px 30px rgba(16, 24, 40, .14); padding: 14px; font-size: 13px; z-index: 60;
}
.sp-conexao-painel h3 { margin: 0 0 6px; font-size: 14px; }
.sp-conexao-painel p { margin: 4px 0 10px; color: var(--sp-tinta-2); }

.sp-sino { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--sp-tinta-2) !important; }
.sp-sino:hover { background: var(--sp-fundo); }
.sp-sino svg { width: 21px; height: 21px; }
.sp-sino b {
	position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--sp-tinta-2); color: #fff; font-size: 11px; display: grid; place-items: center;
}
.sp-sino.sp-critico b { background: var(--sp-primaria); }

.sp-usuario { position: relative; }
.sp-usuario summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px; border-radius: 20px; }
.sp-usuario summary::-webkit-details-marker { display: none; }
.sp-usuario summary:hover { background: var(--sp-fundo); }
.sp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sp-tinta); color: #fff; display: grid; place-items: center; font-weight: 700; }
.sp-usuario-nome { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sp-usuario-menu {
	position: absolute; right: 0; top: 44px; background: #fff; border: 1px solid var(--sp-borda); border-radius: var(--sp-raio);
	box-shadow: 0 10px 30px rgba(16, 24, 40, .14); min-width: 180px; padding: 6px; z-index: 60;
}
.sp-usuario-menu a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--sp-tinta) !important; text-decoration: none; }
.sp-usuario-menu a:hover { background: var(--sp-fundo); }

/* ------------------------------------------------------------------ conteúdo */

.sp-conteudo { padding: 24px 28px 48px; width: 100%; max-width: 1240px; outline: none; }
.sp-largo .sp-conteudo { max-width: none; }
.sp-cabecalho { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-cabecalho h1 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px; }

.sp-saudacao { font-size: 16px; color: var(--sp-tinta-2); margin: -6px 0 18px; }
.sp-ajuda { color: var(--sp-tinta-2); max-width: 820px; margin: 0 0 16px; }
.sp-mudo { color: var(--sp-mudo); }
.sp-nota { color: var(--sp-mudo); font-size: 12.5px; margin: 8px 0; }
.sp-pre { white-space: pre-wrap; font: 12px/1.45 var(--sp-mono); max-width: 520px; margin: 6px 0 0; }
.sp-codigo { font-family: var(--sp-mono); }
code.sp-codigo { background: var(--sp-fundo); padding: 2px 6px; border-radius: 4px; font-size: 14px; }

.sp-secao { margin: 0 0 28px; }
.sp-secao > h2, .sp-secao-topo h2, .sp-pagina > h2 { font-size: 16px; margin: 0 0 12px; font-weight: 650; }
.sp-secao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sp-secao-topo a { font-size: 13px; }
.sp-subtitulo { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--sp-mudo); margin: 18px 0 8px; }

.sp-aviso {
	border-radius: var(--sp-raio); padding: 10px 14px; margin: 0 0 14px; border: 1px solid transparent;
	background: var(--sp-info-fundo); color: #183c66;
}
.sp-aviso-ok { background: var(--sp-ok-fundo); color: #0e4f26; border-color: #bfe3cb; }
.sp-aviso-erro { background: var(--sp-perigo-fundo); color: #7a1a14; border-color: #f4c6c2; }
.sp-aviso-aviso { background: var(--sp-aviso-fundo); color: #5c3c00; border-color: #f2dc9b; }
.sp-aviso ul { margin: 6px 0; padding-left: 18px; }

.sp-vazio {
	background: var(--sp-superficie); border: 1px dashed var(--sp-borda-forte); border-radius: var(--sp-raio);
	padding: 28px; text-align: center; color: var(--sp-tinta-2);
}
.sp-vazio h2 { margin: 0 0 6px; font-size: 18px; color: var(--sp-tinta); }
.sp-vazio p { margin: 0; }
.sp-vazio-ok { border-style: solid; border-color: #cfe9d8; background: #f6fbf8; }

/* blocos */
.sp-bloco {
	background: var(--sp-superficie); border: 1px solid var(--sp-borda); border-radius: var(--sp-raio);
	padding: 16px 18px; margin: 0 0 16px; box-shadow: var(--sp-sombra); min-width: 0;
}
.sp-bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sp-bloco-topo h2 { margin: 0; font-size: 15px; font-weight: 650; }
.sp-contagem { background: var(--sp-fundo); border-radius: 10px; padding: 1px 8px; font-size: 12px; color: var(--sp-tinta-2); font-weight: 600; }
.sp-blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.sp-blocos .sp-bloco { margin: 0; }
.sp-bloco-largo { grid-column: 1 / -1; }
.sp-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.sp-colunas > .sp-bloco, .sp-colunas > form.sp-bloco { margin: 0; }

.sp-kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; margin: 0; }
.sp-kv dt { color: var(--sp-mudo); }
.sp-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.sp-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sp-ficha-cabecalho .sp-acoes { margin-top: 0; }

/* fichas */
.sp-ficha-cabecalho {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	background: var(--sp-superficie); border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); padding: 16px 18px; margin-bottom: 16px;
}
.sp-rotulo { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--sp-mudo); }
.sp-ficha-id { display: block; font-size: 24px; font-weight: 700; letter-spacing: .2px; }
.sp-ficha-desc { display: block; color: var(--sp-tinta-2); margin-top: 2px; }
.sp-bloco-sis .sp-sis-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sp-bloco-sis .sp-sis-imgs img { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--sp-borda); border-radius: 6px; background: #fff; }

/* etapas do pedido */
.sp-etapas {
	list-style: none; margin: 0 0 18px; padding: 16px 18px; display: grid; grid-template-columns: repeat(7, 1fr);
	background: var(--sp-superficie); border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); gap: 6px; counter-reset: etapa;
}
.sp-etapa { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 12.5px; }
.sp-etapa::before {
	content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--sp-borda); z-index: 0;
}
.sp-etapa:first-child::before { display: none; }
.sp-etapa-ponto { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--sp-borda-forte); }
.sp-etapa-ok .sp-etapa-ponto { background: var(--sp-ok); border-color: var(--sp-ok); }
.sp-etapa-alerta .sp-etapa-ponto { background: #e0a100; border-color: #e0a100; }
.sp-etapa-erro .sp-etapa-ponto { background: var(--sp-primaria); border-color: var(--sp-primaria); }
.sp-etapa-ok::before, .sp-etapa-alerta::before, .sp-etapa-erro::before { background: var(--sp-ok); }
.sp-etapa-nome { font-weight: 600; }
.sp-etapa-quando { color: var(--sp-mudo); font-size: 11.5px; }

.sp-tempo { list-style: none; margin: 0; padding: 0; }
.sp-tempo-item { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sp-borda); }
.sp-tempo-item:first-child { border-top: 0; }
.sp-tempo-item time { color: var(--sp-mudo); font-size: 12.5px; }
.sp-tempo-item strong { display: block; }
.sp-tempo-item p { margin: 2px 0 0; color: var(--sp-tinta-2); }
.sp-tempo-etapa { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--sp-mudo); }
.sp-tempo-alerta strong { color: var(--sp-aviso); }
.sp-tempo-erro strong { color: var(--sp-perigo); }

/* pendências */
.sp-pendencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-pend a {
	display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--sp-superficie);
	border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); color: var(--sp-tinta) !important; text-decoration: none;
	border-left: 4px solid var(--sp-borda-forte);
}
.sp-pend a:hover { border-color: var(--sp-borda-forte); box-shadow: var(--sp-sombra); }
.sp-pend-critico a { border-left-color: var(--sp-primaria); }
.sp-pend-aviso a { border-left-color: #e0a100; }
.sp-pend-info a { border-left-color: var(--sp-info); }
.sp-pend-n { font-size: 20px; min-width: 42px; text-align: right; }
.sp-pend-txt { flex: 1; display: flex; flex-direction: column; }
.sp-pend-titulo { font-weight: 600; }
.sp-pend-mod { font-size: 12.5px; color: var(--sp-mudo); }

/* atalhos e KPIs */
.sp-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sp-atalho { background: var(--sp-superficie); border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); padding: 14px 16px; }
.sp-atalho-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sp-atalho-topo .sp-ico { width: 20px; height: 20px; color: var(--sp-primaria); }
.sp-atalho h3 { margin: 0; font-size: 14px; }
.sp-atalho ul { list-style: none; margin: 0; padding: 0; }
.sp-atalho li { padding: 3px 0; }
.sp-atalho a { text-decoration: none; }

.sp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sp-kpi { background: var(--sp-superficie); border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; height: 100%; }
.sp-kpi-link { text-decoration: none; color: inherit !important; }
.sp-kpi-link:hover .sp-kpi { border-color: var(--sp-borda-forte); box-shadow: var(--sp-sombra); }
.sp-kpi-rotulo { color: var(--sp-tinta-2); font-size: 12.5px; }
.sp-kpi-valor { font-size: 24px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.sp-kpi-nota { color: var(--sp-mudo); font-size: 12px; }
.sp-kpi-alerta { border-color: #f2c4ca; background: #fff8f9; }
.sp-kpi-alerta .sp-kpi-valor { color: var(--sp-primaria-escura); }

.sp-barras { background: var(--sp-superficie); border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); padding: 14px 16px; margin: 0 0 14px; }
.sp-barras figcaption { font-weight: 600; margin-bottom: 10px; }
.sp-barras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-barras li { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 70px; gap: 10px; align-items: center; font-size: 13px; }
.sp-barra-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-barra-trilho { height: 10px; background: var(--sp-fundo); border-radius: 5px; overflow: hidden; }
.sp-barra { display: block; height: 100%; background: var(--sp-primaria); border-radius: 5px; }
.sp-barra-valor { text-align: right; font-variant-numeric: tabular-nums; }

/* resultados */
.sp-resultados { list-style: none; margin: 0; padding: 0; background: var(--sp-superficie); border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); }
.sp-resultados li + li { border-top: 1px solid var(--sp-borda); }
.sp-resultados a { display: flex; flex-direction: column; padding: 10px 14px; text-decoration: none; color: var(--sp-tinta) !important; }
.sp-resultados a:hover { background: #fafbfc; }
.sp-res-rotulo { font-weight: 600; }
.sp-res-detalhe { color: var(--sp-mudo); font-size: 12.5px; }

/* tabelas */
.sp-tabela-wrap { overflow-x: auto; border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); background: var(--sp-superficie); }
.sp-bloco .sp-tabela-wrap { border-radius: 6px; }
.sp-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-tabela th, .sp-tabela td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sp-borda); }
.sp-tabela thead th { background: #f8f9fb; font-weight: 600; color: var(--sp-tinta-2); white-space: nowrap; position: sticky; top: 0; }
.sp-tabela tbody tr:last-child td, .sp-tabela tbody tr:last-child th { border-bottom: 0; }
.sp-tabela tbody tr:hover td { background: #fbfcfd; }
.sp-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-tabela-compacta th, .sp-tabela-compacta td { padding: 6px 10px; }

.sp-matriz-wrap { max-height: 75vh; }
.sp-matriz td { text-align: center; }
.sp-matriz .sp-matriz-acao { text-align: left; font-weight: 400; min-width: 260px; position: sticky; left: 0; background: #fff; }
.sp-matriz thead .sp-matriz-acao { background: #f8f9fb; }
.sp-matriz-perfil span { display: inline-block; max-width: 110px; white-space: normal; }
.sp-matriz-grupo th { background: #f1f3f6 !important; text-transform: uppercase; font-size: 12px; letter-spacing: .4px; color: var(--sp-tinta-2); }
.sp-matriz-escopo th, .sp-matriz-escopo td { background: #fbfbfc; }
.sp-matriz-escopo select { font-size: 12px; }

.sp-chaves { display: flex; flex-wrap: wrap; gap: 4px; }
td.sp-chaves { display: table-cell; }
td.sp-chaves .sp-chave { margin: 1px 2px 1px 0; }
.sp-chave { background: var(--sp-fundo); border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.sp-chave b { font-weight: 600; color: var(--sp-tinta-2); margin-right: 2px; }

.sp-lista-simples { list-style: none; margin: 0; padding: 0; }
.sp-lista-simples li { padding: 6px 0; border-top: 1px solid var(--sp-borda); }
.sp-lista-simples li:first-child { border-top: 0; }
.sp-lista-simples time { color: var(--sp-mudo); margin-right: 6px; font-size: 12.5px; }

.sp-saude { list-style: none; margin: 0; padding: 0; }
.sp-saude li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--sp-borda); }
.sp-saude li:first-child { border-top: 0; }
.sp-saude li strong { text-align: right; font-weight: 600; }
.sp-saude .sp-alerta strong { color: var(--sp-aviso); }
.sp-saude .sp-ok strong { color: var(--sp-ok); }

/* selos */
.sp-selo {
	display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; line-height: 18px;
	background: #eef0f3; color: var(--sp-tinta-2); white-space: nowrap;
}
.sp-selo-ok { background: var(--sp-ok-fundo); color: var(--sp-ok); }
.sp-selo-aviso { background: var(--sp-aviso-fundo); color: var(--sp-aviso); }
.sp-selo-perigo, .sp-selo-erro { background: var(--sp-perigo-fundo); color: var(--sp-perigo); }
.sp-selo-info { background: var(--sp-info-fundo); color: var(--sp-info); }

/* abas e filtros */
.sp-barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; }
.sp-abas { display: inline-flex; background: #e9ecf0; border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.sp-abas a { padding: 5px 12px; border-radius: 6px; text-decoration: none; color: var(--sp-tinta-2) !important; font-weight: 600; font-size: 13px; }
.sp-abas a.ativa { background: #fff; color: var(--sp-tinta) !important; box-shadow: var(--sp-sombra); }
.sp-paginacao { margin-top: 12px; display: flex; gap: 4px; flex-wrap: wrap; }
.sp-paginacao .page-numbers { padding: 4px 10px; border: 1px solid var(--sp-borda); border-radius: 6px; background: #fff; text-decoration: none; }
.sp-paginacao .current { background: var(--sp-tinta); color: #fff; border-color: var(--sp-tinta); }

/* formulários */
.sp-form label { display: block; margin: 0 0 12px; font-weight: 600; font-size: 13px; color: var(--sp-tinta-2); }
.sp-form label > input:not([type="checkbox"]):not([type="radio"]),
.sp-form label > select, .sp-form label > textarea {
	display: block; width: 100%; margin-top: 4px; font-weight: 400;
}
.sp-corpo input[type="text"], .sp-corpo input[type="search"], .sp-corpo input[type="email"], .sp-corpo input[type="url"],
.sp-corpo input[type="password"], .sp-corpo input[type="number"], .sp-corpo input[type="date"], .sp-corpo select, .sp-corpo textarea {
	border: 1px solid var(--sp-borda-forte); border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 14px; color: var(--sp-tinta);
	background: #fff; min-height: 36px; max-width: 100%;
}
.sp-corpo textarea { min-height: 72px; }
.sp-corpo input:focus, .sp-corpo select:focus, .sp-corpo textarea:focus { border-color: var(--sp-primaria); outline: none; box-shadow: 0 0 0 3px rgba(200, 16, 46, .12); }
.sp-form fieldset { border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); padding: 12px 14px; margin: 0 0 14px; }
.sp-form fieldset legend { font-weight: 650; padding: 0 6px; }
.sp-form fieldset[disabled] { opacity: .7; }
.sp-check { display: flex !important; align-items: flex-start; gap: 8px; font-weight: 400 !important; color: var(--sp-tinta) !important; }
.sp-check input { margin-top: 3px; }
.sp-destaque { background: var(--sp-fundo); padding: 10px 12px; border-radius: 6px; }
.sp-form-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-form-linha label { margin: 0; }
.sp-form-grande { align-items: flex-end; background: var(--sp-superficie); border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); padding: 18px; margin-bottom: 14px; max-width: 720px; }
.sp-form-grande label { flex: 1; min-width: 240px; }
.sp-form-grande input { font-size: 16px !important; min-height: 42px !important; }
.sp-grade-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 12px; }
.sp-grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 16px; }
.sp-lista-checks { max-height: 240px; overflow-y: auto; border: 1px solid var(--sp-borda); border-radius: 6px; padding: 8px 10px; margin-top: 6px; }
.sp-filtro-lista { width: 100%; margin-top: 4px; }
.sp-escopo { min-width: 0; }
.sp-barra-salvar { position: sticky; bottom: 0; background: linear-gradient(to top, var(--sp-fundo) 70%, rgba(243, 245, 247, 0)); padding: 14px 0; z-index: 5; }
.sp-regras { margin: 0 0 14px; padding-left: 18px; color: var(--sp-tinta-2); font-size: 12.5px; }
.sp-forca { height: 6px; border-radius: 3px; background: var(--sp-fundo); margin: -6px 0 12px; overflow: hidden; }
.sp-forca span { display: block; height: 100%; width: 0; background: var(--sp-primaria); transition: width .2s; }
.sp-forca[data-nivel="2"] span { background: #e0a100; }
.sp-forca[data-nivel="3"] span, .sp-forca[data-nivel="4"] span { background: var(--sp-ok); }
.sp-form-linha input[type="text"] { min-width: 220px; }

/* botões */
.sp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px;
	border-radius: 6px; border: 1px solid var(--sp-borda-forte); background: #fff; color: var(--sp-tinta) !important;
	font: 600 13.5px/1 var(--sp-fonte); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.sp-btn:hover { background: #f7f8fa; }
.sp-btn-primario { background: var(--sp-primaria); border-color: var(--sp-primaria); color: #fff !important; }
.sp-btn-primario:hover { background: var(--sp-primaria-escura); border-color: var(--sp-primaria-escura); }
.sp-btn-perigo { color: var(--sp-perigo) !important; border-color: #efb5b0; }
.sp-btn-perigo:hover { background: var(--sp-perigo-fundo); }
.sp-btn-bloco { width: 100%; min-height: 42px; font-size: 15px; }
.sp-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* telas públicas (login) */
.sp-publico { display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 10% -10%, #fbe3e7 0, transparent 60%), var(--sp-fundo); }
.sp-cartao-login {
	width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--sp-borda); border-radius: 12px;
	box-shadow: 0 20px 50px rgba(16, 24, 40, .1); padding: 28px 28px 22px;
}
.sp-marca-login { padding: 0 0 18px; min-height: 0; border: 0; color: var(--sp-tinta) !important; }
.sp-marca-login .sp-marca-nome { color: var(--sp-tinta); }
.sp-cartao-login h1 { font-size: 20px; margin: 0 0 16px; }
.sp-login-rodape { text-align: center; margin: 14px 0 0; font-size: 13px; }

/* menu no celular */
@media (max-width: 960px) {
	.sp-lateral { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
	.sp-menu-aberto .sp-lateral { transform: none; }
	.sp-principal { margin-left: 0; }
	.sp-menu-btn { display: inline-grid; }
	.sp-fundo-menu { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 45; }
	.sp-topo { padding: 0 12px; gap: 8px; }
	.sp-usuario-nome { display: none; }
	.sp-conteudo { padding: 18px 14px 40px; }
	.sp-blocos { grid-template-columns: 1fr; }
	.sp-etapas { grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
	.sp-etapa::before { display: none; }
}
@media (max-width: 640px) {
	.sp-conexoes { display: none; }
	.sp-busca input { font-size: 16px; }
	.sp-kv { grid-template-columns: 1fr; }
	.sp-tempo-item { grid-template-columns: 1fr; gap: 2px; }
	.sp-barras li { grid-template-columns: 1fr 60px; }
	.sp-barra-trilho { grid-column: 1 / -1; grid-row: 2; }
}

@media print {
	.sp-lateral, .sp-topo, .sp-acoes, .sp-barra-filtros { display: none !important; }
	.sp-principal { margin: 0; }
	.sp-conteudo { padding: 0; max-width: none; }
}

/* miniaturas em blocos das fichas */
.sp-miniatura { width: 120px; height: 120px; object-fit: contain; border: 1px solid var(--sp-borda); border-radius: 6px; background: #fff; margin: 0 6px 6px 0; }

/* módulos: o título da página já vem do portal */
.sp-pagina .sanysep .ss-titulo h1 { display: none; }
.sp-pagina .sp-bloco-topo h2, .sp-pagina .sp-atalho h3 { margin: 0; }
.sp-conexao-painel .sp-lista-passos { margin: 4px 0 10px; padding-left: 18px; }
.sp-conexao-painel .sp-lista-passos li { margin: 0 0 6px; }
.sp-conexao-painel code { background: var(--sp-fundo); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; word-break: break-all; }
.sp-alerta-txt { color: var(--sp-perigo, #b42318); font-weight: 600; }

/* De-Para de clientes e plantas */
.sp-abas-mini { display: inline-flex; border: 1px solid var(--sp-borda); border-radius: 8px; overflow: hidden; background: #fff; }
.sp-abas-mini a { padding: 7px 14px; text-decoration: none; color: var(--sp-tinta-2); font-weight: 600; font-size: 13px; }
.sp-abas-mini a + a { border-left: 1px solid var(--sp-borda); }
.sp-abas-mini a.sp-ativa { background: var(--sp-tinta); color: #fff; }
.sp-depara select { min-width: 220px; max-width: 320px; }
.sp-depara td { vertical-align: middle; }
.sp-depara tr.sp-grupo-b td { background: #fafbfc; }
.sp-depara tr.sp-sem-cliente td { background: var(--sp-aviso-fundo); }
.sp-depara tr.sp-alterada td { background: #eef5ff; }
.sp-depara-plantas input[type=text], .sp-depara-plantas textarea { width: 100%; min-width: 90px; }
.sp-depara-plantas .sp-curto { width: 44px; min-width: 44px; }
.sp-depara-plantas textarea { min-height: 32px; resize: vertical; }
.sp-rodape-fixo { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 10px 0; background: linear-gradient(transparent, var(--sp-fundo) 30%); }
.sp-sugestoes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.sp-sugestao { border: 1px solid var(--sp-borda); border-radius: var(--sp-raio); padding: 10px 12px; background: #fff; }
.sp-sugestao-topo { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--sp-tinta-2); margin-bottom: 6px; }
.sp-sugestao-clientes { list-style: none; margin: 0 0 8px; padding: 0; }
.sp-sugestao-clientes li { padding: 4px 0; border-top: 1px dashed var(--sp-borda); }
.sp-sugestao-clientes li:first-child { border-top: 0; }
.sp-sugestao .sp-acoes { display: flex; gap: 8px; }
.sp-depara-pedido .sp-form-linha input[type=text] { min-width: 260px; }
.sp-depara-proposta h3 { margin: 14px 0 6px; font-size: 14px; }
.sp-nowrap { white-space: nowrap; }
.sp-depara-proposta tr.sp-fraca td { color: var(--sp-mudo, #6b7280); }
.sp-barra-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sp-caps-grupo { border: 1px solid var(--sp-borda); border-radius: 8px; padding: 10px 14px 6px; margin: 0 0 12px; }
.sp-caps-grupo legend { font-weight: 700; padding: 0 6px; }
.sp-matriz-perfil a { color: inherit; text-decoration: none; }
.sp-depara-clientes { table-layout: fixed; width: 100%; min-width: 1000px; }
.sp-depara-clientes th, .sp-depara-clientes td { padding-left: 5px; padding-right: 5px; }
.sp-depara-clientes input[type=text] { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 5px; font-size: 12.5px; }
.sp-depara-clientes input[data-campo=conta_d365], .sp-depara-clientes input[data-campo=codigo_d365] { font-size: 11.5px; letter-spacing: -.2px; }
.sp-depara-clientes th:nth-child(1) { width: 10.5%; }
.sp-depara-clientes th:nth-child(2) { width: 13%; }
.sp-depara-clientes th:nth-child(3) { width: 12%; }
.sp-depara-clientes th:nth-child(4) { width: 13.5%; }
.sp-depara-clientes th:nth-child(5) { width: 9.5%; }
.sp-depara-clientes th:nth-child(6) { width: 17%; }
.sp-depara-clientes th:nth-child(7) { width: 8%; }
.sp-depara-clientes th:nth-child(8) { width: 8%; }
.sp-depara-clientes th:nth-child(9) { width: 3.5%; }
.sp-depara-clientes th:nth-child(10) { width: 5%; }
.sp-depara-clientes .sp-chave { font-size: 11px; display: inline-block; margin: 1px 0; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; vertical-align: middle; }
.sp-depara-clientes .sp-linha-nova td { background: #fafbfc; }
input.sp-preenchido { background: #fff8e1; border-color: #e0b84c; }
.sp-detalhes > summary { cursor: pointer; padding: 2px 0; }
.sp-detalhes[open] > summary { margin-bottom: 12px; }
input.sp-erro-campo { border-color: var(--sp-perigo); background: var(--sp-perigo-fundo); }

/* ------------------------------------------------------------ Agente SANY (Minha conta) — 1.5.0 */
.sp-agente { display: grid; gap: 10px; margin: 12px 0 4px; }
.sp-agente-linha { border: 1px solid var(--sp-borda); border-left-width: 4px; border-radius: var(--sp-raio); padding: 10px 12px; background: var(--sp-superficie); }
.sp-agente-linha p { margin: 6px 0 0; }
.sp-ok-borda { border-left-color: var(--sp-ok); }
.sp-alerta-borda { border-left-color: #d79a00; }
.sp-codigo-par { font-family: var(--sp-mono); font-size: 1.25em; letter-spacing: .08em; }
.sp-btn-peq { padding: 3px 10px; font-size: 12.5px; }
#sp-agente-disp .sp-tabela td { vertical-align: middle; }