:root {
  /* Identidade C&S Sistemas (cessistemas.com.br) */
  --cs-preto: #0a0a0a;
  --cs-preto-2: #161616;
  --cs-laranja: #ff6b00;
  --cs-laranja-escuro: #e65a00;
  --cs-laranja-suave: #fff3ea;
  --cs-cinza: #f6f7f9;
  --cs-borda: #e6e7ea;
  --cs-texto: #1b1d22;
  --cs-texto-mudo: #6b7076;

  /* Cores semanticas de metodo HTTP (convencao de mercado) */
  --m-get: #10a86a;
  --m-post: #3b63f6;
  --m-put: #e68a00;
  --m-delete: #e03131;
  --m-soap: #6b47c9;

  --cs-topbar-h: 54px;
  --cs-nav-h: 42px;
  --cs-sticky: 112px;
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 15px; } }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: #fff;
  color: var(--cs-texto);
  font-size: .95rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
}

a { color: var(--cs-laranja-escuro); }
a:hover { color: var(--cs-laranja); }

.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 0, 0.2);
  border-color: var(--cs-laranja);
}

/* ===== Shell / largura central ===== */
.cs-shell {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ===== Topbar ===== */
.cs-header { position: sticky; top: 0; z-index: 1030; }
.cs-topbar {
  background: #fff;
  border-bottom: 1px solid var(--cs-borda);
  height: var(--cs-topbar-h);
  display: flex;
  align-items: center;
}
.cs-logo {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--cs-preto);
  text-decoration: none;
  white-space: nowrap;
}
.cs-logo:hover { color: var(--cs-preto); }
.cs-logo .slash { color: var(--cs-laranja); }
.cs-logo-sep { color: var(--cs-borda); font-weight: 300; margin: 0 .15rem; }
.cs-logo-sub { color: var(--cs-texto-mudo); font-weight: 600; font-size: .95rem; }

/* Busca central */
.cs-busca {
  position: relative;
  max-width: 460px;
}
.cs-busca i {
  position: absolute;
  left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--cs-texto-mudo);
  font-size: .95rem;
}
.cs-busca input {
  width: 100%;
  border: 1px solid var(--cs-borda);
  background: var(--cs-cinza);
  border-radius: 999px;
  padding: .4rem .9rem .4rem 2.2rem;
  font-size: .84rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cs-busca input:focus {
  background: #fff;
  border-color: var(--cs-laranja);
  box-shadow: 0 0 0 3px rgba(255,107,0,.15);
}

/* Acesso (Entrar / conta) */
.cs-entrar {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--cs-texto-mudo);
  font-weight: 600; font-size: .9rem;
  text-decoration: none;
  padding: .4rem .6rem; border-radius: 8px;
  white-space: nowrap;
}
.cs-entrar:hover { color: var(--cs-laranja); background: var(--cs-laranja-suave); }
.cs-conta-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--cs-cinza); border: 1px solid var(--cs-borda);
  color: var(--cs-texto); font-weight: 600; font-size: .88rem;
  padding: .35rem .7rem; border-radius: 999px;
}
.cs-conta-btn:hover { border-color: var(--cs-laranja); }
.cs-chip-admin {
  background: var(--cs-laranja); color: #fff;
  font-size: .68rem; font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px;
}

