/* ==========================================================================
   FaceTiss - Design System
   Verde opaco, clean, padronizado. Botoes sempre solidos, nunca outline.
   ========================================================================== */

:root {
    /* Verde tradicional SB 18 de Julho */
    --green-900: #1f4200;
    /* hover / mais escuro */
    --green-800: #2e6000;
    --green-700: #3a7b00;
    /* primaria */
    --green-600: #479400;
    --green-500: #5ab800;
    --green-100: #e6f1da;
    --green-050: #f2f8ec;

    /* Neutros */
    --ink: #1e2a24;
    --muted: #5f6f67;
    --muted-soft: #8a988f;
    --line: #dde5e0;
    --line-soft: #eaf0ec;
    --bg: #f3f6f4;
    --surface: #ffffff;
    /* Aliases usados por telas/componentes (bordas visiveis + texto). Casam com os tokens
       do design system; sem eles, var(--border)/var(--text) ficavam invalidos e nao renderizavam. */
    --border: var(--line);
    --text: var(--ink);

    /* Estados */
    --danger: #b23a2c;
    --danger-bg: #fbeae7;
    --warning: #a86a1a;
    --warning-bg: #fbf1e0;
    --ok: var(--green-700);

    /* Forma */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;

    /* Sombras suaves, nada exagerado */
    --shadow-sm: 0 1px 2px rgba(22, 54, 42, 0.06);
    --shadow-md: 0 6px 18px rgba(22, 54, 42, 0.08);
    --shadow-lg: 0 18px 44px rgba(22, 54, 42, 0.12);

    /* Tipografia */
    --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Layout */
    --sidebar-w: 264px;
    --topbar-h: 64px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Barras de rolagem clean, com tom verde suave (Firefox + WebKit) */
* {
    scrollbar-width: thin;
    scrollbar-color: #c3d3c6 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c3d3c6;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--green-500);
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Sidebar escura: thumb claro translúcido */
.sidebar {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.sidebar ::-webkit-scrollbar-thumb,
.nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    background-clip: padding-box;
}

.sidebar ::-webkit-scrollbar-thumb:hover,
.nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
    background-clip: padding-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--green-700);
    text-decoration: none;
}

a:hover {
    color: var(--green-800);
}

/* Garante que o atributo hidden vença classes com display (ex.: .load-inline flex) */
[hidden] {
    display: none !important;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

:focus-visible {
    outline: 3px solid rgba(47, 107, 79, 0.35);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---------- Botoes: sempre solidos ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.btn:active {
    transform: translateY(1px);
}

.btn-block {
    width: 100%;
}

.btn-primary {
    background: var(--green-700);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--green-900);
    color: #fff;
}

.btn-muted {
    background: var(--green-100);
    color: var(--green-800);
}

.btn-muted:hover {
    background: #d8e6dd;
}

.btn-ghost {
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--line-soft);
    color: var(--ink);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: #97301f;
    color: #fff;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.btn-sm {
    height: 36px;
    padding: 0 14px;
    font-size: 14px;
}

/* ---------- Formularios ---------- */
.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input::placeholder {
    color: var(--muted-soft);
}

select.input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6f67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;
    cursor: pointer;
}

.input:focus {
    outline: none;
    border-color: var(--green-600);
    box-shadow: 0 0 0 3px rgba(47, 107, 79, 0.15);
}

.field-hint {
    margin: 7px 0 0;
    font-size: 12.5px;
    color: var(--muted-soft);
}

.input[readonly] {
    background: var(--green-050);
    color: var(--muted);
    cursor: default;
    border-color: var(--line-soft);
}

.input[readonly]:focus {
    box-shadow: none;
    border-color: var(--line);
}

.input:disabled {
    background: var(--green-050);
    color: var(--muted-soft);
    border-color: var(--line-soft);
    cursor: not-allowed;
    opacity: 0.7;
}

.input:disabled::placeholder {
    color: var(--line);
}

.dados-cnpj-nota {
    margin: 6px 0 14px;
    font-size: 12.5px;
    color: var(--muted-soft);
}

.input-group {
    position: relative;
}

.input-group .input {
    padding-right: 44px;
}

.input-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 46px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--muted-soft);
    cursor: pointer;
}

.input-toggle:hover {
    color: var(--muted);
}

/* ---------- Alerta ---------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 18px;
}

.alert-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.alert-ok {
    background: var(--green-100);
    color: var(--green-800);
}

.alert svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

/* ==========================================================================
   Tela de login
   ========================================================================== */
.login-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.login-page .auth {
    flex: 1 1 auto;
    min-height: 0;
}

.auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

.auth-brand {
    position: relative;
    overflow: hidden;
    color: #eaf3ee;
    background:
        radial-gradient(120% 90% at 85% 90%, rgba(90, 184, 0, 0.30) 0%, transparent 55%),
        linear-gradient(135deg, #479400 0%, #3a7b00 44%, #2e6000 100%);
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-brand__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brandmark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.14);
    display: grid;
    place-items: center;
    color: #fff;
}

.brandmark svg {
    width: 22px;
    height: 22px;
}

.auth-brand__id {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.auth-brand__name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

.auth-brand__sub {
    font-size: 13px;
    color: rgba(234, 243, 238, 0.66);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.auth-brand__center {
    max-width: 380px;
}

.auth-brand__center h1 {
    color: #fff;
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 12px;
}

.auth-brand__center p {
    margin: 0;
    color: rgba(234, 243, 238, 0.82);
    font-size: 14px;
    line-height: 1.6;
}

.auth-brand__foot {
    font-size: 13px;
    color: rgba(234, 243, 238, 0.66);
}

.auth-form {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--surface);
}

.auth-card {
    width: 100%;
    max-width: 380px;
}

.auth-card__head {
    margin-bottom: 26px;
}

.auth-card__head h2 {
    font-size: 23px;
    margin-bottom: 6px;
    color: var(--green-800);
}

.auth-card__head p {
    margin: 0;
    color: var(--muted);
    font-size: 14.5px;
}

.form-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 22px;
    font-size: 13.5px;
}

.auth-foot {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
    color: var(--muted-soft);
    text-align: center;
}

/* Trava anti-injeção do login: campos e botão ficam desabilitados por alguns
   segundos ao abrir a tela; o aviso com spinner some quando libera. */
