/* Documentacao da API do Hotel das Lojas - docs.hoteldaslojas.com.br
   Tres colunas: navegacao a esquerda, conteudo no centro, exemplos de codigo a direita. Claro e escuro. */
:root {
	--acento: #c516c5; --acento-2: #d61fd6; --acento-fundo: #fdf0fd; --acento-borda: #f3c4f3;
	--petroleo: #124f6b; --tinta: #0f2533; --texto: #33475b; --sub: #6b7f93; --linha: #e6edf3; --linha-2: #eef2f6;
	--fundo: #ffffff; --fundo-2: #f7f9fb; --cartao: #ffffff; --codigo-fundo: #f8fafc; --codigo-texto: #1f2d3a; --codigo-linha: #e3e9ef;
	--cab-texto: #5d7083; --cab-forte: #0f2533; --cab-ativo: #e8eef4; --cab-campo: #ffffff; --cab-borda: #d9e2ea; --sombra-codigo: 0 1px 2px rgba(15, 37, 51, .05);
	--t-s: #0a7d4f; --t-n: #b45309; --t-k: #1d4ed8; --t-b: #be185d; --t-c: #8a9aa8; --t-f: #7c3aed; --s2: #0f8a5f; --s4: #b26b00; --s5: #c42b2b;
	--ok: #0f8a5f; --ok-fundo: #e8f7f0; --aviso: #b26b00; --aviso-fundo: #fff6e5;
	--get: #0f8a5f; --get-f: #e6f6ee; --post: #1d5fd1; --post-f: #e8f0fd; --put: #a35d00; --put-f: #fff2de; --patch: #a35d00; --patch-f: #fff2de; --delete: #c42b2b; --delete-f: #fdeaea;
	--raio: 12px; --topo: 64px;
	--fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	color-scheme: light;
}
:root[data-tema="escuro"] {
	--acento: #ee6aee; --acento-2: #f08af0; --acento-fundo: #2a1430; --acento-borda: #5a2a63;
	--tinta: #eef4f8; --texto: #c4d2de; --sub: #8ea2b4; --linha: #22323f; --linha-2: #1b2934;
	--fundo: #0b141b; --fundo-2: #0f1a22; --cartao: #101c25; --codigo-fundo: #08121a; --codigo-texto: #dbe7f0; --codigo-linha: #17262f;
	--cab-texto: #9fb3c3; --cab-forte: #e8f1f7; --cab-ativo: #1b2f3c; --cab-campo: #12222d; --cab-borda: #2a3d4a; --sombra-codigo: 0 10px 30px -18px rgba(8, 18, 26, .6);
	--t-s: #9ae6b4; --t-n: #f6ad55; --t-k: #90cdf4; --t-b: #f687b3; --t-c: #6b8394; --t-f: #d6bcfa; --s2: #4ade80; --s4: #fbbf24; --s5: #f87171;
	--ok-fundo: #0c2a1f; --aviso-fundo: #2a1f08; --get-f: #0c2a1f; --post-f: #0f1f3d; --put-f: #2c1f08; --patch-f: #2c1f08; --delete-f: #2e1111;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topo) + 16px); }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.65 var(--fonte); -webkit-font-smoothing: antialiased; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, kbd { font-family: var(--mono); }
:not(pre) > code { padding: 1px 6px; border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo-2); color: var(--tinta); font-size: .86em; }
h1, h2, h3 { color: var(--tinta); line-height: 1.25; }

/* ---------- topo */
.d-topo { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; height: var(--topo); padding: 0 24px; border-bottom: 1px solid var(--linha); background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(12px); }
.d-marca { display: flex; align-items: center; gap: 10px; color: var(--tinta) !important; font-weight: 700; font-size: 16px; text-decoration: none !important; white-space: nowrap; }
.d-marca img { height: 30px; }
.d-logo-escuro, :root[data-tema="escuro"] .d-logo-claro { display: none; }
:root[data-tema="escuro"] .d-logo-escuro { display: block; }
.d-marca span { padding: 2px 8px; border-radius: 999px; background: var(--acento-fundo); color: var(--acento); font-size: 12px; font-weight: 700; }
.d-busca { flex: 1; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo-2); color: var(--sub); cursor: pointer; font-size: 14px; }
.d-busca:hover { border-color: var(--acento-borda); }
.d-busca kbd { margin-left: auto; padding: 1px 6px; border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo); font-size: 11.5px; }
.d-topo-links { display: flex; align-items: center; gap: 6px; }
.d-topo-links a { padding: 7px 12px; border-radius: 8px; color: var(--texto); font-size: 14px; font-weight: 500; }
.d-topo-links a:hover { background: var(--fundo-2); text-decoration: none; }
.d-topo-links a.d-cta { background: var(--acento); color: #fff; }
.d-icone { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); color: var(--texto); cursor: pointer; }
.d-menu-btn { display: none; }