/* ===== Barra de navegacao (tabs) ===== */
.cs-navbar2 {
  background: #fff;
  border-bottom: 1px solid var(--cs-borda);
}
.cs-nav-tabs {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .25rem; align-items: stretch;
}
.cs-tab {
  display: inline-flex; align-items: center;
  height: var(--cs-nav-h);
  padding: 0 .85rem;
  color: var(--cs-texto-mudo);
  font-weight: 600; font-size: .85rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.cs-tab:hover { color: var(--cs-texto); }
.cs-tab.active {
  color: var(--cs-laranja);
  border-bottom-color: var(--cs-laranja);
}
.cs-nav-toggle {
  background: none; border: none; color: var(--cs-texto);
  font-weight: 600; padding: .6rem 0;
}
@media (max-width: 991.98px) {
  .cs-nav-tabs { flex-direction: column; gap: 0; padding-bottom: .5rem; }
  .cs-tab { height: auto; padding: .6rem .25rem; border-bottom: none; }
  .cs-tab.active { border-bottom: none; }
}

/* ===== Botoes de marca ===== */
.btn-cs {
  background-color: var(--cs-laranja); border-color: var(--cs-laranja);
  color: #fff; font-weight: 600; border-radius: 9px; font-size: .86rem;
}
.btn-cs:hover, .btn-cs:focus {
  background-color: var(--cs-laranja-escuro); border-color: var(--cs-laranja-escuro); color: #fff;
}
.btn-outline-cs {
  border-color: var(--cs-laranja); color: var(--cs-laranja);
  font-weight: 600; border-radius: 9px; font-size: .86rem;
}
.btn-outline-cs:hover { background-color: var(--cs-laranja); color: #fff; }
.text-cs { color: var(--cs-laranja) !important; }
.badge-cs { background-color: var(--cs-laranja); color: #fff; }

/* ===== Footer ===== */
.cs-footer { background-color: var(--cs-preto); color: rgba(255,255,255,.75); }

/* ===== Hero (home) ===== */
.cs-hero {
  background: radial-gradient(1200px 400px at 20% -10%, #241a12 0%, var(--cs-preto) 55%), var(--cs-preto);
  color: #fff; border-radius: 1.25rem; overflow: hidden; position: relative;
}
.cs-hero h1 { font-weight: 800; font-size: 2.1rem; }
.cs-hero .destaque { color: var(--cs-laranja); }

/* ===== Cards das APIs ===== */
.card-api {
  border: 1px solid var(--cs-borda); border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-api:hover {
  transform: translateY(-3px);
  box-shadow: 0 .6rem 1.25rem rgba(0,0,0,.07);
  border-color: var(--cs-laranja);
}
.card-api .card-body { padding: .95rem 1rem; }
.card-api .card-title { font-size: .98rem; font-weight: 700; }
.card-api .card-text { font-size: .82rem; line-height: 1.5; }
.card-api .api-icon { font-size: 2.1rem; color: var(--cs-laranja); }
.card-api .badge { font-weight: 600; font-size: .66rem; }

/* ===== Badges de metodo HTTP ===== */
.metodo-badge {
  display: inline-flex; align-items: center;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: #fff;
  padding: .12rem .45rem; border-radius: 5px; line-height: 1.3;
}
.metodo-badge.get { background: var(--m-get); }
.metodo-badge.post { background: var(--m-post); }
.metodo-badge.put { background: var(--m-put); }
.metodo-badge.delete { background: var(--m-delete); }
.metodo-badge.soap { background: var(--m-soap); }
.metodo-badge.outro { background: #6b7076; }

/* ===== Layout de referencia (3 colunas) ===== */
.ref-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.ref-grid.com-codigo {
  grid-template-columns: 250px minmax(0, 1fr) 380px;
}
@media (max-width: 1199.98px) {
  .ref-grid, .ref-grid.com-codigo { grid-template-columns: 230px minmax(0, 1fr); }
  .code-col { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .ref-grid, .ref-grid.com-codigo { grid-template-columns: 1fr; }
  .nav-col { display: none; }
}

/* ===== Sidebar de navegacao ===== */
.nav-col { position: sticky; top: var(--cs-sticky); }
.doc-nav-filtro {
  position: relative; margin-bottom: 1rem;
}
.doc-nav-filtro i {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  color: var(--cs-texto-mudo); font-size: .85rem;
}
.doc-nav-filtro input {
  width: 100%; border: 1px solid var(--cs-borda); border-radius: 8px;
  padding: .4rem .7rem .4rem 2rem; font-size: .85rem; background: #fff;
}
/* Cabecalho da API (nivel 1) */
.doc-nav-api {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cs-texto); font-weight: 800;
  margin: 1.5rem 0 .6rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--cs-borda);
}
.doc-nav-api:first-child { margin-top: 0; }

/* Rotulo de categoria (nivel 2) */
.doc-nav-grupo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--cs-texto-mudo); font-weight: 700;
  margin: .95rem 0 .3rem .1rem;
}
.doc-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .3rem .55rem .3rem .7rem; border-radius: 7px;
  color: var(--cs-texto); text-decoration: none;
  font-size: .82rem; font-weight: 500;
  border-left: 2px solid transparent;
}
.doc-nav-item:hover { background: var(--cs-cinza); color: var(--cs-texto); }
.doc-nav-item.active {
  background: var(--cs-laranja-suave);
  color: var(--cs-laranja-escuro);
  font-weight: 600;
  border-left-color: var(--cs-laranja);
}
.doc-nav-item .metodo-badge { flex-shrink: 0; }

/* ===== Conteudo de referencia ===== */
.ref-eyebrow {
  text-transform: uppercase; letter-spacing: .06em;
  font-size: .75rem; font-weight: 700; color: var(--cs-texto-mudo);
}
.ref-titulo { font-size: 1.6rem; font-weight: 700; margin: .2rem 0 .6rem; }
.ref-breadcrumb {
  font-size: .8rem; color: var(--cs-texto-mudo); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; margin-bottom: .35rem;
}
.ref-breadcrumb a { color: var(--cs-texto-mudo); text-decoration: none; }
.ref-breadcrumb a:hover { color: var(--cs-laranja); }

/* Pilula metodo + URL */
.url-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--cs-cinza); border: 1px solid var(--cs-borda);
  border-radius: 8px; padding: .4rem .65rem; max-width: 100%;
  overflow-x: auto;
}
.url-pill .url-texto {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: .85rem; color: var(--cs-texto); white-space: nowrap;
}