.auth-lock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 16px;
    font-size: 12.5px;
    color: var(--muted-soft);
}

.auth-lock::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid var(--line);
    border-top-color: var(--green-600);
    border-radius: 50%;
    animation: authLockSpin 0.7s linear infinite;
}

@keyframes authLockSpin {
    to { transform: rotate(360deg); }
}

.login-page .input:disabled {
    background: var(--line-soft);
    cursor: not-allowed;
}

.login-page .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .auth-lock::before { animation: none; }
}

/* ==========================================================================
   Termo de consentimento
   ========================================================================== */
.consent-page {
    background: var(--green-900);
}

.consent {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
}

.consent__card {
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.consent__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--line);
}

.consent__head-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--green-100);
    color: var(--green-700);
    display: grid;
    place-items: center;
}

.consent__head h2 {
    font-size: 19px;
    color: var(--green-800);
}

.consent__head p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13.5px;
}

.consent__body {
    padding: 22px 26px;
    overflow-y: auto;
    font-size: 14.5px;
    color: var(--ink);
}

.consent__meta {
    background: var(--green-050);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--muted);
}

.consent__body h4 {
    font-size: 14.5px;
    margin: 18px 0 6px;
    color: var(--green-800);
}

.consent__body h4:first-of-type {
    margin-top: 0;
}

.consent__body p {
    margin: 0 0 8px;
    line-height: 1.6;
}

.consent__body ul {
    margin: 0 0 8px;
    padding-left: 20px;
    line-height: 1.6;
}

.consent__body li {
    margin-bottom: 4px;
}

.consent__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 26px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    flex-wrap: wrap;
}

.consent__logo {
    height: 52px;
    width: auto;
    flex: 0 0 auto;
}

.consent__sign {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.consent__sign>div {
    display: flex;
    flex-direction: column;
}

.consent__sign span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-soft);
    font-weight: 700;
}

.consent__sign strong {
    font-size: 14px;
    color: var(--ink);
}

.consent__key {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.06em;
    color: var(--green-700) !important;
}

.consent__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--muted);
}

.consent__brand img {
    height: 16px;
    width: auto;
}

.consent__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 560px) {
    .consent__sign {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Casca do painel
   ========================================================================== */
.app {
    min-height: 100vh;
    overflow-x: clip;
    /* Alterado de hidden para clip */
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--green-900);
    color: #cfe0d7;
    display: flex;
    flex-direction: column;
    z-index: 40;
}

.sidebar__brand {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 22px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar__brand .brandmark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.sidebar__brand .brandmark svg {
    width: 19px;
    height: 19px;
}

.sidebar__brand-id {
    display: flex;
    flex-direction: column;
    line-height: 1.12;
}

.sidebar__brand strong {
    font-size: 17px;
    font-weight: 700;
}

.sidebar__brand-sub {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.62);
}

.nav {
    padding: 14px 12px;
    overflow-y: auto;
    flex: 1;
}

.nav__label {
    padding: 9px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(207, 224, 215, 0.5);
}

.nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    color: #cfe0d7;
    font-weight: 500;
    font-size: 14.5px;
    margin-bottom: 1px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.nav__item svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    opacity: 0.9;
}

.nav__item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.nav__item.is-active {
    background: var(--green-700);
    color: #fff;
}

.main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 26px;
    z-index: 30;
}

.topbar__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.topbar__title-main {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

.topbar__sub {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 620px) {
    .topbar__sub {
        display: none;
    }
}

.topbar__spacer {
    flex: 1;
}

/* Busca rápida (atalhos) na topbar do Início */
.topbar__search {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.navsearch {
    position: relative;
    width: 100%;
    max-width: 380px;
}

.navsearch__icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-soft);
    pointer-events: none;
}

.navsearch__input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
}

.navsearch__input:focus {
    outline: none;
    border-color: var(--green-600);
    box-shadow: 0 0 0 3px rgba(58, 123, 0, 0.12);
}

.navsearch__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 5px;
    z-index: 40;
    max-height: 60vh;
    overflow-y: auto;
}

.navsearch__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 7px;
    color: var(--ink);
    text-decoration: none;
}

.navsearch__item small {
    color: var(--muted-soft);
    font-size: 11.5px;
    flex: 0 0 auto;
}

.navsearch__item:hover,
.navsearch__item.is-active {
    background: var(--green-050);
    color: var(--green-800);
}

.navsearch__empty {
    padding: 12px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 720px) {
    .topbar__search {
        display: none;
    }
}

.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: var(--green-100);
    color: var(--green-800);
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.usermenu {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.usermenu__info {
    text-align: right;
    line-height: 1.25;
}

.usermenu__name {
    font-size: 14px;
    font-weight: 600;
}

.usermenu__meta {
    font-size: 12px;
    color: var(--muted);
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--green-700);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
}

.content {
    padding: 26px;
    flex: 1;
    max-width: 100%;
}

.page-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 18px;
}

.page-head h1 {
    font-size: 22px;
}

.page-head p {
    margin: 0;
    color: var(--muted);
}

.page-head p::before {
    content: "·";
    margin-right: 12px;
    color: var(--muted-soft);
}

.page-head--row {
    flex-wrap: nowrap;
}

.page-head--row p::before {
    content: none;
}

.page-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 620px) {
    .page-head--row {
        flex-direction: column;
        align-items: stretch;
    }

    .page-head--row .btn {
        width: 100%;
    }
}

/* Barra fixa dos CRUDs */
.crud-bar {
    position: sticky;
    top: var(--topbar-h);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 0 14px;
    margin-bottom: 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.crud-bar__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crud-bar__title h1 {
    font-size: 20px;
}

.count-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--green-100);
    color: var(--green-800);
    font-size: 12.5px;
    font-weight: 700;
}

.crud-bar__tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crud-search {
    position: relative;
    display: flex;
    align-items: center;
}

.crud-search svg {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    color: var(--muted-soft);
    pointer-events: none;
}

.crud-search input {
    height: 42px;
    width: 260px;
    max-width: 60vw;
    padding: 0 34px 0 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    font: inherit;
    color: var(--ink);
}

.crud-search--empty input {
    padding-right: 14px;
}

