/* Visual Olhar da documentação pública (api/index.html e api/docs/reference.php). O kit do adm não é servido
   pelo vhost da api: os tokens abaixo são os do docs/redesign/DESIGN_SYSTEM.md. */
:root {
    color-scheme: light dark;
    --ol-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
    --ol-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
    --ol-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    --ol-ease: cubic-bezier(.2, .8, .2, 1);
    --ol-accent: #0038e5;
    --ol-accent-strong: #002cb8;
    --ol-accent-soft: rgba(0, 56, 229, .08);
    --ol-bg: #f2f4f8;
    --ol-surface: #ffffff;
    --ol-surface-2: #f6f8fb;
    --ol-surface-3: #eceff5;
    --ol-line: #e2e6ee;
    --ol-line-control: #c7cdd9;
    --ol-fg: #0b1020;
    --ol-fg-2: #3c4458;
    --ol-fg-3: #626a7c;
    --ol-ok: #0e7a3c;
    --ol-warn: #9a5b00;
    --ol-bad: #bf1f33;
    --ol-teal: #09776c;
    --ol-violet: #6d3ff2;
    --ol-orange: #b2410f;
    --ol-shadow-near: rgba(11, 16, 32, .05);
    --ol-shadow-far: rgba(11, 16, 32, .28);
}
@media (prefers-color-scheme: dark) {
    :root {
        --ol-accent: #6189ff;
        --ol-accent-strong: #85a4ff;
        --ol-accent-soft: rgba(97, 137, 255, .15);
        --ol-bg: #0b0d12;
        --ol-surface: #12151c;
        --ol-surface-2: #181c25;
        --ol-surface-3: #20252f;
        --ol-line: #262b36;
        --ol-line-control: #3a4150;
        --ol-fg: #eef1f8;
        --ol-fg-2: #b4bccb;
        --ol-fg-3: #8d96a8;
        --ol-ok: #4ccf86;
        --ol-warn: #f2b24c;
        --ol-bad: #ff7586;
        --ol-teal: #3fc1b0;
        --ol-violet: #a48bff;
        --ol-orange: #ff9a66;
        --ol-shadow-near: rgba(0, 0, 0, .3);
        --ol-shadow-far: rgba(0, 0, 0, .6);
    }
}

/* Página de entrada (api/index.html) */
.ol-entrada {
    margin: 0;
    min-height: 100vh;
    background-color: var(--ol-bg);
    background-image: radial-gradient(circle at 1px 1px, var(--ol-line) 1px, transparent 0);
    background-size: 22px 22px;
    color: var(--ol-fg);
    font: 400 14px/1.5 var(--ol-font);
    -webkit-font-smoothing: antialiased;
}
.ol-entrada *, .ol-entrada *::before, .ol-entrada *::after { box-sizing: border-box; }
.ol-entrada a { color: inherit; text-decoration: none; }
.ol-entrada :focus-visible { outline: 2px solid var(--ol-accent); outline-offset: 3px; border-radius: 12px; }
.ol-shell { max-width: 880px; margin: 0 auto; padding: 56px 24px 40px; }
.ol-marca { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 var(--ol-font-display); letter-spacing: -.01em; }
.ol-marca svg { width: 30px; height: 30px; color: var(--ol-accent); }
.ol-intro { margin: 48px 0 32px; }
.ol-intro h1 { margin: 0 0 10px; font: 750 30px/1.12 var(--ol-font-display); letter-spacing: -.02em; }
.ol-intro p { margin: 0; max-width: 60ch; color: var(--ol-fg-2); font-size: 15.5px; }
.ol-base {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 14px;
    border: 1px solid var(--ol-line); border-radius: 999px; background: var(--ol-surface);
    box-shadow: 0 1px 2px var(--ol-shadow-near);
    font-size: 13px; color: var(--ol-fg-3);
}
.ol-base code { font: 500 13px/1 var(--ol-mono); color: var(--ol-fg); overflow-wrap: anywhere; }
.ol-lista {
    margin: 0; padding: 0; list-style: none;
    border: 1px solid var(--ol-line); border-radius: 20px; background: var(--ol-surface);
    box-shadow: 0 1px 2px var(--ol-shadow-near), 0 8px 24px -18px var(--ol-shadow-far);
    overflow: hidden;
}
.ol-lista li + li { border-top: 1px solid var(--ol-line); }
.ol-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; transition: background-color .18s var(--ol-ease); }
.ol-item:hover { background: var(--ol-surface-2); }
.ol-item-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.ol-item-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ol-item-icone.ref { color: var(--ol-teal); background: color-mix(in srgb, var(--ol-teal) 12%, transparent); }
.ol-item-icone.spec { color: var(--ol-violet); background: color-mix(in srgb, var(--ol-violet) 12%, transparent); }
.ol-item-icone.ia { color: var(--ol-orange); background: color-mix(in srgb, var(--ol-orange) 12%, transparent); }
.ol-item-titulo { display: block; font: 650 15.5px/1.3 var(--ol-font); }
.ol-item-sub { display: block; margin-top: 2px; color: var(--ol-fg-3); font-size: 13px; }
.ol-item-seta { width: 18px; height: 18px; color: var(--ol-fg-3); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ol-ease), color .18s var(--ol-ease); }
.ol-item:hover .ol-item-seta { transform: translateX(3px); color: var(--ol-accent); }
.ol-rodape { margin-top: 28px; color: var(--ol-fg-3); font-size: 12px; }
@media (max-width: 560px) {
    .ol-shell { padding: 32px 16px 28px; }
    .ol-intro { margin: 32px 0 24px; }
    .ol-intro h1 { font-size: 25px; }
    .ol-item { grid-template-columns: 36px 1fr; gap: 12px; padding: 16px; }
    .ol-item-icone { width: 36px; height: 36px; }
    .ol-item-seta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ol-item, .ol-item-seta { transition: none; }
}