/* ---------- moldura */
.d-moldura { display: grid; grid-template-columns: 280px minmax(0, 1fr); max-width: 1500px; margin: 0 auto; }
.d-lateral { position: sticky; top: var(--topo); height: calc(100vh - var(--topo)); overflow-y: auto; padding: 22px 16px 60px 24px; border-right: 1px solid var(--linha-2); }
.d-lateral h4 { margin: 22px 0 6px 10px; color: var(--tinta); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.d-lateral h4:first-child { margin-top: 0; }
.d-lateral a { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--texto); font-size: 14px; line-height: 1.35; }
.d-lateral a:hover { background: var(--fundo-2); text-decoration: none; color: var(--tinta); }
.d-lateral a.ativo { background: var(--acento-fundo); color: var(--acento); font-weight: 600; }
.d-metodo { flex: none; display: inline-block; min-width: 42px; padding: 1px 0; border-radius: 6px; font: 700 9.5px/1.6 var(--mono); text-align: center; letter-spacing: .02em; margin-top: 2px; }
.d-metodo.GET { background: var(--get-f); color: var(--get); } .d-metodo.POST { background: var(--post-f); color: var(--post); }
.d-metodo.PUT { background: var(--put-f); color: var(--put); } .d-metodo.PATCH { background: var(--patch-f); color: var(--patch); } .d-metodo.DELETE { background: var(--delete-f); color: var(--delete); }

.d-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; padding: 40px 48px 80px; }
.d-pagina.d-guia { grid-template-columns: minmax(0, 760px) 220px; justify-content: center; }
.d-conteudo { min-width: 0; }
.d-grupo { margin: 0 0 6px; color: var(--acento); font-size: 13.5px; font-weight: 600; }
.d-conteudo h1 { margin: 0 0 6px; font-size: 34px; letter-spacing: -.02em; }
.d-sub { margin: 0 0 22px; color: var(--sub); font-size: 17px; }
.d-conteudo h2 { margin: 38px 0 12px; font-size: 21px; letter-spacing: -.01em; }
.d-conteudo h3 { margin: 26px 0 10px; font-size: 16.5px; }
.d-conteudo p, .d-conteudo li { color: var(--texto); }
.d-conteudo table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 14px; }
.d-conteudo th { padding: 9px 12px; border-bottom: 1px solid var(--linha); color: var(--tinta); font-weight: 600; text-align: left; white-space: nowrap; }
.d-conteudo td { padding: 9px 12px; border-bottom: 1px solid var(--linha-2); vertical-align: top; }

/* barra do endpoint */
.d-endpoint { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 7px 7px 7px 10px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); box-shadow: 0 1px 2px rgba(15, 37, 51, .04); }
.d-endpoint .d-metodo { min-width: 58px; font-size: 12px; padding: 4px 0; margin: 0; }
.d-caminho { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 500 14px var(--mono); color: var(--tinta); scrollbar-width: none; }
.d-caminho i { color: var(--sub); font-style: normal; }
.d-caminho b { padding: 1px 5px; border: 1px solid var(--acento-borda); border-radius: 6px; background: var(--acento-fundo); color: var(--acento); font-weight: 500; }
.d-testar { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 9px; background: var(--acento); color: #fff; font: 600 14px var(--fonte); cursor: pointer; }
.d-testar:hover { background: var(--acento-2); }
.d-testar:disabled { opacity: .55; cursor: wait; }

.d-caixa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 18px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); font: 14px var(--mono); color: var(--tinta); }
.d-dica { display: flex; gap: 12px; margin: 16px 0; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); border-radius: var(--raio); background: var(--ok-fundo); color: var(--texto); font-size: 14.5px; }
.d-dica svg { flex: none; margin-top: 3px; color: var(--ok); }
.d-dica ul { margin: 0; padding-left: 18px; } .d-dica li + li { margin-top: 6px; }
.d-alerta { border-color: color-mix(in srgb, var(--aviso) 30%, transparent); background: var(--aviso-fundo); }
.d-alerta svg { color: var(--aviso); }