.crud-search input:focus {
    outline: none;
    border-color: var(--green-600);
    box-shadow: 0 0 0 3px rgba(47, 107, 79, 0.15);
}

.crud-search__clear {
    position: absolute;
    right: 10px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--muted-soft);
    font-size: 18px;
    line-height: 1;
}

.crud-search__clear:hover {
    background: var(--line-soft);
    color: var(--ink);
}

@media (max-width: 620px) {
    .crud-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
        margin-bottom: 6px;
    }

    .crud-bar::-webkit-scrollbar {
        display: none;
    }

    .crud-bar__tools {
        flex-direction: row;
        align-items: center;
        white-space: nowrap;
    }

    .crud-search input {
        width: 150px;
        max-width: none;
    }

    .crud-bar__tools .btn {
        width: auto;
        white-space: nowrap;
    }

    .crud-bar__title {
        white-space: nowrap;
    }
}

/* Paginacao */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.pager__info {
    color: var(--muted);
    font-size: 13.5px;
}

.pager__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pager__page {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    padding: 0 4px;
}

.btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
}

.modal.is-open {
    display: block;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(22, 54, 42, 0.45);
}

.modal__card {
    position: relative;
    margin: 9vh auto 0;
    width: calc(100% - 32px);
    max-width: 480px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modalIn 0.14s ease;
}

@keyframes modalIn {
    from {
        transform: translateY(8px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.modal__head h3 {
    font-size: 17px;
    color: var(--green-800);
}

.modal__close {
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
}

.modal__close svg {
    width: 24px;
    height: 24px;
}

.modal__close:hover {
    background: var(--line-soft);
    color: var(--ink);
}

.modal__body {
    padding: 22px;
    max-height: 64vh;
    overflow-y: auto;
}

.form-row {
    display: grid;
    gap: 0 14px;
}

.form-row.r-2 {
    grid-template-columns: 1fr 1fr;
}

.form-row.r-end {
    grid-template-columns: 2.2fr 1fr;
}

.form-row.r-city {
    grid-template-columns: 2.2fr 0.8fr;
}

@media (max-width: 560px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--line);
}

.modal__ok-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-700);
    display: grid;
    place-items: center;
    margin: 22px auto 0;
}

/* Vínculos de responsáveis (duas colunas com foto) */
.vinc-top {
    margin-top: 4px;
    align-items: stretch;
}

.vinc-counters {
    display: flex;
    gap: 16px;
}

.vinc-counters .stat {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 620px) {
    .vinc-counters {
        flex-direction: column;
    }
}

.vinc-list {
    display: flex;
    flex-direction: column;
}

.vinc-head {
    display: grid;
    grid-template-columns: 1fr 24px 1.2fr 40px;
    gap: 12px;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 2px 0 8px;
}

.vinc-row {
    display: grid;
    grid-template-columns: 1fr 24px 1.2fr 40px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--line-soft);
}

.vinc-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vinc-foto {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--green-050);
}

.vinc-person .avatar-mini {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

.vinc-person__id {
    min-width: 0;
}

.vinc-person__id .cell-strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vinc-arrow {
    color: var(--muted-soft);
    justify-self: center;
}

.vinc-person__wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

@media (max-width: 620px) {
    .vinc-head {
        display: none;
    }

    .vinc-row {
        grid-template-columns: 1fr 34px;
    }

    .vinc-arrow {
        display: none;
    }

    .vinc-person__wrap {
        grid-column: 1;
    }
}

/* Diagnóstico do ambiente */
.diag-bar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.diag-progress {
    height: 8px;
    background: var(--green-050);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 14px;
}

.diag-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--green-500), var(--green-700));
    transition: width 0.3s ease;
}

.diag-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
    align-items: stretch;
}

.diag-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.diag-col>.card:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1040px) {
    .diag-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .diag-cols {
        grid-template-columns: 1fr;
    }
}

.diag-list {
    display: flex;
    flex-direction: column;
}

.diag-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 13.5px;
}

.diag-item:first-child {
    border-top: 0;
}

.diag-cam {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 10px 0;
    display: grid;
    place-items: center;
}

.diag-cam video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diag-cam__ph {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.diag-cam__ov {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
}

.diag-brands {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.diag-brands img {
    height: 20px;
    width: auto;
}

.diag-logs .diag-console {
    flex: 1 1 auto;
}

.diag-console {
    background: var(--green-900);
    color: #dbe8df;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    padding: 14px;
    border-radius: var(--radius-sm);
    min-height: 190px;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    margin-top: 12px;
}

.badge--err {
    background: #fde8e6;
    color: #b42318;
}

/* Ferramentas do superadmin (enroll / revalidação) */
.tool__stats {
    display: flex;
    gap: 24px;
    margin: 12px 0;
}

.tool__num {
    display: block;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tool__lbl {
    font-size: 12.5px;
    color: var(--muted);
}

.tool__bar {
    height: 8px;
    background: var(--green-050);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0 14px;
}

.tool__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--green-500), var(--green-700));
    border-radius: 999px;
    transition: width 0.3s ease;
}

.tool__log {
    margin-top: 14px;
    max-height: 240px;
    overflow-y: auto;
    font-size: 12.5px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.tool__log-line {
    padding: 3px 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool__log-line.is-ok {
    color: var(--green-700);
}

.tool__log-line.is-err {
    color: #b42318;
}

.tool__log-line.is-warn {
    color: #8a5a00;
}

.badge--run {
    background: var(--green-100);
    color: var(--green-800);
}

.badge--ok {
    background: var(--green-700);
    color: #fff;
}

/* Impersonação (acessar como outro usuário) */
.imp-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    background: #8a5a00;
    color: #fff;
    font-size: 13px;
}

.imp-bar>svg {
    flex: 0 0 auto;
    opacity: 0.9;
}

.imp-bar span {
    flex: 1 1 auto;
}

.imp-bar strong {
    font-weight: 700;
}

.imp-bar__back {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.imp-bar__back:hover {
    color: #fff;
}

.imp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Filtros da lista, KPI e fluxo de atendimento */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin: 6px 0 16px;
}

.filtros .field {
    margin: 0;
    min-width: 160px;
}

.filtros__acoes {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-left: auto;
}

.autocomplete {
    position: relative;
}

.autocomplete__list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 220px;
    overflow-y: auto;
    margin-top: 4px;
}

