:root {
    --suite-main: #fbbc05;
    --suite-main-rgb: 251, 188, 5;
    --suite-blue: #0842a0;
    --suite-section: #168dcc;
    --suite-link: #0788f5;
    --suite-text: #212529;
    --suite-muted: #586b7d;
    --suite-border: #dee2e6;
    --suite-soft: #f1f3f5;
    --doc-sidebar: 300px;
    --doc-sidebar-collapsed: 100px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { background: #fff; color: var(--suite-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.5; }
a { color: #007bff; }
a:hover { color: #0056b3; }

/* Estrutura principal: mesmas proporções do CNIS Municipal. */
.doc-app { display: flex; min-height: 100vh; }
.doc-content { margin-left: var(--doc-sidebar); padding: 0 20px 20px; transition: margin .3s, width .3s; width: calc(100vw - var(--doc-sidebar)); }
.doc-content.sidebar-collapsed { margin-left: var(--doc-sidebar-collapsed); width: calc(100vw - var(--doc-sidebar-collapsed)); }
.doc-main { padding: 1.5rem 0; }
.doc-container { margin: 0 auto; max-width: 1340px; padding: 0 15px; width: 100%; }

/* Sidebar */
.doc-sidebar { border-right: 1px solid var(--suite-main); height: 100vh; height: 100dvh; inset: 0 auto 0 0; overflow: visible; padding-top: 20px; position: fixed; transition: transform .25s, width .3s; width: var(--doc-sidebar); z-index: 1040; }
.doc-sidebar.collapsed { width: var(--doc-sidebar-collapsed); }
.doc-sidebar-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.doc-sidebar-brand { align-items: center; display: flex; flex: 0 0 auto; justify-content: center; margin: 1rem 0; min-height: 50px; padding: 0 .5rem; }
.doc-sidebar-brand img { max-height: 50px; max-width: 160px; object-fit: contain; width: 100%; }
.doc-sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 16px 16px; }
.doc-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.doc-sidebar-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, .08); border-radius: 6px; }
.doc-sidebar-scroll::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 6px; }
.doc-sidebar-toggle { align-items: center; background: #fff; border: 1px solid var(--suite-main); border-radius: 50%; display: flex; height: 36px; justify-content: center; outline: 0; position: absolute; right: -24px; top: 50%; width: 36px; z-index: 10; }
.doc-expand-icon { display: none; }
.doc-sidebar-section-title { color: #6c757d; display: block; font-size: 1rem; font-weight: 700; margin: .65rem 1px .35rem; }
.doc-sidebar-user { align-items: center; color: var(--suite-text); display: flex; gap: .55rem; margin: .2rem 0 1rem; padding: .35rem 0; text-decoration: none; }
.doc-sidebar-user:hover { color: var(--suite-text); text-decoration: none; }
.doc-sidebar-user > i { flex: 0 0 45px; font-size: 2.6rem; text-align: center; }
.doc-user-copy { min-width: 0; }
.doc-user-copy strong, .doc-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-user-copy small { color: var(--suite-text); font-size: 1rem; }
.doc-profile-edit { font-size: .9rem; }
.doc-navigation { width: 100%; }
.doc-menu-section { margin-top: .65rem; }
.doc-menu-item { align-items: center; background: transparent; border: 0; border-radius: 4px; color: #3f464d; display: flex; font-size: 1.10rem; gap: .55rem; margin: .2rem 0; min-height: 42px; padding: .5rem 1rem; position: relative; text-align: left; text-decoration: none; transition: background .15s, color .15s; width: 100%; }
.doc-menu-item i { flex: 0 0 24px; text-align: center; }
.doc-menu-item:hover { background: #f4f4f5; color: #343a40; font-weight: 700; text-decoration: none; }
.doc-menu-item.active { background: var(--suite-main); color: #fff; font-weight: 700; }
.doc-menu-item.active:hover { background: var(--suite-main); color: #fff; }
.doc-sidebar-footer { background: #fff; box-shadow: 0 -2px 5px rgba(0, 0, 0, .1); flex: 0 0 auto; padding: 10px; width: 100%; z-index: 5; }
.doc-sidebar-footer form { border: 1px solid var(--suite-border); margin: 0 auto; width: 90%; }
.doc-logout-button { justify-content: center; margin: 0; }
.doc-sidebar.collapsed .doc-sidebar-label,
.doc-sidebar.collapsed .doc-sidebar-section-title,
.doc-sidebar.collapsed .doc-user-copy { display: none; }
.doc-sidebar.collapsed .doc-sidebar-brand img { max-width: 74px; }
.doc-sidebar.collapsed .doc-sidebar-scroll { overflow-x: visible; padding-left: 10px; padding-right: 10px; }
.doc-sidebar.collapsed .doc-sidebar-user,
.doc-sidebar.collapsed .doc-menu-item { justify-content: center; padding-left: .4rem; padding-right: .4rem; }
.doc-sidebar.collapsed .doc-menu-item i { flex-basis: auto; font-size: 24px; }
.doc-sidebar.collapsed .doc-sidebar-user > i { flex-basis: auto; }
.doc-sidebar.collapsed .doc-collapse-icon { display: none; }
.doc-sidebar.collapsed .doc-expand-icon { display: inline; }

/* Cabeçalho existe apenas no mobile, como no CNIS. */
.doc-topbar { display: none; }
.doc-sidebar-overlay { display: none; }

/* Cards, títulos e toolbars */
.doc-page-header { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.doc-page-title { color: var(--suite-blue); font-size: 25px; font-weight: 400; margin: 0; }
.doc-page-description { color: var(--suite-muted); font-size: .9rem; margin: .2rem 0 0; }
.doc-card { background: #fff; border: 0; border-radius: 12px; box-shadow: 2px 0 31px -12px rgba(0, 0, 0, .29); }
.doc-card-header { align-items: center; background: #fff; border-bottom: 1px solid var(--suite-border); display: flex; gap: .75rem; justify-content: space-between; padding: .75rem 1.25rem; }
.doc-card-header > strong { color: var(--suite-section); font-size: 1.15rem; font-weight: 600; }
.doc-card-body { padding: 1rem 1.25rem; }
.doc-card-footer { background: #fff; border-top: 1px solid var(--suite-border); padding: .9rem 1.25rem; }
.doc-list-card-title { color: var(--suite-blue); font-size: 25px; font-weight: 400; margin: 0; }
.doc-list-header { align-items: center; display: grid; gap: 1rem; grid-template-columns: minmax(180px, 1fr) auto; }
.doc-list-toolbar, .doc-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.doc-list-toolbar-nowrap { flex-wrap: nowrap; }
.doc-list-toolbar-nowrap .btn-doc-primary { white-space: nowrap; }
.doc-search { display: flex; min-width: 240px; }
.doc-search .form-control { border-bottom-right-radius: 0; border-top-right-radius: 0; min-width: 0; }
.doc-search .btn { border-bottom-left-radius: 0; border-top-left-radius: 0; }
.doc-list-total { color: var(--suite-muted); font-size: .9rem; margin: 0 0 .75rem; }
.doc-list-total-bottom { color: var(--suite-muted); font-size: .9rem; margin-top: .85rem; }
.doc-pagination-row { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-top: 1rem; }
.doc-per-page { align-items: center; color: var(--suite-muted); display: flex; font-size: .9rem; gap: .5rem; margin: 0; white-space: nowrap; }
.doc-per-page select { background: #fff; border: 1px solid #ced4da; border-radius: .25rem; height: 32px; padding: .2rem .45rem; width: 70px; }
.doc-list-legend { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; }
.doc-list-legend span { align-items: center; display: inline-flex; gap: .35rem; }

/* Botões e badges: convenção semântica idêntica ao CNIS. */
.btn-doc-primary { background: #28a745; border-color: #28a745; color: #fff; }
.btn-doc-primary:hover, .btn-doc-primary:focus { background: #218838; border-color: #1e7e34; color: #fff; }
.btn-doc-soft { background: #007bff; border-color: #007bff; color: #fff; }
.btn-doc-soft:hover, .btn-doc-soft:focus { background: #0069d9; border-color: #0062cc; color: #fff; }
.doc-action { align-items: center; border-radius: .25rem; display: inline-flex; height: 38px; justify-content: center; min-width: 48px; padding: .375rem .75rem; }
.doc-badge { background: #6c757d; border-radius: .2rem; color: #fff; display: inline-block; font-size: .75rem; font-weight: 700; line-height: 1; padding: .28em .45em; }
.badge { border-radius: .2rem; }

/* Tabelas e paginação */
.doc-table-wrap { overflow-x: auto; }
.doc-table { margin-bottom: 0; width: 100%; }
.doc-table thead th { border-bottom: 2px solid var(--suite-border); border-top: 0; color: #111; font-size: 1rem; font-weight: 700; padding: .75rem; text-transform: none; vertical-align: bottom; white-space: nowrap; }
.doc-table td { border-top: 1px solid var(--suite-border); padding: .75rem; vertical-align: middle; }
.doc-table td .doc-action { margin: .15rem .1rem; }
.doc-table tbody tr:hover { background: rgba(0, 0, 0, .018); }
.doc-mobile-list { display: none; }
.pagination { flex-wrap: wrap; margin-bottom: 0; }
.page-item.active .page-link { background: #007bff; border-color: #007bff; }
.page-link { color: #007bff; padding: .5rem .75rem; }

/* Cards mobile das listagens */
.doc-mobile-list-toggle { align-items: center; display: flex; justify-content: flex-end; margin: 0 0 .7rem; min-height: 24px; }
.doc-mobile-list-toggle .custom-control-label { color: var(--suite-text); cursor: pointer; font-size: .9rem; }
.doc-mobile-list-toggle .custom-switch .custom-control-label::before { border-color: #adb5bd; }
.doc-mobile-list-toggle .custom-control-input:checked ~ .custom-control-label::before { background-color: #1689f8; border-color: #1689f8; }
.doc-mobile-list-toggle .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: #1689f8; border-color: #1689f8; }
.doc-mobile-card { background: #fff; border: 1px solid #e1e5e8; border-left: 3px solid var(--suite-link); border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); margin-bottom: .9rem; overflow: hidden; }
.doc-mobile-card-summary { cursor: pointer; list-style: none; padding: .75rem; position: relative; }
details > .doc-mobile-card-summary { padding-right: 2.8rem; }
details > .doc-mobile-card-summary::-webkit-details-marker { display: none; }
details > .doc-mobile-card-summary::after { align-items: center; background: var(--suite-soft); border-radius: 50%; color: #123b5d; content: '\f078'; display: flex; font-family: "Font Awesome 6 Free"; font-size: .68rem; font-weight: 900; height: 26px; justify-content: center; position: absolute; right: .65rem; top: .65rem; transition: transform .15s; width: 26px; }
details[open] > .doc-mobile-card-summary::after { transform: rotate(180deg); }
.doc-mobile-card-title { color: var(--suite-text); display: block; font-size: 1rem; font-weight: 700; }
.doc-mobile-card-meta { color: #6c757d; font-size: .85rem; margin-top: .2rem; }
.doc-mobile-card-details { border-top: 1px solid #edf0f2; padding: .75rem; }
.doc-mobile-field { display: grid; gap: .75rem; grid-template-columns: 38% 1fr; margin-bottom: .45rem; }
.doc-mobile-field strong { color: #6c757d; font-size: .88rem; }
.doc-mobile-field span { overflow-wrap: anywhere; text-align: right; }
.doc-mobile-actions { align-items: center; border-top: 1px solid #edf0f2; display: flex; flex-wrap: wrap; gap: .35rem; padding: .65rem .75rem; }
.doc-mobile-actions form { margin: 0; }

/* Formulários e seções expansíveis */
.doc-form-card { margin: 0 auto; max-width: 1116px; }
.doc-form-card > .doc-card-header { min-height: 58px; }
.doc-form-back { align-items: center; color: var(--suite-link); display: inline-flex; height: 28px; justify-content: center; margin-right: 5px; text-decoration: none; width: 28px; }
.doc-section { background: #fff; border: 0; border-bottom: 1px solid #ddd; border-radius: 0; margin: 0; overflow: visible; padding: 18px 6px; position: relative; }
.doc-section > summary { color: var(--suite-section); cursor: pointer; font-size: 20px; font-weight: 400; list-style: none; min-height: 30px; padding: 0 44px 0 0; position: relative; }
.doc-section > summary::-webkit-details-marker { display: none; }
.doc-section > summary::after { align-items: center; background: var(--suite-soft); border-radius: 50%; color: #123b5d; content: '\f107'; display: flex; font-family: "Font Awesome 6 Free"; font-size: .7rem; font-weight: 900; height: 28px; justify-content: center; position: absolute; right: 0; top: -1px; width: 28px; }
.doc-section:not([open]) > summary::after { content: '\f105'; }
.doc-section-content { border: 0; padding: 1rem 0 0; }
.doc-required { color: #dc3545; }
.doc-form-required-note { color: #dc3545; display: block; font-size: 13px; line-height: 1.2; margin: 0 6px .25rem; text-align: right; }
.doc-form-actions { align-items: center; background: #fff; border-top: 1px solid var(--suite-border); bottom: auto; display: flex; gap: .5rem; justify-content: flex-end; margin-top: 0; padding: .75rem; position: static; }
.doc-file-row, .doc-dynamic-row { align-items: end; background: #f8f9fa; border: 1px solid var(--suite-border); border-radius: .25rem; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr) auto; margin-bottom: .65rem; padding: .75rem; }
.doc-permission-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.doc-check-card { background: #fff; border: 1px solid var(--suite-border); border-radius: .25rem; padding: .65rem .75rem; }
.doc-scope-options { border-left: 3px solid var(--suite-link); margin-top: .8rem; padding-left: 1rem; }
.form-control, .custom-select { border-color: #ced4da; border-radius: .25rem; }
.form-control:focus, .custom-select:focus { border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }

/* Detalhes, dashboard, perfil e configurações */
.doc-meta-list { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.doc-meta-item { background: #f5f5f5; border-radius: .2rem; padding: .75rem; }
.doc-meta-item small { color: #6c757d; display: block; margin-bottom: .2rem; }
.doc-meta-item strong { color: var(--suite-text); }
.doc-pre { background: #343a40; border-radius: .25rem; color: #f8f9fa; font-size: .82rem; max-height: 420px; overflow: auto; padding: 1rem; white-space: pre-wrap; }
.doc-profile-avatar { align-items: center; background: var(--suite-soft); border-radius: 50%; color: var(--suite-blue); display: inline-flex; font-size: 1.4rem; height: 52px; justify-content: center; width: 52px; }
.doc-kpi { height: 100%; padding: 1.15rem; }
.doc-kpi-icon { align-items: center; background: rgba(0, 123, 255, .1); border-radius: .35rem; color: var(--suite-blue); display: flex; font-size: 1.3rem; height: 46px; justify-content: center; width: 46px; }
.doc-kpi-value { color: var(--suite-blue); font-size: 1.7rem; font-weight: 700; margin-top: .75rem; }
.doc-kpi-label { color: var(--suite-muted); font-size: .9rem; }
.auxiliary-static-value { background: #f5f5f5; border: 1px solid var(--suite-border); border-radius: .25rem; min-height: 38px; overflow-wrap: anywhere; padding: .55rem .75rem; white-space: pre-wrap; }
.doc-settings-nav .nav-link { border-radius: .25rem; color: var(--suite-text); }
.doc-settings-nav .nav-link.active { background: #007bff; color: #fff; }
.doc-empty { color: #6c757d; padding: 2.25rem 1rem; text-align: center; }
.doc-empty i { color: #adb5bd; display: block; font-size: 2rem; margin-bottom: .6rem; }

/* Modais Bootstrap no padrão CNIS. */
.modal-content { border: 1px solid rgba(0, 0, 0, .2); border-radius: .3rem; }
.modal-header { align-items: flex-start; border-bottom: 1px solid var(--suite-border); padding: 1rem; }
.modal-header h5, .modal-title { color: var(--suite-blue); font-size: 1.25rem; margin: 0; }
.modal-body { padding: 1rem; }
.modal-footer { border-top: 1px solid var(--suite-border); padding: .75rem; }

/* Loading */
.doc-global-loading { align-items: center; background: rgba(0, 0, 0, .48); display: none; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 2000; }
.doc-global-loading.show { display: flex; }
.doc-global-loading-card { align-items: center; background: #fff; border-radius: .3rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); display: flex; flex-direction: column; gap: .45rem; min-width: 210px; padding: 1.25rem 1.5rem; text-align: center; }
.doc-global-loading-card small { color: #6c757d; }
.doc-global-spinner { animation: doc-spin .75s linear infinite; border: 3px solid #dee2e6; border-radius: 50%; border-top-color: #007bff; height: 34px; width: 34px; }
@keyframes doc-spin { to { transform: rotate(360deg); } }

/* Área pública e login */
.doc-guest-body { background: #fff; }
.doc-guest-header { background: var(--suite-main); box-shadow: -1px 4px 11px -9px rgba(0, 0, 0, .56); padding-bottom: .8rem; }
.doc-guest-header .navbar { min-height: 94px; }
.doc-guest-brand img { max-height: 50px; max-width: 160px; object-fit: contain; width: 160px; }
.doc-guest-links { gap: .4rem; }
.doc-guest-main { min-height: calc(100vh - 107px); }
.doc-login-card { border: 0; border-radius: 12px; box-shadow: 2px 0 31px -12px rgba(0, 0, 0, .29); margin-top: 3rem; overflow: hidden; }
.doc-login-heading { margin-top: 3rem; padding: 0 1.25rem; text-align: center; }
.doc-login-heading h1 { color: var(--suite-text); font-weight: 500; }
.doc-login-card .card-body { padding: 1.25rem; }
.doc-password-toggle { background: #e9ecef; border: 1px solid #c1c1c1; color: #123b5d; min-width: 50px; }

@media (max-width: 900px) {
    .doc-sidebar { border: 0; display: block; padding-bottom: 30px; transform: translateX(-105%); width: 300px; }
    .doc-sidebar.show { transform: translateX(0); }
    .doc-sidebar.collapsed { width: 300px; }
    .doc-sidebar.collapsed .doc-sidebar-label, .doc-sidebar.collapsed .doc-sidebar-section-title, .doc-sidebar.collapsed .doc-user-copy { display: initial; }
    .doc-sidebar.collapsed .doc-menu-item, .doc-sidebar.collapsed .doc-sidebar-user { justify-content: flex-start; }
    .doc-sidebar-toggle { display: none; }
    .doc-content, .doc-content.sidebar-collapsed { margin-left: 0; padding: 0; width: 100vw; }
    .doc-main { padding-top: 1.5rem; }
    .doc-topbar { align-items: center; background: var(--suite-main); display: flex; min-height: 74px; padding-bottom: .8rem; position: sticky; top: 0; z-index: 1030; }
    .doc-topbar::before { background: #fff; content: ''; inset: 0 0 .8rem; position: absolute; z-index: -1; }
    .doc-menu-toggle { background: #fff; border: 1px solid var(--suite-border); border-radius: .25rem; height: 42px; margin-left: 15px; width: 50px; }
    .doc-mobile-brand-link { margin: auto; }
    .doc-mobile-brand { display: block; max-height: 50px; max-width: 160px; object-fit: contain; }
    .doc-topbar-spacer { margin-right: 15px; width: 50px; }
    .doc-sidebar-overlay { background: rgba(0, 0, 0, .5); inset: 0; position: fixed; z-index: 1035; }
    .doc-sidebar-overlay.show { display: block; }
    .doc-settings-nav { flex-direction: row !important; flex-wrap: nowrap; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; }
    .doc-settings-nav .nav-link { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 767.98px) {
    .doc-container { padding-left: 15px; padding-right: 15px; }
    .doc-page-header { align-items: stretch; flex-direction: column; }
    .doc-page-title, .doc-list-card-title { font-size: 23px; }
    .doc-card-header { align-items: stretch; flex-direction: column; padding: 1rem; }
    .doc-card-body, .doc-card-footer { padding: 1rem; }
    .doc-list-header { align-items: stretch; display: flex; flex-direction: column; }
    .doc-list-toolbar, .doc-toolbar { align-items: stretch; display: grid; grid-template-columns: 1fr auto; width: 100%; }
    .doc-list-toolbar .custom-select, .doc-toolbar .custom-select { grid-column: 1 / -1; max-width: none !important; width: 100%; }
    .doc-search { min-width: 0; width: 100%; }
    .doc-list-toolbar > .btn-doc-primary, .doc-toolbar > .btn-doc-primary, .doc-list-toolbar > a.btn-success { grid-column: 1 / -1; width: 100%; }
    .doc-desktop-table { display: none; }
    .doc-mobile-list { display: block; }
    .doc-pagination-row { align-items: flex-start; flex-direction: column; }
    .doc-pagination-row nav { max-width: 100%; overflow-x: auto; }
    .doc-list-legend { align-items: flex-start; flex-direction: column; }
    .doc-form-card { max-width: 100%; }
    .doc-form-card .doc-card-body { padding: .75rem; }
    .doc-section { padding-left: 6px; padding-right: 6px; }
    .doc-form-actions { flex-wrap: wrap; }
    .doc-form-actions .btn { flex: 1 1 auto; }
    .doc-dynamic-row, .doc-file-row { align-items: stretch; grid-template-columns: 1fr; }
    .doc-dynamic-row .btn { width: 100%; }
    .doc-mobile-field { grid-template-columns: 38% 1fr; }
    .doc-guest-header .navbar { min-height: 78px; }
    .doc-guest-brand img { width: 140px; }
    .doc-guest-links .nav-link { padding-left: .35rem; padding-right: .35rem; }
    .doc-login-card { margin-top: 1.5rem; }
}

@media (max-width: 420px) {
    .doc-mobile-field { grid-template-columns: 1fr; gap: .15rem; }
    .doc-mobile-field span { text-align: left; }
    .doc-guest-brand img { width: 115px; }
    .doc-guest-links { font-size: .9rem; }
}