@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --cor1: #102b46;
    --cor2: #164a6e;
    --cor3: #2479a5;
    --cor4: #39b9ad;
    --cor5: #f2a84a;
    --cor6: #f5f8fb;
    --cor7: #ffffff;
    --cor8: #1a2a3a;
    --cor9: #627487;
    --cor10: #dce6ee;
    --cor11: #e8f7f4;
    --sombra: 0 20px 55px rgba(16, 43, 70, .10);
    --raio: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--cor8); background: var(--cor7); font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px clamp(20px, 5vw, 84px); border-bottom: 1px solid rgba(220,230,238,.75); background: rgba(255,255,255,.96); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.brand, .footer-brand { display: flex; align-items: center; gap: 13px; min-width: max-content; }
.brand img { width: 54px; height: 48px; object-fit: contain; }
.brand-divider { height: 34px; width: 1px; background: var(--cor10); }
.brand-copy { display: grid; line-height: 1.2; gap: 5px; }
.brand-copy strong { font-family: Manrope, sans-serif; color: var(--cor1); font-size: 17px; }
.brand-copy small { color: var(--cor9); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.topnav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); font-size: 13px; font-weight: 700; color: #4c6073; }
.topnav a:hover { color: var(--cor3); }
.topnav .nav-cta { border: 1px solid var(--cor10); border-radius: 10px; padding: 10px 14px; color: var(--cor1); }
.menu-toggle { display: none; background: none; border: 1px solid var(--cor10); border-radius: 9px; padding: 8px 12px; color: var(--cor1); }
.hero { overflow: hidden; position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 4vw; padding: 76px clamp(22px, 7.5vw, 120px) 86px; background: radial-gradient(ellipse at 83% 40%, rgba(57,185,173,.18), transparent 38%), linear-gradient(125deg, #f4f9fc 0%, #fff 55%, #edf8f7 100%); }
.hero-content { max-width: 690px; position: relative; z-index: 2; }
.eyebrow, .section-kicker { color: var(--cor3); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cor4); box-shadow: 0 0 0 5px rgba(57,185,173,.13); }
h1, h2, h3 { font-family: Manrope, sans-serif; line-height: 1.18; }
.hero h1 { color: var(--cor1); font-size: clamp(36px, 4.2vw, 62px); letter-spacing: -.045em; margin: 24px 0 22px; font-weight: 800; }
.hero h1 span { color: var(--cor3); }
.hero-content > p { color: #607488; max-width: 580px; font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; gap: 18px; border-radius: 11px; padding: 14px 20px; font-size: 14px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--cor1); box-shadow: 0 12px 22px rgba(16,43,70,.18); }
.button-primary span { font-size: 19px; }
.button-secondary { color: var(--cor1); border: 1px solid #cbd9e4; background: white; }
.hero-meta { display: flex; gap: 23px; margin-top: 29px; color: #627487; font-size: 12px; font-weight: 700; }
.mini-check { color: #14998b; font-style: normal; margin-right: 5px; }
.hero-visual { position: relative; min-width: 0; padding: 25px 0; }
.glow { position: absolute; inset: 12% 5%; background: rgba(57,185,173,.18); filter: blur(55px); border-radius: 50%; }
.api-card { position: relative; z-index: 1; background: #102337; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; overflow: hidden; color: #e8f1f7; box-shadow: 0 30px 70px rgba(16,43,70,.25); transform: rotate(1deg); }
.api-card-top { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1); color: #9eb2c3; font-size: 11px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { display: block; width: 7px; height: 7px; background: #597286; border-radius: 50%; }
.live-pill { margin-left: auto; color: #6fe1c9; border: 1px solid rgba(111,225,201,.35); border-radius: 5px; padding: 3px 7px; font-size: 9px; letter-spacing: .1em; }
.code-line { padding: 23px 22px 15px; font-family: monospace; font-size: 12px; color: #c9d9e5; overflow-wrap: anywhere; }
.code-purple { color: #79d8ca; font-weight: 700; margin-right: 8px; }
.code-separator { height: 1px; background: rgba(255,255,255,.08); }
.api-card pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.9; padding: 15px 22px; margin: 0; color: #c7d8e6; }
.api-card pre b { color: #7fdac9; font-weight: 500; }
.api-card pre em { color: #f4c47c; font-style: normal; }
.api-card-bottom { padding: 13px 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; color: #7fdac9; }
.response-check { display: inline-grid; place-items: center; width: 17px; height: 17px; background: rgba(57,185,173,.18); border-radius: 50%; margin-right: 7px; }
.muted { color: #7890a3; }
.float-chip { position: absolute; z-index: 2; display: flex; gap: 9px; align-items: center; padding: 12px 16px; background: white; color: var(--cor1); box-shadow: 0 14px 32px rgba(16,43,70,.13); border: 1px solid #e3edf3; border-radius: 12px; font-size: 12px; font-weight: 700; }
.chip-one { top: 1px; right: -20px; }
.chip-two { bottom: 0; left: -28px; }
.notice-band { display: flex; align-items: center; gap: 15px; margin: 0; padding: 20px clamp(22px, 7.5vw, 120px); background: var(--cor1); color: #dce8f1; font-size: 13px; }
.notice-icon { color: #72d6c6; font-size: 24px; }
.notice-band p { flex: 1; margin: 0; }
.notice-band strong { color: white; }
.notice-band code { color: #80e2d0; font-size: 12px; overflow-wrap: anywhere; }
.section { padding: 90px clamp(22px, 7.5vw, 120px); }
.section-heading { max-width: 740px; margin-bottom: 36px; }
.section-heading h2 { color: var(--cor1); font-size: clamp(30px, 3vw, 42px); letter-spacing: -.035em; margin: 12px 0; }
.section-heading p { margin: 0; color: var(--cor9); font-size: 15px; line-height: 1.8; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 32px; }
.step-card { position: relative; padding: 27px; border: 1px solid var(--cor10); border-radius: var(--raio); background: white; box-shadow: 0 8px 24px rgba(16,43,70,.035); }
.step-number { position: absolute; right: 23px; top: 22px; color: #b7c8d5; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.step-icon { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 13px; background: #eaf7f5; font-size: 21px; }
.step-card h3 { margin: 22px 0 10px; color: var(--cor1); font-size: 18px; }
.step-card p { color: var(--cor9); font-size: 13px; margin: 0; line-height: 1.8; }
code { font-family: 'SFMono-Regular', Consolas, monospace; font-size: .92em; }
.step-card code, .rules-grid code { color: #135d7f; background: #edf5f9; border-radius: 4px; padding: 2px 4px; }
.code-panel { margin-top: 20px; border: 1px solid #dce6ee; border-radius: 15px; overflow: hidden; background: #fbfdff; }
.code-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 12px; }
.code-panel-heading h3 { color: var(--cor1); margin: 5px 0 0; font-size: 18px; }
.copy-button { border: 1px solid #cbd9e4; border-radius: 8px; background: white; color: var(--cor1); padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.copy-button:hover { border-color: var(--cor3); }
.code-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 17px 24px 22px; background: #102337; color: #d7e7f1; font-size: 12px; line-height: 1.9; overflow-x: auto; }
.code-panel-footer { padding: 12px 24px; background: #f3f8fb; border-top: 1px solid #e0eaf1; color: #667c8e; font-size: 12px; }
.resources-section { background: var(--cor6); }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.resource-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 21px; border: 1px solid var(--cor10); border-radius: 14px; background: white; transition: transform .2s, border-color .2s, box-shadow .2s; }
.resource-card:hover { transform: translateY(-3px); border-color: #b2d8df; box-shadow: 0 12px 30px rgba(16,43,70,.07); }
.resource-icon { display: grid; place-items: center; flex: 0 0 43px; height: 43px; border-radius: 12px; background: #eff7fa; font-size: 20px; }
.resource-text { display: grid; gap: 5px; min-width: 0; }
.resource-text strong { color: var(--cor1); font-size: 14px; }
.resource-text small { color: var(--cor9); font-size: 11px; line-height: 1.5; }
.resource-arrow { margin-left: auto; color: var(--cor3); }
.swagger-section { padding-bottom: 65px; }
.swagger-note { padding: 14px 18px; border-left: 3px solid var(--cor5); background: #fff8ed; color: #74582d; font-size: 13px; margin-bottom: 20px; }
#swagger-ui { border: 1px solid var(--cor10); border-radius: 14px; padding: 12px 18px; overflow: hidden; }
.swagger-ui .topbar { display: none; }
.swagger-ui .info { margin: 20px 0; }
.swagger-ui .info .title { font-family: Manrope, sans-serif; color: var(--cor1); }
.swagger-ui .opblock-tag { font-family: Manrope, sans-serif; color: var(--cor1); }
.rules-section { background: #f5f9fb; }
.rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px 40px; }
.rules-grid article { display: grid; grid-template-columns: 40px 1fr; column-gap: 15px; align-content: start; }
.rules-grid article > span { grid-row: span 2; color: var(--cor3); font-weight: 800; font-size: 13px; padding-top: 3px; }
.rules-grid h3 { margin: 0 0 8px; color: var(--cor1); font-size: 17px; }
.rules-grid p { margin: 0; color: var(--cor9); font-size: 13px; line-height: 1.8; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px clamp(22px, 7.5vw, 120px); background: #0b2033; color: #aabdc9; font-size: 12px; }
.footer-brand { color: white; gap: 9px; }
.footer-brand img { width: 36px; height: 32px; object-fit: contain; }
.footer p { margin: 0; }
.footer > a:last-child { color: #7fdac9; font-weight: 700; }
@media (max-width: 1000px) {
    .topnav { gap: 13px; font-size: 12px; }
    .hero { grid-template-columns: 1fr .85fr; padding-top: 60px; }
    .chip-one { right: -8px; }
    .resource-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .topbar { min-height: 70px; }
    .brand img { width: 44px; height: 42px; }
    .brand-copy strong { font-size: 15px; }
    .brand-copy small { font-size: 9px; }
    .menu-toggle { display: block; }
    .topnav { display: none; position: absolute; left: 0; right: 0; top: 69px; padding: 14px 22px 20px; background: white; border-bottom: 1px solid var(--cor10); flex-direction: column; align-items: stretch; }
    .topnav.open { display: flex; }
    .topnav a { padding: 8px 0; }
    .topnav .nav-cta { text-align: center; }
    .hero { grid-template-columns: 1fr; padding: 55px 22px 65px; }
    .hero h1 { font-size: clamp(35px, 9vw, 50px); }
    .hero-content > p { font-size: 15px; }
    .hero-visual { margin: 10px 8px 0; }
    .chip-one { right: -12px; }
    .chip-two { left: -12px; }
    .notice-band { align-items: flex-start; flex-wrap: wrap; padding: 18px 22px; }
    .notice-band p { flex-basis: calc(100% - 45px); }
    .notice-band code { padding-left: 40px; }
    .section { padding: 65px 22px; }
    .steps-grid, .resource-grid, .rules-grid { grid-template-columns: 1fr; }
    .step-card { padding: 23px; }
    .code-panel-heading { padding: 17px 17px 10px; }
    .code-panel pre { padding: 16px 17px; font-size: 11px; }
    .code-panel-footer { padding: 12px 17px; }
    #swagger-ui { padding: 5px; }
    .swagger-ui .wrapper { padding: 0 5px; }
    .footer { align-items: flex-start; flex-direction: column; padding: 25px 22px; }
}


/* ==========================================================
   SELETOR LIGHT / DARK / AUTO — MAYA PETS DEVELOPERS
   ========================================================== */

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--cor10);
    border-radius: 12px;
    background: var(--cor6);
}

.theme-option {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--cor9);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.theme-option svg {
    width: 17px;
    height: 17px;
}

.theme-option:hover,
.theme-option.active {
    background: var(--cor7);
    color: var(--cor3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.theme-option:focus-visible {
    outline: 2px solid var(--cor4);
    outline-offset: 2px;
}

/* Variáveis do tema escuro: preserva o padrão --cor1, --cor2... */
html[data-theme="dark"] {
    --cor1: #e4effb;
    --cor2: #b4d5ed;
    --cor3: #68c6ed;
    --cor4: #45c7b6;
    --cor5: #f2b85f;
    --cor6: #101d2d;
    --cor7: #0c1522;
    --cor8: #e0ebf5;
    --cor9: #a4b7c9;
    --cor10: #304257;
    --cor11: #12342f;
    --sombra: 0 20px 55px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] body {
    background: var(--cor7);
    color: var(--cor8);
}

html[data-theme="dark"] .topbar {
    background: rgba(12, 21, 34, .96);
    border-color: var(--cor10);
}

html[data-theme="dark"] .topnav {
    color: #c3d3e1;
}

html[data-theme="dark"] .hero {
    background: radial-gradient(ellipse at 83% 40%, rgba(57, 185, 173, .13), transparent 38%),
                linear-gradient(125deg, #101f32 0%, #0c1522 55%, #122c31 100%);
}

html[data-theme="dark"] .hero-content > p,
html[data-theme="dark"] .hero-meta {
    color: var(--cor9);
}

html[data-theme="dark"] .button-primary {
    color: #0c1522;
    background: #7dd6e7;
}

html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .float-chip,
html[data-theme="dark"] .copy-button {
    color: var(--cor8);
    background: #172638;
    border-color: var(--cor10);
}

html[data-theme="dark"] .step-icon,
html[data-theme="dark"] .resource-icon {
    background: #203b47;
}

html[data-theme="dark"] .step-number {
    color: #839caf;
}

html[data-theme="dark"] .code-panel {
    background: #142235;
    border-color: var(--cor10);
}

html[data-theme="dark"] .code-panel-footer {
    background: #1b2b3c;
    border-color: var(--cor10);
    color: var(--cor9);
}

html[data-theme="dark"] .step-card code,
html[data-theme="dark"] .rules-grid code {
    color: #8bdaf0;
    background: #203548;
}

html[data-theme="dark"] .notice-band,
html[data-theme="dark"] .footer {
    background: #07101c;
}

html[data-theme="dark"] .notice-band strong,
html[data-theme="dark"] .footer-brand {
    color: #f3f8fc;
}

html[data-theme="dark"] .rules-section {
    background: #0f1b2b;
}

html[data-theme="dark"] .swagger-note {
    background: #352a1b;
    color: #f3d9a6;
}

html[data-theme="dark"] #swagger-ui {
    background: #101b2a;
    border-color: var(--cor10);
}

html[data-theme="dark"] .topnav.open {
    background: #101d2d;
}

/* Swagger UI: todas as áreas principais no modo escuro. */
html[data-theme="dark"] .swagger-ui,
html[data-theme="dark"] .swagger-ui .wrapper,
html[data-theme="dark"] .swagger-ui .scheme-container,
html[data-theme="dark"] .swagger-ui .opblock-tag-section,
html[data-theme="dark"] .swagger-ui .information-container,
html[data-theme="dark"] .swagger-ui .responses-wrapper {
    background: transparent;
    color: #e0ebf5;
}

html[data-theme="dark"] .swagger-ui .scheme-container {
    box-shadow: none;
    border-top: 1px solid #304257;
    border-bottom: 1px solid #304257;
}

html[data-theme="dark"] .swagger-ui :is(
    .info .title, .info p, .info li, .info a, .info .base-url,
    .opblock-tag, .opblock-summary-description, .opblock-description-wrapper,
    .opblock-description-wrapper p, .opblock-external-docs-wrapper,
    .opblock-title_normal, .opblock-section-header h4,
    .parameter__name, .parameter__type, .parameter__in,
    .response-col_status, .response-col_description,
    .responses-inner h4, .responses-inner h5, .tab li,
    .model-title, .model, .model span, .model-box,
    label, .markdown p, .markdown li, .renderedMarkdown p,
    .servers-title, .servers > label, .auth-container h4,
    .auth-container label, .dialog-ux .modal-ux-header h3,
    .dialog-ux .modal-ux-content p, .dialog-ux .modal-ux-content label
) {
    color: #e0ebf5;
}

html[data-theme="dark"] .swagger-ui .opblock {
    color: #e0ebf5;
}

html[data-theme="dark"] .swagger-ui .opblock .opblock-section-header,
html[data-theme="dark"] .swagger-ui .model-box,
html[data-theme="dark"] .swagger-ui section.models,
html[data-theme="dark"] .swagger-ui section.models .model-container,
html[data-theme="dark"] .swagger-ui .responses-table,
html[data-theme="dark"] .swagger-ui .parameters-container,
html[data-theme="dark"] .swagger-ui .highlight-code,
html[data-theme="dark"] .swagger-ui .microlight,
html[data-theme="dark"] .swagger-ui .response-col_description__inner {
    background: #172638;
    color: #e0ebf5;
}

html[data-theme="dark"] .swagger-ui .opblock.opblock-get {
    background: rgba(55, 155, 219, .12);
}

html[data-theme="dark"] .swagger-ui .opblock.opblock-post {
    background: rgba(69, 199, 182, .12);
}

html[data-theme="dark"] .swagger-ui .opblock.opblock-put,
html[data-theme="dark"] .swagger-ui .opblock.opblock-patch {
    background: rgba(242, 184, 95, .12);
}

html[data-theme="dark"] .swagger-ui .opblock.opblock-delete {
    background: rgba(239, 115, 124, .12);
}

html[data-theme="dark"] .swagger-ui :is(input, textarea, select, .parameter__empty_value_toggle) {
    background: #0c1522;
    color: #e0ebf5;
    border-color: #42546b;
}

html[data-theme="dark"] .swagger-ui :is(input, textarea)::placeholder {
    color: #9eb0c2;
}

html[data-theme="dark"] .swagger-ui .btn:not(.authorize) {
    color: #e0ebf5;
    border-color: #60758b;
}

html[data-theme="dark"] .swagger-ui .btn.authorize {
    color: #75d8bc;
    border-color: #75d8bc;
}

html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux,
html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-header,
html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-content {
    background: #172638;
    color: #e0ebf5;
    border-color: #304257;
}

html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-header h3,
html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-content h4,
html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-content code,
html[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-content .auth-btn-wrapper {
    color: #e0ebf5;
}

html[data-theme="dark"] .swagger-ui :is(table thead tr td, table thead tr th, table tbody tr td, table tbody tr th) {
    color: #e0ebf5;
    border-color: #304257;
}

html[data-theme="dark"] .swagger-ui :is(.opblock-summary-path, .opblock-summary-method, .opblock-summary-control, .model-toggle) {
    color: #e0ebf5;
}

html[data-theme="dark"] .swagger-ui svg:not(.arrow) {
    fill: currentColor;
}

@media (max-width: 760px) {
    .topbar-actions {
        margin-left: auto;
        gap: 8px;
    }

    .theme-option {
        width: 30px;
        height: 32px;
    }
}