.autocomplete__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
}

.autocomplete__item:last-child {
    border-bottom: 0;
}

.autocomplete__item:hover {
    background: var(--green-050);
}

.autocomplete__item span {
    color: var(--muted);
    font-size: 12px;
}

.autocomplete__empty {
    padding: 10px 12px;
    color: var(--muted);
    font-size: 13px;
}

.table-wrap {
    overflow-x: auto;
}

.cell-benef {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cell-benef__foto {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--green-050);
}

.cell-benef .avatar-mini {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}

.atend-benef {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 0 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}

.atend-benef__foto {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--green-050);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.atend-benef .avatar-mini {
    width: 62px;
    height: 62px;
    font-size: 22px;
    flex: 0 0 auto;
}

.atend-benef__id .cell-strong {
    font-size: 16px;
}

.stat--kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.atend-flow {
    margin-bottom: 16px;
}

/* Tabela padrao */
.table {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 860px) {
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

.table thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}

.table tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14.5px;
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover td {
    background: var(--green-050);
}

.col-acoes {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.row-acoes {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.row-acoes form {
    margin: 0;
    display: inline-flex;
}

.table-empty {
    text-align: center;
    color: var(--muted-soft);
    padding: 30px 20px;
}

.cell-strong {
    font-weight: 600;
    color: var(--ink);
}

.cell-sub {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}

.pac-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--line-soft);
}

.avatar-mini {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--green-100);
    color: var(--green-800);
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* Formulario em card */
.form-card {
    max-width: 520px;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.grid-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 480px) {
    .grid-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat {
        padding: 14px 12px;
    }

    .stat__value {
        font-size: 22px;
    }
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.stat {
    padding: 18px 20px;
}

.stat__label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}

.stat__value {
    font-size: 28px;
    font-weight: 700;
    margin-top: 6px;
    letter-spacing: -0.02em;
}

.stat__hint {
    font-size: 12.5px;
    color: var(--muted-soft);
    margin-top: 4px;
}

.grid-two {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.grid-two--eq {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 860px) {

    .grid-two,
    .grid-two--eq {
        grid-template-columns: 1fr;
    }
}

.panel {
    padding: 22px 24px;
}

/* Barras de proporcao */
.bars {
    margin-top: 8px;
}

.bar-row {
    margin-bottom: 16px;
}

.bar-row:last-child {
    margin-bottom: 4px;
}

.bar-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 14px;
}

.bar-name {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.bar-val {
    color: var(--ink);
    font-weight: 700;
    flex: 0 0 auto;
}

.bar-pct {
    color: var(--muted-soft);
    font-weight: 600;
    font-size: 12.5px;
    margin-left: 4px;
}

.bar-track {
    height: 10px;
    background: var(--line-soft);
    border-radius: 999px;
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.bar-fill.g1 {
    background: var(--green-700);
}

.bar-fill.g2 {
    background: var(--green-500);
}

.bar-fill.g3 {
    background: #7bb79a;
}

/* Lista de proximas entregas */
.todo-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.todo-list li {
    position: relative;
    padding: 8px 0 8px 26px;
    color: var(--muted);
    font-size: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.todo-list li:last-child {
    border-bottom: 0;
}

.todo-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green-500);
}

.panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.panel__head h3 {
    font-size: 16px;
}

.panel p {
    color: var(--muted);
    margin: 6px 0 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--green-100);
    color: var(--green-800);
    font-size: 12px;
    font-weight: 600;
}

.badge-warn {
    background: var(--warning-bg);
    color: var(--warning);
}

.badge-ok {
    background: var(--green-100);
    color: var(--green-800);
}

.badge-off {
    background: var(--danger-bg);
    color: var(--danger);
}

.tag-mini {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--green-700);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.check-row {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
}

.check input {
    width: 16px;
    height: 16px;
    accent-color: var(--green-700);
    cursor: pointer;
}

/* Fluxo de atendimento e comprovante */
.atend-card {
    padding: 22px;
}

.sep {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 20px 0;
}

.sub-h {
    font-size: 14px;
    font-weight: 700;
    color: var(--green-800);
    margin: 18px 0 10px;
}

.btn-icon {
    padding: 0 10px;
}

.session-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--green-800);
    background: var(--green-100);
    padding: 5px 12px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.session-timer svg {
    color: var(--green-700);
    flex: 0 0 auto;
}

.session-timer #sessionTimer {
    min-width: 30px;
}

.session-timer__label {
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Rodapé da sidebar (timer de sessão, fundo escuro) */
.sidebar__foot {
    padding: 10px 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: center;
}

.sidebar__foot .session-timer {
    background: rgba(255, 255, 255, 0.08);
    color: #e4f0ea;
}

.sidebar__foot .session-timer svg {
    color: rgba(255, 255, 255, 0.62);
}

.sidebar__foot .session-timer__label {
    opacity: 0.72;
}

.comprovante {
    padding: 24px;
}

.comprovante__grid {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
    .comprovante__grid {
        grid-template-columns: 1fr;
    }
}

.comprovante__brandhead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.comprovante__brandhead img {
    height: 52px;
    width: auto;
}

.comprovante__brandhead strong {
    display: block;
    color: var(--green-800);
    font-size: 15px;
}

.comprovante__brandhead span {
    font-size: 12px;
    color: var(--muted);
}

.comprovante__nota {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
}

.comprovante__nota h4 {
    font-size: 13px;
    color: var(--green-800);
    margin: 0 0 6px;
}

.comprovante__nota p {
    margin: 0 0 8px;
}

.comprovante__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    font-size: 11.5px;
    color: var(--muted-soft);
}

.comprovante__foot img {
    height: 16px;
    width: auto;
}

@media print {

    .sidebar,
    .topbar,
    .crud-bar__tools,
    .backdrop {
        display: none !important;
    }

    .main,
    .content {
        margin: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc;
    }
}

/* Novo paciente */
.pac-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 860px) {
    .pac-grid {
        grid-template-columns: 1fr;
    }
}

.doc-search {
    display: flex;
    gap: 10px;
}

.doc-search .input {
    flex: 1;
}

.matriculas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.info-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item--full {
    grid-column: 1 / -1;
}