/* parametros */
.d-params { margin: 0 0 8px; border-top: 1px solid var(--linha-2); }
.d-param { padding: 14px 0; border-bottom: 1px solid var(--linha-2); }
.d-param-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.d-param-nome { font: 600 14px var(--mono); color: var(--tinta); }
.d-param-tipo { padding: 0 7px; border-radius: 6px; background: var(--fundo-2); color: var(--sub); font: 12px var(--mono); }
.d-param-obr { padding: 0 7px; border-radius: 6px; background: var(--delete-f); color: var(--delete); font: 600 11.5px var(--fonte); }
.d-param-onde { color: var(--sub); font-size: 12.5px; }
.d-param p { margin: 6px 0 0; font-size: 14px; }

/* coluna de codigo */
.d-codigos { position: sticky; top: calc(var(--topo) + 24px); align-self: start; display: grid; gap: 16px; max-height: calc(100vh - var(--topo) - 40px); }
.d-bloco { overflow: hidden; border: 1px solid var(--codigo-linha); border-radius: var(--raio); background: var(--codigo-fundo); box-shadow: var(--sombra-codigo); }
.d-bloco-cab { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--codigo-linha); color: var(--cab-texto); font-size: 12.5px; }
.d-bloco-cab b { margin-right: auto; color: var(--cab-forte); font-weight: 600; }
.d-bloco-cab select { padding: 3px 6px; border: 1px solid var(--cab-borda); border-radius: 6px; background: var(--cab-campo); color: var(--cab-forte); font: 12px var(--fonte); }
.d-aba { padding: 4px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--cab-texto); font: 600 12px var(--mono); cursor: pointer; }
.d-aba.ativo { background: var(--cab-ativo); color: var(--cab-forte); }
.d-aba.s2 { color: var(--s2); } .d-aba.s4 { color: var(--s4); } .d-aba.s5 { color: var(--s5); }
.d-aba.ativo.s2 { color: var(--s2); } .d-aba.ativo.s4 { color: var(--s4); } .d-aba.ativo.s5 { color: var(--s5); }
.d-copiar { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--cab-texto); cursor: pointer; }
.d-copiar:hover { background: var(--cab-ativo); color: var(--cab-forte); }
.d-bloco pre { margin: 0; padding: 14px 16px; max-height: 420px; overflow: auto; color: var(--codigo-texto); font-size: 12.8px; line-height: 1.6; }
.d-bloco pre[hidden] { display: none; }
.t-s { color: var(--t-s); } .t-n { color: var(--t-n); } .t-k { color: var(--t-k); } .t-b { color: var(--t-b); } .t-c { color: var(--t-c); } .t-f { color: var(--t-f); }

/* guia: indice da pagina */
.d-toc { position: sticky; top: calc(var(--topo) + 32px); align-self: start; font-size: 13.5px; }
.d-toc b { display: block; margin-bottom: 8px; color: var(--tinta); font-size: 12.5px; }
.d-toc a { display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--linha); color: var(--sub); }
.d-toc a:hover { color: var(--tinta); text-decoration: none; border-color: var(--acento-borda); }
.d-conteudo pre.d-pre { margin: 12px 0 20px; padding: 16px 18px; overflow: auto; border: 1px solid var(--codigo-linha); border-radius: var(--raio); background: var(--codigo-fundo); color: var(--codigo-texto); font-size: 13px; line-height: 1.6; }

/* inicio */
.d-hero { padding: 26px 30px; margin-bottom: 26px; border: 1px solid var(--acento-borda); border-radius: 18px; background: radial-gradient(circle at 90% 0, color-mix(in srgb, var(--acento) 16%, transparent), transparent 55%), var(--acento-fundo); }
.d-hero h1 { font-size: 38px; }
.d-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.d-card { display: block; padding: 18px 20px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); color: var(--texto) !important; text-decoration: none !important; transition: border-color .2s, transform .2s; }
.d-card:hover { border-color: var(--acento-borda); transform: translateY(-2px); }
.d-card b { display: block; margin-bottom: 4px; color: var(--tinta); font-size: 15.5px; }
.d-card span { color: var(--sub); font-size: 14px; }