/* Callout */
.cs-callout {
  border-left: 4px solid var(--cs-laranja);
  background-color: var(--cs-laranja-suave);
  border-radius: 8px; padding: .85rem 1rem;
}

/* Secoes */
.doc-secao {
  font-size: 1rem; font-weight: 700; color: var(--cs-texto);
  margin: 1.75rem 0 .7rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--cs-borda);
}
.doc-secao i { color: var(--cs-laranja); }

/* Lista de parametros (Body Params) */
.param-lista { border-top: 1px solid var(--cs-borda); }
.param-item {
  padding: .7rem 0; border-bottom: 1px solid var(--cs-borda);
}
.param-item .nome {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-weight: 700; color: var(--cs-texto); font-size: .85rem;
}
.param-item .tipo { color: var(--cs-texto-mudo); font-size: .78rem; margin-left: .4rem; }
.param-item .req {
  color: var(--m-delete); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; margin-left: .4rem;
}
.param-item .opc {
  color: var(--cs-texto-mudo); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; margin-left: .4rem;
}
.param-item .desc { color: var(--cs-texto-mudo); font-size: .82rem; margin-top: .2rem; margin-bottom: 0; }

/* ===== Painel de codigo (direita) ===== */
.code-col { position: sticky; top: var(--cs-sticky); }
.code-panel {
  background: #14161b; border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.code-panel-lang {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .85rem; background: #0e1014;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.code-panel-lang .rotulo {
  color: #aeb3bd; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.code-panel-lang .tag-lang {
  color: #fff; background: rgba(255,107,0,.18);
  border: 1px solid rgba(255,107,0,.35);
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: .72rem; padding: .1rem .45rem; border-radius: 5px;
}
.code-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .85rem; color: #e7e9ee; font-size: .8rem; font-weight: 600;
  background: #191c22;
}
.code-panel pre {
  margin: 0; padding: .8rem; overflow-x: auto;
  color: #e7e9ee;
  font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
  font-size: .76rem; line-height: 1.5;
}
.code-panel .resposta-head {
  border-top: 1px solid rgba(255,255,255,.07);
}
.code-status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; color: #cfd3da;
}
.code-status .ponto { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.code-status .ponto.ok { background: var(--m-get); }
.code-status .ponto.erro { background: var(--m-delete); }
.btn-copiar {
  background: rgba(255,255,255,.08); border: none; color: #cfd3da;
  font-size: .72rem; font-weight: 600; padding: .2rem .5rem; border-radius: 6px;
  display: inline-flex; align-items: center; gap: .3rem;
}
.btn-copiar:hover { background: var(--cs-laranja); color: #fff; }

/* Bloco de endpoint simples (fallback) */
.endpoint-block {
  background-color: #14161b; color: #e7e9ee; border-radius: 10px;
  font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
  font-size: .9rem; padding: .85rem 1rem; overflow-x: auto;
}
.endpoint-block .metodo { color: var(--cs-laranja); font-weight: 700; margin-right: .5rem; }

/* Conteudo de descricao */
.cs-conteudo { white-space: pre-wrap; line-height: 1.65; color: #3a3f46; font-size: .9rem; }

/* ===== Artigo HTML migrado (WSCES) ===== */
.cs-artigo { color: #3a3f46; font-size: .9rem; line-height: 1.68; }
.cs-artigo h1, .cs-artigo h2 {
  font-family: 'Outfit', 'Inter', sans-serif; font-weight: 700;
  color: var(--cs-texto); font-size: 1.1rem;
  margin: 1.8rem 0 .7rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--cs-borda);
}
.cs-artigo h3 { font-size: .98rem; font-weight: 700; color: var(--cs-texto); margin: 1.3rem 0 .5rem; }
.cs-artigo h4 { font-size: .9rem; font-weight: 700; color: var(--cs-texto); margin: 1.1rem 0 .4rem; }
.cs-artigo > :first-child { margin-top: 0; }
.cs-artigo p { margin: 0 0 .85rem; }
.cs-artigo ul, .cs-artigo ol { margin: 0 0 .9rem; padding-left: 1.25rem; }
.cs-artigo li { margin-bottom: .3rem; }
.cs-artigo strong { font-weight: 600; color: var(--cs-texto); }
.cs-artigo a { color: var(--cs-laranja-escuro); }

/* codigo inline */
.cs-artigo code {
  background: var(--cs-cinza); border: 1px solid var(--cs-borda);
  color: #b5410a; font-family: 'Cascadia Code', Consolas, monospace;
  font-size: .82em; padding: .08rem .35rem; border-radius: 5px;
}
/* bloco de codigo (ex.: XML da requisicao) */
.cs-artigo pre {
  background: #14161b; color: #e7e9ee; border-radius: 10px;
  padding: .85rem 1rem; overflow-x: auto; margin: 0 0 1rem;
  font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
  font-size: .8rem; line-height: 1.55;
}
.cs-artigo pre code { background: none; border: none; color: inherit; padding: 0; font-size: 1em; }

/* tabelas de parametros */
.cs-artigo table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.1rem;
  font-size: .85rem; border: 1px solid var(--cs-borda); border-radius: 8px; overflow: hidden;
}
.cs-artigo thead th {
  background: var(--cs-preto); color: #fff; font-weight: 600;
  text-align: left; padding: .5rem .7rem; font-size: .8rem;
}
.cs-artigo tbody td { padding: .5rem .7rem; border-top: 1px solid var(--cs-borda); vertical-align: top; }
.cs-artigo tbody tr:nth-child(even) { background: #fafafb; }
.cs-artigo img { max-width: 100%; height: auto; border-radius: 8px; }

/* ===== Linhas dinamicas de parametro (admin) ===== */
.param-row { border: 1px solid var(--cs-borda); border-radius: 10px; padding: .75rem; background: var(--cs-cinza); }

/* ===== Paginas de autenticacao (Login / recuperacao) ===== */
.cs-auth {
  display: flex; justify-content: center;
  padding: 2.5rem 0 3.5rem;
}
.cs-auth-card {
  width: 100%; max-width: 408px;
  background: #fff;
  border: 1px solid var(--cs-borda);
  border-radius: 14px;
  padding: 2rem 1.9rem 1.75rem;
  box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 12px 32px -18px rgba(10,10,10,.22);
}
.cs-auth-logo {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--cs-preto); margin-bottom: 1.1rem;
}
.cs-auth-logo .slash { color: var(--cs-laranja); }
.cs-auth-icone {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cs-laranja-suave); color: var(--cs-laranja-escuro);
  font-size: 1.5rem; margin-bottom: 1rem;
}
.cs-auth-head h1 {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.4rem;
  color: var(--cs-texto); margin: 0 0 .35rem;
}
.cs-auth-head p {
  color: var(--cs-texto-mudo); font-size: .88rem; line-height: 1.5; margin: 0 0 1.4rem;
}
.cs-campo { margin-bottom: 1rem; }
.cs-campo label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--cs-texto); margin-bottom: .35rem;
}
.cs-campo .form-control {
  border: 1px solid var(--cs-borda); border-radius: 9px;
  padding: .55rem .75rem; font-size: .9rem;
}
.cs-campo .form-control:focus {
  border-color: var(--cs-laranja);
  box-shadow: 0 0 0 .18rem rgba(255,107,0,.15);
}
.cs-campo-erro, .cs-auth-erro {
  display: block; color: #d6322a; font-size: .8rem; margin-top: .3rem;
}
.cs-auth-erro { margin: 0 0 1rem; }
.cs-auth-erro:empty { display: none; }
.cs-auth-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin: .1rem 0 1.25rem;
}
.cs-check {
  display: flex; align-items: center; gap: .45rem; margin: 0;
  font-size: .85rem; color: var(--cs-texto-mudo); cursor: pointer;
}
.cs-check .form-check-input { margin: 0; cursor: pointer; }
.cs-check .form-check-input:checked {
  background-color: var(--cs-laranja); border-color: var(--cs-laranja);
}
.cs-auth-link { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.cs-auth-rodape {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--cs-borda);
  color: var(--cs-texto-mudo); font-size: .8rem; line-height: 1.45;
}
.cs-auth-rodape .bi { color: var(--cs-laranja); margin-top: .1rem; }
.cs-auth-aviso {
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--cs-cinza); border: 1px solid var(--cs-borda);
  border-left: 3px solid var(--cs-laranja); border-radius: 10px;
  padding: .85rem 1rem; margin-bottom: 1.4rem;
}
.cs-auth-aviso .bi { color: var(--cs-laranja-escuro); font-size: 1.05rem; margin-top: .1rem; }
.cs-auth-aviso strong { display: block; font-size: .88rem; color: var(--cs-texto); margin-bottom: .25rem; }
.cs-auth-aviso span { display: block; font-size: .83rem; color: var(--cs-texto-mudo); line-height: 1.5; }