.info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-soft);
    font-weight: 700;
}

.info-val {
    font-size: 14.5px;
    color: var(--ink);
    font-weight: 500;
}

.webcam {
    margin-top: 6px;
    background: var(--green-900);
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.webcam video,
.webcam img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.webcam-acoes {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Container do widget do VerifiqueID (embed) */
.vid-embed {
    min-height: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--green-050);
    border: 1px solid var(--line);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vid-embed__hint {
    color: var(--muted);
    font-size: 14px;
    padding: 24px;
    text-align: center;
    max-width: 300px;
}

/* Modal largo do cadastro de paciente */
.modal--wide .modal__card {
    max-width: 980px;
}

.modal--wide .modal__body {
    max-height: 76vh;
}

/* Comparação biométrica nos registros de atendimento (foto/PEC TEA) */
.cmp-cell {
    display: inline-flex;
    gap: 4px;
    padding: 2px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.cmp-cell:hover {
    border-color: var(--green-600);
}

.cmp-cell__img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 5px;
    background: var(--line-soft);
}

.cmp-benef {
    font-weight: 600;
    color: var(--green-800);
    margin-bottom: 12px;
}

.cmp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cmp-fig {
    margin: 0;
    text-align: center;
}

.cmp-fig img {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    background: var(--line-soft);
    border: 1px solid var(--line);
}

.cmp-fig figcaption {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

.cmp-score {
    margin-top: 16px;
    text-align: center;
    font-size: 15px;
    color: var(--ink);
}

.cmp-score strong {
    color: var(--green-700);
    font-size: 18px;
}

.cmp-score__na {
    color: var(--muted);
}

@media (max-width: 480px) {
    .cmp-grid {
        grid-template-columns: 1fr;
    }
}

/* Cadastro em duas colunas: dados a esquerda, biometria a direita */
.cad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}

@media (max-width: 720px) {
    .cad-grid {
        grid-template-columns: 1fr;
    }

    .vid-live video {
        object-fit: cover;
        object-position: center;
        height: 100%;
        width: 100%;
    }
}

/* No atendimento, a coluna da biometria acompanha o tamanho do modal de cadastro */
.atend-flow .cad-col:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.atend-flow .vid-embed {
    width: 100%;
    max-width: 460px;
    min-height: 342px;
}

.atend-flow .bio-actions,
.atend-flow .cad-col:last-child .field-hint,
.atend-flow .metodo-cards,
.atend-flow .field-label {
    width: 100%;
    max-width: 460px;
}

/* QR da sessão PEC no modal do operador */
.pec-qr {
    text-align: center;
}

.pec-qr__box {
    display: inline-block;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-top: 20px;
}

.pec-qr__box svg {
    display: block;
    width: 200px;
    height: 200px;
}

.pec-qr__link {
    margin-top: 12px;
    font-size: 13px;
    word-break: break-all;
}

.pec-qr__wait {
    margin-top: 12px;
    color: var(--muted);
    font-size: 14px;
}

/* Abas de aplicação (telas relacionadas viram abas) */
.app-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--green-050);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.app-tab {
    padding: 8px 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: background .12s, color .12s;
}

.app-tab:hover {
    color: var(--green-800);
}

.app-tab.is-active {
    background: var(--green-700);
    color: #fff;
}

.crud-bar__title .app-tabs {
    margin-bottom: 0;
}

.crud-bar__title .app-tab {
    padding: 6px 14px;
    font-size: 13.5px;
}

@media (max-width: 640px) {
    .crud-bar {
        flex-wrap: wrap;
    }

    .crud-bar__title {
        flex-wrap: wrap;
    }
}

/* Matriz de permissões por grupo */
.perm-matrix th:not(:first-child),
.perm-matrix td:not(:first-child) {
    text-align: center;
}

.perm-matrix td .switch {
    vertical-align: middle;
}

.perm-full {
    font-size: 12.5px;
    color: var(--green-700);
    font-weight: 600;
}

/* Painel de controle / Configurações */
.cfg-card {
    padding: 8px 24px 18px;
    margin-bottom: 18px;
}

.cfg-card .panel__head {
    margin: 6px 0 4px;
}

.cfg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
}

.cfg-card .panel__head+.cfg-row {
    border-top: 0;
}

.cfg-row__label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

.cfg-row__hint {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--muted);
    max-width: 62ch;
}

.cfg-num {
    width: 110px;
    text-align: center;
}

.cfg-url {
    width: 360px;
    max-width: 100%;
}

.cfg-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

@media (max-width: 560px) {
    .cfg-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .cfg-row__control {
        width: 100%;
    }

    .cfg-url {
        width: 100%;
    }
}

/* Bloco do comando de cron da retenção */
.cfg-cron {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--line-soft);
    flex-wrap: wrap;
}

.cfg-cron__lbl {
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    flex: 0 0 100%;
}

.cfg-cron__cmd {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    background: var(--green-050);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 12.5px;
    color: var(--ink);
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch__track {
    position: absolute;
    inset: 0;
    background: var(--line);
    border-radius: 999px;
    transition: background .15s;
}

.switch__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s;
}

.switch input:checked+.switch__track {
    background: var(--green-600);
}

.switch input:checked+.switch__track::after {
    transform: translateX(20px);
}

.switch input:focus-visible+.switch__track {
    outline: 2px solid var(--green-600);
    outline-offset: 2px;
}

/* Topo do atendimento (clínica): Novo atendimento + 3 KPIs */
.atend-top {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 18px;
}

.atend-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 760px) {
    .atend-top {
        grid-template-columns: 1fr;
    }
}

/* Mobile: os 3 KPIs continuam na mesma linha, apenas menores. */
@media (max-width: 560px) {
    .atend-kpis {
        gap: 8px;
    }

    .atend-kpis .stat {
        padding: 12px 8px;
    }

    .atend-kpis .stat__value {
        font-size: 20px;
    }

    .atend-kpis .stat__label {
        font-size: 11px;
    }

    .atend-kpis .stat__hint {
        display: none;
    }

    /* Esconde o avatar/foto do beneficiário na lista de registros. */
    .cell-benef__foto,
    .cell-benef .avatar-mini {
        display: none;
    }
}

/* Seleção de método em cards, acima do widget */
.field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}