.d-rodape-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linha); }
.d-rodape-nav a { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--linha); border-radius: var(--raio); color: var(--tinta); text-decoration: none !important; max-width: 48%; }
.d-rodape-nav a small { color: var(--sub); }
.d-rodape-nav a:last-child { text-align: right; margin-left: auto; }
.d-rodape { margin-top: 30px; color: var(--sub); font-size: 13px; }

/* busca */
.d-modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: start center; padding-top: 12vh; background: rgba(8, 18, 26, .45); backdrop-filter: blur(3px); }
.d-modal.aberto { display: grid; }
.d-modal-caixa { width: min(640px, 94vw); overflow: hidden; border: 1px solid var(--linha); border-radius: 16px; background: var(--fundo); box-shadow: 0 30px 80px -20px rgba(8, 18, 26, .5); }
.d-modal-caixa input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--linha); background: transparent; color: var(--tinta); font: 16px var(--fonte); outline: none; }
.d-resultados { max-height: 60vh; overflow-y: auto; padding: 8px; }
.d-resultados a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--texto); }
.d-resultados a:hover, .d-resultados a.foco { background: var(--acento-fundo); text-decoration: none; }
.d-resultados small { margin-left: auto; color: var(--sub); }
.d-resultados p { margin: 14px; color: var(--sub); }

/* testar */
.d-painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-direction: column; width: min(560px, 100vw); border-left: 1px solid var(--linha); background: var(--fundo); box-shadow: -30px 0 60px -30px rgba(8, 18, 26, .5); transform: translateX(105%); transition: transform .28s ease; }
.d-painel.aberto { transform: none; }
.d-painel-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.d-painel-cab b { flex: 1; color: var(--tinta); }
.d-painel-corpo { flex: 1; overflow-y: auto; padding: 18px; }
.d-painel label { display: block; margin: 14px 0 6px; color: var(--tinta); font-size: 13px; font-weight: 600; }
.d-painel label small { color: var(--sub); font-weight: 400; }
.d-painel input, .d-painel textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo-2); color: var(--tinta); font: 13px var(--mono); }
.d-painel textarea { min-height: 170px; resize: vertical; }
.d-painel .d-testar { width: 100%; justify-content: center; margin-top: 16px; padding: 11px; }
.d-resposta { margin-top: 18px; }
.d-resposta-cab { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; color: var(--sub); }
.d-resposta-cab b.ok { color: var(--ok); } .d-resposta-cab b.erro { color: var(--delete); }
.d-resposta pre { margin: 0; padding: 14px; max-height: 50vh; overflow: auto; border: 1px solid var(--codigo-linha); border-radius: 10px; background: var(--codigo-fundo); color: var(--codigo-texto); font-size: 12.5px; }
.d-chave-demo { margin-top: 6px; font-size: 12.5px; color: var(--sub); }
.d-chave-demo button { padding: 0; border: 0; background: none; color: var(--acento); font: inherit; cursor: pointer; text-decoration: underline; }

/* celular */
@media (max-width: 1200px) {
	.d-pagina { grid-template-columns: minmax(0, 1fr); padding: 32px 32px 60px; }
	.d-codigos { position: static; max-height: none; }
	.d-pagina.d-guia { grid-template-columns: minmax(0, 1fr); }
	.d-toc { display: none; }
}
@media (max-width: 900px) {
	.d-moldura { grid-template-columns: minmax(0, 1fr); }
	.d-lateral { position: fixed; top: var(--topo); left: 0; bottom: 0; z-index: 60; width: 300px; height: auto; background: var(--fundo); transform: translateX(-105%); transition: transform .25s; box-shadow: 20px 0 40px -20px rgba(8, 18, 26, .4); }
	body.menu-aberto .d-lateral { transform: none; }
	.d-menu-btn { display: grid; }
	.d-topo { padding: 0 14px; gap: 10px; }
	.d-topo-links a:not(.d-cta) { display: none; }
	.d-busca span { display: none; }
	.d-busca { flex: none; width: 38px; margin: 0 0 0 auto; padding: 0; justify-content: center; }
	.d-busca kbd, .d-topo-links, .d-marca span { display: none; }
	.d-marca img { height: 26px; }
	.d-pagina { padding: 24px 16px 60px; }
	.d-conteudo h1 { font-size: 27px; }
	.d-cards { grid-template-columns: minmax(0, 1fr); }
	.d-endpoint { flex-wrap: wrap; }
	.d-caminho { flex-basis: calc(100% - 80px); }
	.d-testar { width: 100%; justify-content: center; }
}