/* Referência (Scalar com theme: 'none'). body.light-mode e body.dark-mode ganham das variáveis padrão do Scalar,
   que vêm em .light-mode e .dark-mode. */
html:root {
    --scalar-font: var(--ol-font);
    --scalar-font-code: var(--ol-mono);
    --scalar-border-width: 1px;
    --scalar-radius: 10px;
    --scalar-radius-lg: 14px;
    --scalar-radius-xl: 20px;
}
body.light-mode, body .light-mode {
    --scalar-background-1: #ffffff;
    --scalar-background-2: #f6f8fb;
    --scalar-background-3: #eceff5;
    --scalar-background-accent: rgba(0, 56, 229, .08);
    --scalar-color-1: #0b1020;
    --scalar-color-2: #3c4458;
    --scalar-color-3: #626a7c;
    --scalar-color-accent: #0038e5;
    --scalar-border-color: #e2e6ee;
    --scalar-button-1: #0038e5;
    --scalar-button-1-hover: #002cb8;
    --scalar-button-1-color: #ffffff;
    --scalar-color-green: #0e7a3c;
    --scalar-color-red: #bf1f33;
    --scalar-color-yellow: #9a5b00;
    --scalar-color-blue: #0971aa;
    --scalar-color-orange: #b2410f;
    --scalar-color-purple: #6d3ff2;
    --scalar-sidebar-background-1: #f2f4f8;
    --scalar-sidebar-color-1: #0b1020;
    --scalar-sidebar-color-2: #3c4458;
    --scalar-sidebar-color-active: #0038e5;
    --scalar-sidebar-border-color: #e2e6ee;
    --scalar-sidebar-item-hover-background: rgba(11, 16, 32, .05);
    --scalar-sidebar-item-hover-color: #0b1020;
    --scalar-sidebar-item-active-background: rgba(0, 56, 229, .08);
    --scalar-sidebar-search-background: #ffffff;
    --scalar-sidebar-search-border-color: #c7cdd9;
    --scalar-sidebar-search-color: #626a7c;
}
body.dark-mode, body .dark-mode {
    --scalar-background-1: #0b0d12;
    --scalar-background-2: #12151c;
    --scalar-background-3: #1a1e27;
    --scalar-background-accent: rgba(97, 137, 255, .15);
    --scalar-color-1: #eef1f8;
    --scalar-color-2: #b4bccb;
    --scalar-color-3: #8d96a8;
    --scalar-color-accent: #6189ff;
    --scalar-border-color: #262b36;
    --scalar-button-1: #6189ff;
    --scalar-button-1-hover: #85a4ff;
    --scalar-button-1-color: #0b0d12;
    --scalar-color-green: #4ccf86;
    --scalar-color-red: #ff7586;
    --scalar-color-yellow: #f2b24c;
    --scalar-color-blue: #5cb8ec;
    --scalar-color-orange: #ff9a66;
    --scalar-color-purple: #a48bff;
    --scalar-sidebar-background-1: #0f1218;
    --scalar-sidebar-color-1: #eef1f8;
    --scalar-sidebar-color-2: #b4bccb;
    --scalar-sidebar-color-active: #85a4ff;
    --scalar-sidebar-border-color: #262b36;
    --scalar-sidebar-item-hover-background: rgba(238, 241, 248, .06);
    --scalar-sidebar-item-hover-color: #eef1f8;
    --scalar-sidebar-item-active-background: rgba(97, 137, 255, .15);
    --scalar-sidebar-search-background: #12151c;
    --scalar-sidebar-search-border-color: #3a4150;
    --scalar-sidebar-search-color: #8d96a8;
}

/* Bloco "Usar com IA" injetado pelo reference.php */
.llms-sidebar { font-weight: 650 !important; color: var(--scalar-color-accent) !important; }
.llms-wrapper { margin-top: 20px; }
.llms-copy-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0 0 12px; padding: 0 18px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--scalar-button-1); color: var(--scalar-button-1-color);
    font: 600 14px/1 var(--ol-font);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -8px var(--scalar-button-1);
    transition: background-color .18s var(--ol-ease), transform .12s var(--ol-ease);
}
.llms-copy-btn:hover { background: var(--scalar-button-1-hover); }
.llms-copy-btn:active { transform: scale(.97); }
.llms-copy-btn:focus-visible { outline: 2px solid var(--scalar-color-accent); outline-offset: 3px; }
.llms-copy-btn.copied { background: var(--scalar-color-green); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -8px var(--scalar-color-green); }
.llms-pre {
    margin: 4px 0 0; padding: 14px 16px; max-height: 420px; overflow-y: auto; white-space: pre-wrap;
    border: 1px solid var(--scalar-border-color); border-radius: 14px; background: var(--scalar-background-2);
    color: var(--scalar-color-2); font: 12px/1.6 var(--ol-mono);
}
@media (prefers-reduced-motion: reduce) {
    .llms-copy-btn { transition: none; }
}