.metodo-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.metodo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    color: var(--muted);
    text-align: center;
    transition: border-color .12s, color .12s, background .12s;
}

.metodo-card svg {
    width: 26px;
    height: 26px;
}

.metodo-card span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.metodo-card:hover {
    border-color: var(--green-600);
    color: var(--green-800);
}

.metodo-card.is-active {
    border-color: var(--green-700);
    background: var(--green-050);
    color: var(--green-800);
    box-shadow: inset 0 0 0 1px var(--green-700);
}

/* Método recomendado (biometria facial): borda verde pulsante para incentivar o uso. Some ao escolher outro card. */
.metodo-card--sugerido {
    position: relative;
    border-color: var(--green-700);
    color: var(--green-800);
    animation: metodo-pulse 1.6s ease-in-out infinite;
}

.metodo-card--sugerido::after {
    content: "Rápido e Seguro";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--green-700);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: tooltip-bounce 1.5s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
}

@keyframes tooltip-bounce {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, -3px);
    }
}

.input-pulse {
    animation: input-pulse 1.6s ease-in-out infinite;
    border-color: var(--green-600) !important;
}

@keyframes input-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(58, 123, 0, 0.45);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(58, 123, 0, 0);
    }
}

@keyframes metodo-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(58, 123, 0, 0.45);
        border-color: var(--green-700);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(58, 123, 0, 0);
        border-color: var(--green-600);
    }
}

@media (prefers-reduced-motion: reduce) {
    .metodo-card--sugerido {
        animation: none;
        box-shadow: inset 0 0 0 1px var(--green-700);
    }
}

/* Marca do VerifiqueID acima do botão (só em fundo claro) e faixa de erro */
.vid-brand {
    display: block;
    height: 20px;
    width: auto;
    margin: 0 auto 10px;
    opacity: 0.85;
}

/* Mensagem de erro: barra no rodapé do widget (inferior arredondada, superior reta) */
.vid-embed .bio-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 14px;
    text-align: center;
    display: none;
    z-index: 5;
    border-radius: 0 0 var(--radius) var(--radius);
}

.vid-embed .bio-status.is-error {
    display: block;
    background: #c0392b;
    color: #fff;
    font-weight: 500;
}

.field-hint.is-error {
    color: #c0392b;
    font-weight: 500;
}

/* Abas */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}

.tab {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 10px 14px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab:hover {
    color: var(--ink);
}

.tab.is-active {
    color: var(--green-800);
    border-bottom-color: var(--green-700);
}

/* Cabecalho da biometria: foto atual + botao, acima do widget */
.bio-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 14px;
}

.bio-foto {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--line-soft);
    flex: 0 0 auto;
}

/* Widget de biometria com a identidade do VerifiqueID */
.vid {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 4px;
}

.vid__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(90deg, #123f74 0%, #128a80 100%);
    color: #fff;
}

.vid__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.vid__logo svg {
    width: 20px;
    height: 20px;
    color: #8fe9e0;
}

.vid__logo b {
    font-weight: 800;
}

.vid__tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.85;
}

.vid__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #08131c;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vid__frame video,
.vid__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vid__corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid #16b5ab;
}

.vid__corner.tl {
    top: 12px;
    left: 12px;
    border-right: 0;
    border-bottom: 0;
    border-radius: 6px 0 0 0;
}

.vid__corner.tr {
    top: 12px;
    right: 12px;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 6px 0 0;
}

.vid__corner.bl {
    bottom: 12px;
    left: 12px;
    border-right: 0;
    border-top: 0;
    border-radius: 0 0 0 6px;
}

.vid__corner.br {
    bottom: 12px;
    right: 12px;
    border-left: 0;
    border-top: 0;
    border-radius: 0 0 6px 0;
}

.vid__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 19, 28, 0.35);
}

.vid__overlay span {
    font-size: 64px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.vid__status {
    margin: 10px 2px 0;
    font-size: 13px;
    color: var(--muted);
}

.form-actions--bar {
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 18px;
}

/* Backdrop do menu mobile */
.backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(22, 54, 42, 0.4);
    z-index: 35;
}

/* Logo do sistema (sidebar e login) */
.brandmark-img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.auth-brand .brandmark-img {
    width: 60px;
    height: 60px;
}

/* Anel circular fino e discreto ao redor da logo (login e sidebar), com um
   arco luminoso que gira lentamente, metade oculto em transparencia. */
.logo-ring {
    position: relative;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    flex: 0 0 auto;
}

.logo-ring::before,
.logo-ring::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    pointer-events: none;
}

.logo-ring::before {
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.logo-ring::after {
    background: conic-gradient(from 0deg, transparent 0 50%, rgba(255, 255, 255, 0.55) 72%, rgba(255, 255, 255, 0.92) 84%, transparent 96%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: logoRingSpin 5.5s linear infinite;
}

.logo-ring--lg::before,
.logo-ring--lg::after {
    inset: -7px;
}

@keyframes logoRingSpin {
    to {
        transform: rotate(1turn);
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-ring::after {
        animation: none;
        opacity: 0.55;
    }
}

.auth-turnstile {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px;
    min-height: 65px;
}

.auth-sb18 {
    display: block;
    height: 74px;
    width: auto;
    margin: 0 auto 18px;
}

/* Rodapé legal (login) */
.footer-legal {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 14px 24px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

.footer-legal>a img {
    height: 22px;
    width: auto;
    display: block;
}

.footer-legal__text {
    white-space: nowrap;
}

.footer-legal a {
    color: var(--green-700);
    text-decoration: none;
}

.footer-legal a:hover {
    text-decoration: underline;
}

.footer-legal .forte {
    font-weight: 600;
}

/* Links legais do login (Política de Privacidade / Termos de Uso) */
.auth-brand__legal {
    display: block;
    margin-top: 8px;
}

.auth-brand__legal a {
    color: rgba(234, 243, 238, 0.9);
    text-decoration: none;
}

.auth-brand__legal a:hover {
    color: #fff;
}

.footer-legal__links {
    margin-left: 4px;
}

.footer-legal__links a {
    color: var(--green-700);
    text-decoration: none;
}

.footer-legal__links a:hover {
    color: var(--green-800);
}

.legal-modal .modal__card {
    max-width: 720px;
}

.legal-modal .modal__body {
    height: 60vh;
    max-height: 60vh;
}

.legal-doc h4 {
    font-size: 14.5px;
    color: var(--green-800);
    margin: 16px 0 6px;
}

.legal-doc p {
    margin: 0 0 10px;
    line-height: 1.6;
}

.legal-doc code {
    background: var(--green-050);
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 12.5px;
}

.legal-list {
    margin: 0 0 10px;
    padding-left: 18px;
}

.legal-list li {
    margin-bottom: 6px;
    line-height: 1.55;
}

.legal-steps {
    display: grid;
    gap: 12px;
    margin: 10px 0 14px;
}

.legal-steps>div {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}

.legal-steps__n {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-800);
    font-weight: 700;
    font-size: 12px;
    margin-right: 8px;
    vertical-align: middle;
}

.legal-steps p {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}

@media (min-width: 640px) {
    .legal-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Selo de tecnologia (abaixo do aviso de acesso, centralizado) */
.auth-verifiqueid {
    display: block;
    text-align: center;
    margin-top: 16px;
    opacity: 0.85;
}

.auth-verifiqueid img {
    height: 22px;
    width: auto;
    display: inline-block;
}

.auth-verifiqueid:hover {
    opacity: 1;
}

/* Card de novo atendimento no dashboard */
.atend-quick {
    padding: 20px;
    border: 1px solid rgba(71, 148, 0, 0.30);
}

.atend-quick__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.atend-quick__pac {
    display: flex;
    align-items: center;
    gap: 12px;
}

.atend-quick__checks {
    display: flex;
    gap: 14px;
    margin-top: 4px;
}

.qcheck {
    font-size: 12.5px;
    font-weight: 600;
}

.qcheck--on {
    color: var(--green-700);
}

.qcheck--off {
    color: var(--muted-soft);
}

/* Gráfico de barras — últimos 12 meses */
.chart-12m {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 180px;
    padding-top: 8px;
}

.c12-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
}

.c12-bar {
    width: 100%;
    max-width: 26px;
    background: linear-gradient(180deg, var(--green-500), var(--green-700));
    border-radius: 6px 6px 0 0;
    min-height: 3px;
}

.c12-lab {
    font-size: 10.5px;
    color: var(--muted-soft);
    white-space: nowrap;
}

/* Análise em tempo real — feed ao vivo */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc40;
    margin-right: 4px;
    animation: livepulse 1.6s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes livepulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

.grid-two--feed {
    align-items: stretch;
}

.grid-two--feed>.card {
    display: flex;
    flex-direction: column;
}

/* KPIs de atendimento: alinhamento interno uniforme (centralizado) */
.atend-kpis .stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.feed-list {
    display: flex;
    flex-direction: column;
    max-height: 500px;
    overflow-y: auto;
    max-width: 100%;
    overflow-x: hidden;
}

.feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line-soft);
}

.feed-item:last-child {
    border-bottom: 0;
}

.table-wrap--anomalias {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.feed-foto {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--green-050);
}

.feed-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}

.feed-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.feed-info .cell-strong,
.feed-info .cell-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.feed-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.feed-time {
    font-size: 12px;
    color: var(--muted-soft);
}

.feed-item--novo {
    animation: feednovo 1.4s ease;
}

@keyframes feednovo {
    from {
        background: var(--green-100);
    }

    to {
        background: transparent;
    }
}

/* Notificações ao vivo (toasts de novo atendimento) */
.toast-wrap {
    position: fixed;
    right: 18px;
    top: 84px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
}

.toast-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--green-700);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    animation: toastin .28s ease;
}

.toast-card__foto {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--green-050);
}

.toast-card__info {
    flex: 1 1 auto;
    min-width: 0;
}

.toast-card__nome {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-card__sub {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.toast-card__time {
    font-size: 11px;
    color: var(--muted-soft);
    flex: 0 0 auto;
}

.toast-card.is-out {
    animation: toastout .3s ease forwards;
}

@keyframes toastin {
    from {
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes toastout {
    to {
        transform: translateX(20px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .toast-card,
    .toast-card.is-out {
        animation: none;
    }
}

/* Atendimentos por hora (mini gráfico de barras). Altura em px (o pai flex não
   define altura, então porcentagem colapsaria). */
.hours-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    min-height: 150px;
    padding-top: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hours-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

.hours-bar {
    width: 100%;
    max-width: 16px;
    background: var(--green-600);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height .3s ease;
}

.hours-col.is-now .hours-bar {
    background: var(--green-800);
}

.hours-lbl {
    font-size: 9px;
    color: var(--muted-soft);
}

/* Espaçamento de cards soltos (não dentro de grid) no conteúdo. */
.content>.card {
    margin-bottom: 16px;
}

/* Aviso flutuante de sucesso (ex.: relatório gerado) */
.flash-toast {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    background: var(--green-700);
    color: #fff;
    padding: 11px 18px;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 14px;
    font-weight: 600;
    animation: flashtoast-in .25s ease;
}

.flash-toast.is-out {
    animation: flashtoast-out .3s ease forwards;
}

@keyframes flashtoast-in {
    from {
        transform: translate(-50%, -12px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes flashtoast-out {
    to {
        transform: translate(-50%, -12px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .flash-toast,
    .flash-toast.is-out {
        animation: none;
    }
}

/* Gráfico de linhas (Acompanhamento / evolução) desenhado em SVG. */
.chart-wrap {
    width: 100%;
    overflow-x: auto;
}

.linechart {
    width: 100%;
    height: auto;
    display: block;
    min-width: 520px;
}

.chart-grid {
    stroke: var(--line);
    stroke-width: 1;
}

.chart-axis {
    fill: var(--muted-soft);
    font-size: 11px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}

.chart-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.chart-legend__item--dash {
    color: var(--muted-soft);
    font-style: italic;
}

/* Indicador de carregamento da rolagem infinita. */
.scroll-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-soft);
    border-radius: 24px;
    width: max-content;
    margin: 16px auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--line);
}

.scroll-loading.is-on {
    display: flex;
}

.scroll-loading__spin {
    width: 16px;
    height: 16px;
    border: 2px solid var(--line);
    border-top-color: var(--green-600);
    border-radius: 50%;
    animation: scrollspin .6s linear infinite;
}

@keyframes scrollspin {
    to {
        transform: rotate(360deg);
    }
}

.sidebar__brand .brandmark-img {
    width: 44px;
    height: 44px;
}

/* Overlay de carregamento com o logo (buscas de dados) */
.load-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(243, 246, 244, 0.55);
    backdrop-filter: blur(2px);
}

.load-overlay.is-on {
    display: flex;
}

.load-overlay__logo {
    position: relative;
    width: 76px;
    height: 76px;
}

.load-overlay__logo img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: block;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.load-overlay__ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 4px solid rgba(47, 107, 79, 0.18);
    border-top-color: var(--green-700);
    animation: loadspin 0.6s linear infinite;
}

@keyframes loadspin {
    to {
        transform: rotate(360deg);
    }
}

/* Loader inline: mesmo logo animado do overlay, dentro da area que carrega */
.load-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.load-inline__logo {
    position: relative;
    width: 48px;
    height: 48px;
}

.load-inline__logo img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.load-inline__ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid rgba(47, 107, 79, 0.18);
    border-top-color: var(--green-700);
    animation: loadspin 0.6s linear infinite;
}

/* Tabela de historico no modal: compacta e com metodo sem quebra de linha */
#histLista .table thead th,
#histLista .table tbody td {
    padding: 9px 12px;
    font-size: 12.5px;
}

#histLista .table th:last-child,
#histLista .table td:last-child {
    white-space: nowrap;
}

/* Idle e live da area da biometria */
.vid-idle {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px;
    text-align: center;
}

.vid-live {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.vid-live video,
.vid-live img,
.vid-live canvas {
    max-width: 100%;
}

.bio-foto-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bio-actions {
    display: block;
}

.bio-actions--row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.bio-actions--row .btn {
    flex: 1;
}

.vid-idle .bio-actions {
    margin: 0;
}

.vid-idle .vid-brand {
    height: 30px;
    margin: 0;
    opacity: 0.9;
}

/* Dependentes da familia */
.dependentes {
    margin: 4px 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.dependentes__head {
    padding: 9px 14px;
    background: var(--green-050);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.dep-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 14px;
}

.dep-item:first-child {
    border-top: 0;
}

.dep-item .dep-vinc {
    font-size: 12px;
    font-weight: 600;
    color: var(--green-800);
    background: var(--green-100);
    padding: 2px 8px;
    border-radius: 999px;
}

.dep-item.is-atual {
    background: var(--green-050);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 980px) {
    .auth {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        padding: 30px 26px;
        min-height: auto;
    }

    .auth-brand__top {
        justify-content: center;
    }

    .auth-brand__center {
        display: none;
    }

    .auth-brand__foot {
        display: none;
    }

    .footer-legal {
        flex-wrap: wrap;
    }

    .footer-legal__text {
        white-space: normal;
        max-width: 640px;
    }
}

/* Login em telas pequenas / PWA mobile: compacta o vertical para caber sem
   rolagem. Escopado ao login; não afeta o restante do app. */
@media (max-width: 600px) {
    .login-page .auth-brand {
        padding: 22px;
        min-height: 96px;
        justify-content: center;
    }

    .login-page .auth-form {
        padding: 16px 22px 24px;
    }

    .auth-sb18 {
        height: 56px;
        margin-bottom: 12px;
    }

    .auth-card__head {
        margin-bottom: 16px;
    }

    .auth-card__head h2 {
        font-size: 21px;
    }

    .auth-foot {
        margin-top: 16px;
        padding-top: 14px;
    }

    .footer-legal {
        padding: 10px 18px;
    }
}

/* Celular: interface mais leve — oculta selos de marca no login */
@media (max-width: 600px) {
    .auth-verifiqueid {
        display: none;
    }

    .footer-legal>a {
        display: none;
    }

    .auth-sb18 {
        height: 60px;
    }
}

@media (max-width: 860px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .app.nav-open .sidebar {
        transform: translateX(0);
    }

    .app.nav-open .backdrop {
        display: block;
    }

    .main {
        margin-left: 0;
    }

    .menu-toggle {
        display: flex;
    }

    .content {
        padding: 20px 16px;
    }

    .usermenu__info {
        display: none;
    }

    .usermenu #impBtn,
    .usermenu #pwdBtn {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

.grid-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 1199px) {
    .grid-three {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Autenticidade do documento (modal público aberto pelo QR)
   ========================================================================== */
.doc-dados {
    display: grid;
    grid-template-columns: minmax(120px, 40%) 1fr;
    gap: 8px 16px;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--line-soft);
    font-size: 14px;
}

.doc-dados dt {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    align-self: center;
}

.doc-dados dd {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.doc-dados__nota {
    margin: 16px 0 0;
    color: var(--muted-soft);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 560px) {
    .doc-dados {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .doc-dados dd {
        margin-bottom: 8px;
    }
}

/* =====================================================================
   Captcha de deslize na tela de login, ao lado esquerdo do botao Entrar.
   Casa com o design system: mesma altura do botao (44px), verde opaco,
   cantos --radius-sm. Estrutura montada por assets/js/captcha-deslize.js.
   ===================================================================== */
.login-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.login-actions .btn {
    flex: 0 0 auto;
}

.captcha-deslize {
    flex: 1 1 auto;
    min-width: 0;
}

.captcha-trilho {
    position: relative;
    display: block;
    height: 44px;
    border-radius: var(--radius-sm);
    background: #c3d3c6;
    border: 1px solid #b8cabc;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.captcha-rotulo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 40px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.captcha-pino {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--green-700);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s ease;
    z-index: 2;
}

.captcha-pino svg {
    width: 16px;
    height: 16px;
    display: block;
}

.captcha-arrastando .captcha-pino {
    cursor: grabbing;
}

.captcha-arrastando .captcha-rotulo {
    color: var(--green-800);
}

.captcha-ok .captcha-trilho {
    background: var(--green-100);
    border-color: var(--green-600);
}

.captcha-ok .captcha-pino {
    background: var(--green-600);
    cursor: default;
}

.captcha-ok .captcha-rotulo {
    color: var(--green-800);
}

.captcha-treme {
    animation: captchaTreme 0.4s ease;
}

@keyframes captchaTreme {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}