/* ==========================================================================
   Design system do sistema base.
   Tudo sai das variáveis abaixo -- para mudar a cara do sistema inteiro,
   mexa só no :root.
   ========================================================================== */

:root {
    /* Marca */
    --brand-h: 221;
    --brand-s: 83%;
    --brand: hsl(var(--brand-h) var(--brand-s) 53%);
    --brand-hover: hsl(var(--brand-h) var(--brand-s) 46%);
    --brand-soft: hsl(var(--brand-h) var(--brand-s) 96%);
    --brand-ring: hsl(var(--brand-h) var(--brand-s) 53% / 0.35);

    /* Superficies */
    --bg: hsl(220 20% 97%);
    --surface: #ffffff;
    --surface-2: hsl(220 20% 98.5%);
    --sidebar: hsl(222 30% 14%);
    --sidebar-fg: hsl(220 15% 72%);
    --sidebar-fg-strong: #ffffff;

    /* Texto */
    --fg: hsl(222 25% 15%);
    --fg-muted: hsl(220 10% 46%);
    --fg-subtle: hsl(220 10% 60%);

    /* Traços */
    --border: hsl(220 15% 89%);
    --border-strong: hsl(220 15% 82%);

    /* Estados */
    --success: hsl(152 60% 36%);
    --success-soft: hsl(152 60% 95%);
    --danger: hsl(0 72% 51%);
    --danger-soft: hsl(0 72% 96%);
    --warning: hsl(38 92% 45%);
    --warning-soft: hsl(38 92% 95%);
    --info: hsl(200 85% 42%);
    --info-soft: hsl(200 85% 95%);

    /* Forma */
    --radius: 10px;
    --radius-sm: 7px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px hsl(220 30% 10% / 0.06);
    --shadow: 0 1px 3px hsl(220 30% 10% / 0.08), 0 6px 16px -6px hsl(220 30% 10% / 0.10);
    --shadow-lg: 0 12px 32px -8px hsl(220 30% 10% / 0.18);

    --sidebar-w: 250px;
    --topbar-h: 60px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/*
 * Tema escuro: só entra quando a pessoa escolhe pelo botão (ver
 * [data-toggle-theme] em app.js). O sistema sempre abre no claro, mesmo em
 * aparelho configurado no escuro -- decisão explícita, principalmente por
 * causa do aplicativo do morador.
 */
:root[data-theme="dark"] {
    --bg: hsl(222 25% 9%);
    --surface: hsl(222 22% 13%);
    --surface-2: hsl(222 22% 16%);
    --sidebar: hsl(222 28% 11%);
    --brand-soft: hsl(var(--brand-h) 40% 20%);
    --fg: hsl(220 20% 94%);
    --fg-muted: hsl(220 12% 65%);
    --fg-subtle: hsl(220 10% 52%);
    --border: hsl(222 18% 22%);
    --border-strong: hsl(222 18% 30%);
    --success-soft: hsl(152 40% 16%);
    --danger-soft: hsl(0 45% 18%);
    --warning-soft: hsl(38 50% 17%);
    --info-soft: hsl(200 45% 17%);
    --shadow: 0 1px 3px hsl(0 0% 0% / 0.4), 0 8px 20px -8px hsl(0 0% 0% / 0.5);
}

/* ---------------------------------------------------------------- base --- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -0.011em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre { font-family: var(--mono); font-size: 0.875em; }

/* Todo icone inline tem 20px por padrão; os blocos abaixo ajustam onde precisa. */
svg { width: 20px; height: 20px; flex-shrink: 0; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.muted   { color: var(--fg-muted); }
.subtle  { color: var(--fg-subtle); }
.text-success { color: var(--success); }
.small   { font-size: 0.8125rem; }
.strong  { font-weight: 600; }
.mono    { font-family: var(--mono); }
.right   { text-align: right; }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.hidden { display: none !important; }

.row { display: flex; gap: .5rem; align-items: center; }
.row-between { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.row-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* ------------------------------------------------------------- estrutura -- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar);
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.15rem 1.25rem;
    color: var(--sidebar-fg-strong);
    font-weight: 650;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}
.sidebar__brand:hover { text-decoration: none; }

.sidebar__logo {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--brand), hsl(calc(var(--brand-h) + 35) 80% 58%));
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: .9rem;
    flex-shrink: 0;
}

.sidebar__tenant {
    margin: 0 .85rem .75rem;
    padding: .6rem .75rem;
    background: hsl(0 0% 100% / 0.05);
    border: 1px solid hsl(0 0% 100% / 0.08);
    border-radius: var(--radius-sm);
}
.sidebar__tenant-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sidebar-fg); opacity: .7; }
.sidebar__tenant-name { color: var(--sidebar-fg-strong); font-weight: 600; font-size: .9rem; margin-top: .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { padding: .25rem .6rem 1rem; display: flex; flex-direction: column; gap: 1px; }

.nav__section {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--sidebar-fg); opacity: .55;
    padding: 1rem .65rem .35rem;
}

.nav__link {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--sidebar-fg);
    font-size: .9rem; font-weight: 500;
    transition: background .12s, color .12s;
}
.nav__link:hover { background: hsl(0 0% 100% / 0.07); color: var(--sidebar-fg-strong); text-decoration: none; }
.nav__link.is-active { background: var(--brand); color: #fff; box-shadow: 0 2px 8px -2px var(--brand-ring); }
.nav__link svg { width: 18px; height: 18px; flex-shrink: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 30;
}

.content { padding: 1.75rem 1.5rem 3rem; max-width: 1400px; width: 100%; margin: 0 auto; }

.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.page-head p { margin: .2rem 0 0; color: var(--fg-muted); font-size: .9rem; }

/* ---------------------------------------------------------------- cards --- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card__head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.card__body { padding: 1.25rem; }
.card__body--flush { padding: 0; }
.card__foot { padding: .85rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-2);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.stat { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; }
.stat__icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--brand-soft); color: var(--brand);
}
.stat__icon svg { width: 21px; height: 21px; }
.stat__icon--success { background: var(--success-soft); color: var(--success); }
.stat__icon--warning { background: var(--warning-soft); color: var(--warning); }
.stat__value { font-size: 1.6rem; font-weight: 680; line-height: 1.1; letter-spacing: -0.02em; }
.stat__label { font-size: .8rem; color: var(--fg-muted); }

/* ---------------------------------------------------------------- botões -- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .5rem .9rem;
    font: inherit; font-size: .875rem; font-weight: 550;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--surface); color: var(--fg);
    cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px var(--brand-ring); }
.btn--primary:hover { background: var(--brand-hover); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--fg); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { filter: brightness(.93); }
.btn--sm { padding: .32rem .6rem; font-size: .8125rem; }
.btn--icon { padding: .38rem; }
.btn--icon svg { width: 17px; height: 17px; }
.btn--block { width: 100%; }

.btn-group { display: inline-flex; gap: .25rem; }

/* --------------------------------------------------------------- formulário */

.field { margin-bottom: 1.05rem; }
.field:last-child { margin-bottom: 0; }

.label { display: block; font-size: .8125rem; font-weight: 570; margin-bottom: .35rem; color: var(--fg); }
.label .req { color: var(--danger); }

.input, .select, .textarea {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit; font-size: .9rem;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.input::placeholder { color: var(--fg-subtle); }
.textarea { min-height: 96px; resize: vertical; }
.select { appearance: none; padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6rem center; }
.select-pesquisavel { position: relative; width: 100%; }
.select-pesquisavel__campo { width: 100%; padding-right: 2.35rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6rem center; }
.select-pesquisavel__original { display: none !important; }
.select-pesquisavel__lista { position: absolute; z-index: 80; top: calc(100% + .35rem); left: 0; right: 0;
    max-height: 18rem; overflow-y: auto; padding: .35rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); box-shadow: var(--shadow-lg); }
.select-pesquisavel__opcao { display: block; width: 100%; padding: .65rem .75rem; border: 0; border-radius: .45rem;
    background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.select-pesquisavel__opcao:hover, .select-pesquisavel__opcao:focus,
.select-pesquisavel__opcao[aria-selected="true"] { outline: none; background: var(--brand-soft); color: var(--fg); }
.select-pesquisavel__vazio { padding: .75rem; color: var(--fg-muted); font-size: .875rem; text-align: center; }

.input--error, .select--error { border-color: var(--danger); }
.field__error { display: block; margin-top: .3rem; font-size: .8rem; color: var(--danger); }
.field__hint { display: block; margin-top: .3rem; font-size: .8rem; color: var(--fg-muted); }
.select-com-acao { display: flex; align-items: stretch; gap: .45rem; }
.select-com-acao > .select,
.select-com-acao > .select-pesquisavel { flex: 1 1 auto; min-width: 0; }
.select-com-acao__adicionar { width: 40px; min-width: 40px; padding: 0; }
.select-com-acao__adicionar svg { width: 18px; height: 18px; }
.input-suffix { display: flex; align-items: stretch; }
.input-suffix .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-suffix > span { display: flex; align-items: center; padding: 0 .8rem; border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-2); color: var(--fg-muted); font-size: .82rem; }

.check { display: flex; align-items: flex-start; gap: .6rem; padding: .4rem 0; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: .12rem 0 0; accent-color: var(--brand); flex-shrink: 0; cursor: pointer; }
.check__text { font-size: .875rem; }
.check__desc { display: block; font-size: .78rem; color: var(--fg-muted); }

.search {
    position: relative; display: inline-flex; align-items: center; max-width: 320px; width: 100%;
}
.search svg { position: absolute; left: .65rem; width: 16px; height: 16px; color: var(--fg-subtle); pointer-events: none; }
.search .input { padding-left: 2.1rem; }

fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
legend { padding: 0; font-size: .78rem; font-weight: 640; text-transform: uppercase;
    letter-spacing: .05em; color: var(--fg-muted); margin-bottom: .75rem; }

/* Modal nativo: mantém o formulário de origem intacto atrás da janela. */
.modal {
    width: min(540px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
    margin: auto; padding: 0; overflow: auto;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgb(15 23 42 / .58); backdrop-filter: blur(2px); }
.modal__head, .modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; }
.modal__head { border-bottom: 1px solid var(--border); }
.modal__head h2 { margin: 0; font-size: 1.1rem; }
.modal__body { padding: 1.2rem; }
.modal__foot { justify-content: flex-end; border-top: 1px solid var(--border); }
body:has(.modal[open]) { overflow: hidden; }

/* --------------------------------------------------------------- tabelas -- */

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

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
    text-align: left; font-weight: 600; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted);
    padding: .7rem 1.25rem; border-bottom: 1px solid var(--border); white-space: nowrap;
    background: var(--surface-2);
}
.table td { padding: .8rem 1.25rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table__actions { text-align: right; white-space: nowrap; }

/* Cabeçalho que ordena a coluna */
.th-ordenavel { padding: 0 !important; }
.th-ordenavel a {
    display: block; padding: .7rem 1.25rem;
    color: inherit; font: inherit; text-decoration: none;
}
.th-ordenavel a:hover { color: var(--fg); background: var(--border); text-decoration: none; }
.th-ordenavel.is-active a { color: var(--brand); }

.empty { padding: 3rem 1.5rem; text-align: center; color: var(--fg-muted); }
.empty svg { width: 40px; height: 40px; color: var(--fg-subtle); margin-bottom: .75rem; }
.empty h3 { margin-bottom: .25rem; color: var(--fg); }

/* --------------------------------------------------------------- badges --- */

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .16rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 570; line-height: 1.5;
    background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border);
}
.badge--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge--danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }
.badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge--info    { background: var(--info-soft);    color: var(--info);    border-color: transparent; }
.badge--brand   { background: var(--brand-soft);   color: var(--brand);   border-color: transparent; }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------- resumo -- */

/* Ficha de leitura: os dados do registro antes de uma ação de confirmação. */
.resumo {
    display: grid; gap: 1rem 2rem; margin: 0 0 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.resumo dt { font-size: .78rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.resumo dd { margin: .2rem 0 0; }

/* ------------------------------------------------------------------ abas -- */

/* Filtro de uma listagem: "Na portaria / Entregues / Todas". São links de
   verdade (cada aba tem URL), então funcionam com o botão voltar e podem ser
   enviados por mensagem. */
.abas { display: flex; gap: .25rem; flex-wrap: wrap; }
.abas__item {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .8rem; border-radius: var(--radius);
    font-size: .875rem; font-weight: 550; color: var(--fg-muted);
    text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s;
}
.abas__item:hover { background: var(--surface-2); color: var(--fg); }
.abas__item.is-active { background: var(--brand-soft); color: var(--brand); }

/* --------------------------------------------------------------- alertas -- */

.alert {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .8rem 1rem; border-radius: var(--radius);
    font-size: .9rem; margin-bottom: 1rem;
    border: 1px solid transparent;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .1rem; }
.alert--success { background: var(--success-soft); color: var(--success); }
.alert--danger  { background: var(--danger-soft);  color: var(--danger); }
.alert--warning { background: var(--warning-soft); color: var(--warning); }
.alert--info    { background: var(--info-soft);    color: var(--info); }

.alerts { position: fixed; top: 1rem; right: 1rem; z-index: 100; width: min(380px, calc(100vw - 2rem)); }
.alerts .alert { box-shadow: var(--shadow-lg); background-color: var(--surface); border-color: var(--border); }
.alerts .alert--success { border-left: 3px solid var(--success); }
.alerts .alert--danger  { border-left: 3px solid var(--danger); }
.alerts .alert--warning { border-left: 3px solid var(--warning); }

/* ------------------------------------------------------------ paginação --- */

.pagination { display: flex; align-items: center; gap: .3rem; }
.pagination__info { color: var(--fg-muted); font-size: .85rem; }
.page-link {
    min-width: 32px; height: 32px; padding: 0 .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: .85rem; color: var(--fg); background: var(--surface);
}
.page-link:hover { background: var(--surface-2); text-decoration: none; }
.page-link svg { width: 15px; height: 15px; }
.page-link.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-link.is-disabled { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------- dropdown --- */

.dropdown { position: relative; }
.dropdown__menu {
    position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40;
    min-width: 210px; padding: .35rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.dropdown__item {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .5rem .6rem; border: 0; border-radius: var(--radius-sm);
    font: inherit; font-size: .875rem; text-align: left;
    background: transparent; color: var(--fg); cursor: pointer;
}
.dropdown__item:hover { background: var(--surface-2); text-decoration: none; }
.dropdown__item svg { width: 16px; height: 16px; color: var(--fg-muted); }
.dropdown__divider { height: 1px; background: var(--border); margin: .35rem 0; }
.dropdown__header { padding: .5rem .6rem .35rem; }

/* --------------------------------------------------------------- avatar --- */

.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--brand-soft); color: var(--brand);
    font-size: .78rem; font-weight: 650; letter-spacing: .02em;
}
.avatar--lg { width: 56px; height: 56px; font-size: 1.15rem; }

/* ------------------------------------------------------ personalização --- */

.sidebar__logo--img { object-fit: contain; background: hsl(0 0% 100% / .08); padding: 3px; }

.swatch {
    width: 30px; height: 30px; padding: 0;
    border: 2px solid var(--border-strong); border-radius: 50%;
    cursor: pointer; transition: transform .1s, border-color .1s;
}
.swatch:hover { transform: scale(1.12); border-color: var(--fg-muted); }

/* Faixa de "entrar como": vermelha de propósito, para ninguém esquecer */
.personificando {
    position: sticky; top: 0; z-index: 80;
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .55rem 1.25rem;
    background: var(--danger); color: #fff;
    font-size: .875rem; font-weight: 550;
}
.personificando svg { width: 17px; height: 17px; }
.personificando form { margin-left: auto; }
.personificando .btn {
    background: hsl(0 0% 100% / .16); color: #fff; border-color: hsl(0 0% 100% / .3);
}
.personificando .btn:hover { background: hsl(0 0% 100% / .26); }

.dashboard-actions { align-items: stretch; }
.dashboard-actions form { display: flex; }
.dashboard-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dashboard-summary > div { display: flex; flex-direction: column; gap: .2rem; padding: 1rem; border-radius: 14px; background: var(--surface-2); }
.dashboard-summary strong { font-size: 1.65rem; color: var(--brand); }
.dashboard-summary span { color: var(--fg-muted); font-size: .78rem; }

/* --------------------------------------------------------------- painel -- */

/* Ações do dia a dia à esquerda, abertura de portão à direita. */
.painel-topo {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; gap: 1rem;
}
.painel-acoes { display: flex; flex-wrap: wrap; gap: .6rem; }

.abertura {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .5rem .75rem .5rem .9rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface);
}
.abertura__rotulo {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    color: var(--fg-muted);
}
.abertura__rotulo svg { width: 15px; height: 15px; }
.abertura__botoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.abertura__botoes form { display: flex; }

/* O vermelho só aparece na interação: quatro blocos vermelhos parados na tela
   fazem o "cuidado" virar paisagem. */
.btn--abrir {
    border-color: var(--border-strong); background: var(--surface-2); color: var(--fg);
}
.btn--abrir:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--abrir:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: .9rem; }
.metrica {
    --tom: var(--brand); --tom-soft: var(--brand-soft);
    display: flex; align-items: center; gap: .75rem;
    padding: .95rem 1rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); box-shadow: var(--shadow-sm);
    color: inherit; text-decoration: none;
    transition: border-color .12s, box-shadow .12s, transform .06s;
}
.metrica:hover { border-color: var(--border-strong); box-shadow: var(--shadow); text-decoration: none; }
.metrica:active { transform: translateY(1px); }
.metrica__icone {
    width: 38px; height: 38px; border-radius: 11px; flex: none;
    display: grid; place-items: center;
    background: var(--tom-soft); color: var(--tom);
}
.metrica__icone svg { width: 19px; height: 19px; }
.metrica__texto { display: flex; flex-direction: column; min-width: 0; }
.metrica__valor { font-size: 1.45rem; font-weight: 680; line-height: 1.1; letter-spacing: -0.02em; }
.metrica__rotulo { font-size: .78rem; color: var(--fg-muted); line-height: 1.25; }
.metrica__apoio { font-size: .72rem; color: var(--fg-subtle); margin-top: .15rem; }
.metrica--success { --tom: var(--success); --tom-soft: var(--success-soft); }
.metrica--warning { --tom: var(--warning); --tom-soft: var(--warning-soft); }
.metrica--info    { --tom: var(--info);    --tom-soft: var(--info-soft); }
.metrica--neutro  { --tom: var(--fg-muted); --tom-soft: var(--surface-2); }

/* Cartão de lista não estica para acompanhar o vizinho mais alto: sobrava
   meia tela em branco embaixo do cartão menor. */
.grid--topo { align-items: start; }

@media (max-width: 720px) {
    .dashboard-actions > *, .dashboard-actions form, .dashboard-actions .btn { width: 100%; }
    .dashboard-summary { grid-template-columns: 1fr; }

    /* No celular do porteiro o alvo de toque tem de ocupar a largura toda. */
    .painel-topo { flex-direction: column; align-items: stretch; }
    .painel-acoes { flex-direction: column; }
    .painel-acoes .btn { width: 100%; }
    .abertura { flex-direction: column; align-items: stretch; }
    .abertura__botoes { display: grid; grid-template-columns: 1fr 1fr; }
    .abertura__botoes .btn { width: 100%; }
}

@media (max-width: 560px) {
    .personificando {
        position: fixed; right: .75rem; bottom: .75rem; left: .75rem; top: auto;
        z-index: 100;
        align-items: flex-start;
        padding: .85rem;
        border-radius: 16px;
        box-shadow: 0 10px 30px hsl(0 0% 0% / .28);
        font-size: .8rem;
    }
    .personificando > span { flex: 1; min-width: 0; }
    .personificando form { width: 100%; margin: 0; }
    .personificando .btn { width: 100%; justify-content: center; }
    .personificando + .mobile,
    .personificando + .m-cameras { padding-bottom: 13rem; }
    .personificando ~ .m-barra { bottom: 9.5rem; }
}

/* --------------------------------------------------------------- anexos --- */

.anexos { list-style: none; margin: 0; padding: 0; }

.anexo {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem 0; border-bottom: 1px solid var(--border);
}
.anexo:last-child { border-bottom: 0; }

.anexo__tipo {
    flex-shrink: 0; width: 42px; height: 34px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--fg-muted);
}
.anexo__nome { flex: 1; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo__meta { font-size: .76rem; color: var(--fg-subtle); white-space: nowrap; }

/* Campo de arquivo com a cara do resto do sistema */
.input[type="file"] { padding: .4rem .5rem; cursor: pointer; }
.input[type="file"]::file-selector-button {
    margin-right: .7rem; padding: .32rem .7rem;
    font: inherit; font-size: .82rem; font-weight: 550;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--fg); cursor: pointer;
}
.input[type="file"]::file-selector-button:hover { background: var(--surface); }

@media (max-width: 560px) {
    .anexo__meta { display: none; }
}

/* --------------------------------------------------- layout escolhido --- */

.staff-mobile-nav { display: none; }

/* O modo celular pode ser escolhido mesmo em uma tela larga. */
.layout--mobile {
    background: hsl(210 20% 96%);
}
.layout--mobile .shell { display: block; min-height: 100vh; }
.layout--mobile .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
}
.layout--mobile .sidebar.is-open { transform: translateX(0); }
.layout--mobile .main { width: 100%; min-height: 100vh; }
.layout--mobile .menu-toggle { display: inline-flex; }
.layout--mobile .topbar {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 1rem;
}
.layout--mobile .content {
    max-width: 520px;
    margin: 0 auto;
    padding: 1rem 1rem 6.5rem;
}
.layout--mobile .page-head { flex-direction: column; align-items: stretch; margin-bottom: 1rem; }
.layout--mobile .page-head > .row { width: 100%; }
.layout--mobile .page-head > .row .btn { flex: 1; }
.layout--mobile .grid--2,
.layout--mobile .grid--3 { grid-template-columns: 1fr; }
.layout--mobile .card { border-radius: 16px; }
.layout--mobile .table th,
.layout--mobile .table td { padding-left: .8rem; padding-right: .8rem; }

.layout--mobile .staff-mobile-nav {
    position: fixed;
    z-index: 45;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: 520px;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-around;
    padding: .5rem .35rem calc(.5rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 24px -18px hsl(220 30% 10% / .4);
}
.staff-mobile-nav a {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .18rem;
    padding: .25rem .2rem;
    color: var(--fg-subtle);
    font-size: .64rem;
    font-weight: 550;
    text-align: center;
    text-decoration: none;
}
.staff-mobile-nav a svg { width: 20px; height: 20px; }
.staff-mobile-nav a.is-active { color: var(--brand); }

@media (max-width: 560px) {
    .layout--mobile .topbar .dropdown .nowrap { display: none; }
}

/* --------------------------------------------------------------- grafico -- */

/* Gráfico de barras com régua à esquerda: sem uma referência de altura, as
   barras só dizem "uma é maior que a outra". */
.grafico { display: flex; gap: .9rem; }
.grafico__regua {
    display: flex; flex-direction: column; justify-content: space-between;
    height: 170px; padding-bottom: 1.35rem;
    font-size: .7rem; color: var(--fg-subtle); text-align: right;
    border-right: 1px solid var(--border); padding-right: .55rem;
}
.grafico__colunas { flex: 1; display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.grafico__col {
    flex: 1; min-width: 0; height: 170px;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem;
}
.grafico__numero { font-size: .68rem; font-weight: 600; color: var(--fg-muted); }
.grafico__barra {
    width: 100%; border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--brand), hsl(var(--brand-h) var(--brand-s) 66%));
    transition: filter .12s;
}
.grafico__col:hover .grafico__barra { filter: brightness(1.12); }
.grafico__dia { font-size: .68rem; color: var(--fg-subtle); white-space: nowrap; }

@media (max-width: 720px) {
    .grafico__numero { display: none; }
    .grafico__dia { font-size: .6rem; }
}

.chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: .5rem; }
.chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 0; }
.chart__bar {
    width: 100%; border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--brand), hsl(var(--brand-h) var(--brand-s) 64%));
    min-height: 3px; transition: opacity .12s;
}
.chart__col:hover .chart__bar { opacity: .8; }
.chart__label { font-size: .68rem; color: var(--fg-subtle); white-space: nowrap; }

/* --------------------------------------------------- telas sem estrutura -- */

.auth {
    min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background:
        radial-gradient(1000px 500px at 15% -10%, var(--brand-soft), transparent 65%),
        var(--bg);
}
.auth__card { width: 100%; max-width: 410px; }
.auth__logo {
    width: 46px; height: 46px; border-radius: 13px; margin: 0 auto .9rem;
    background: linear-gradient(140deg, var(--brand), hsl(calc(var(--brand-h) + 35) 80% 58%));
    display: grid; place-items: center; color: #fff; font-weight: 700;
}
.auth__logo svg { width: 23px; height: 23px; }
.auth__title { text-align: center; margin-bottom: .3rem; }
.auth__sub { text-align: center; color: var(--fg-muted); font-size: .9rem; margin-bottom: 1.6rem; }
.auth__foot { text-align: center; margin-top: 1.25rem; font-size: .85rem; color: var(--fg-muted); }

.wide { max-width: 720px; margin: 0 auto; }

/* O instalador precisa de mais largura que as telas de login. */
.auth__card:has(> .install) { max-width: 600px; }

/* Login do condomínio: identidade própria, sem herdar o cartão genérico. */
.auth:has(.login-screen) {
    padding: 2rem;
    background:
        radial-gradient(800px 500px at 8% 8%, hsl(169 44% 88%), transparent 70%),
        hsl(210 24% 96%);
}
.auth__card:has(> .login-screen) { max-width: 920px; }

.login-screen {
    --login-brand: hsl(169 70% 21%);
    --login-brand-deep: hsl(169 72% 16%);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 590px;
    overflow: hidden;
    background: #fff;
    border: 1px solid hsl(215 18% 88%);
    border-radius: 28px;
    box-shadow: 0 28px 70px -32px hsl(169 60% 10% / .45);
}

.login-brand {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.3rem;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, var(--login-brand), var(--login-brand-deep));
}
.login-brand::before,
.login-brand::after {
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px solid hsl(0 0% 100% / .12);
    border-radius: 50%;
}
.login-brand::before { width: 370px; height: 370px; right: -210px; top: -120px; }
.login-brand::after { width: 270px; height: 270px; left: -145px; bottom: -155px; }

.login-brand__name,
.login-panel__mobile-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.05rem;
    font-weight: 680;
    letter-spacing: -.01em;
}
.login-brand__mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 13px;
    color: #fff;
    background: hsl(0 0% 100% / .14);
    border: 1px solid hsl(0 0% 100% / .14);
}
.login-brand__mark svg { width: 21px; height: 21px; }
.login-brand__eyebrow {
    display: block;
    margin-bottom: .8rem;
    color: hsl(164 36% 78%);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.login-brand__message { max-width: 360px; }
.login-brand__message h2 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}
.login-brand__message p {
    max-width: 335px;
    margin: 0;
    color: hsl(164 24% 82%);
    font-size: .95rem;
}
.login-brand__features { display: flex; flex-wrap: wrap; gap: .65rem 1rem; }
.login-brand__features span { display: flex; align-items: center; gap: .4rem; color: hsl(164 24% 84%); font-size: .78rem; }
.login-brand__features svg { width: 16px; height: 16px; }

.login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.2rem;
    color: hsl(222 25% 15%);
    background: #fff;
}
.login-panel__mobile-brand { display: none; color: var(--login-brand); }
.login-panel__mobile-brand .login-brand__mark { background: var(--login-brand); }
.login-panel__head { margin-bottom: 2rem; }
.login-panel__eyebrow {
    color: var(--login-brand);
    font-size: .74rem;
    font-weight: 720;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.login-panel__head h1 { margin: .35rem 0 .5rem; font-size: 1.75rem; letter-spacing: -.025em; }
.login-panel__head p { margin: 0; color: hsl(220 10% 46%); font-size: .9rem; }
.login-panel .label { color: hsl(222 25% 18%); font-size: .82rem; }
.login-panel .input {
    min-height: 48px;
    padding: .7rem .85rem;
    color: hsl(222 25% 15%);
    background: hsl(210 24% 98%);
    border-color: hsl(215 18% 84%);
    border-radius: 12px;
}
.login-panel .input:focus {
    border-color: var(--login-brand);
    box-shadow: 0 0 0 3px hsl(169 70% 21% / .15);
}
.login-panel .input::placeholder { color: hsl(220 9% 62%); }
.login-submit {
    width: 100%;
    min-height: 50px;
    margin-top: .5rem;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--login-brand);
    box-shadow: 0 8px 22px -10px hsl(169 70% 15% / .65);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s, transform .08s;
}
.login-submit:hover { background: var(--login-brand-deep); }
.login-submit:active { transform: translateY(1px); }
.login-submit svg { width: 17px; height: 17px; }
.login-panel__help { display: flex; flex-direction: column; align-items: center; gap: .65rem; margin: 1.5rem 0 0; text-align: center; }
.login-panel__help a { color: var(--login-brand); font-size: .86rem; font-weight: 620; }
.login-panel__help span { color: hsl(220 9% 55%); font-size: .73rem; }

@media (max-width: 720px) {
    .auth:has(.login-screen) { align-items: stretch; padding: 0; }
    .auth__card:has(> .login-screen) { max-width: none; }
    .login-screen { display: block; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
    .login-brand { display: none; }
    .login-panel { min-height: 100vh; justify-content: flex-start; padding: max(2rem, env(safe-area-inset-top)) 1.5rem 2rem; }
    .login-panel__mobile-brand { display: flex; margin-bottom: clamp(3rem, 12vh, 6rem); }
    .login-panel__head { margin-bottom: 1.75rem; }
    .login-panel__head h1 { font-size: 1.65rem; }
}

@media (max-width: 380px) {
    .login-panel { padding-left: 1.15rem; padding-right: 1.15rem; }
    .login-panel__mobile-brand { margin-bottom: 2.5rem; }
}

.inline-icon { width: 14px; height: 14px; vertical-align: -2px; }

/* Cartões de escolha (seleção de cliente) */
.pick {
    display: flex; align-items: center; gap: .9rem; width: 100%;
    padding: .95rem 1.1rem; margin-bottom: .6rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    font: inherit; text-align: left; color: var(--fg); cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .08s;
}
.pick:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); text-decoration: none; }
.pick:hover svg { color: var(--brand); }
.pick svg { width: 18px; height: 18px; color: var(--fg-subtle); }
.pick__text { flex: 1; min-width: 0; }
.pick__name { font-weight: 600; display: block; }
.pick__meta { font-size: .8rem; color: var(--fg-muted); display: block; }

/* Lista de requisitos do instalador */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.checklist li:last-child { border-bottom: 0; }
.checklist svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .12rem; }
.checklist .ok { color: var(--success); }
.checklist .no { color: var(--danger); }

/* --------------------------------------------------------------- HTMX ---- */

/* Indicador de carregamento -- só aparece durante a requisição */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request .table { opacity: .55; transition: opacity .1s; }

.spinner {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid var(--border-strong); border-top-color: var(--brand);
    animation: spin .6s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* [x-cloak] evita o "pisca" do Alpine antes de ele inicializar */
[x-cloak] { display: none !important; }

/* ------------------------------------------------------------ responsivo -- */

.menu-toggle { display: none; }

@media (max-width: 900px) {
    .sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 60;
        transform: translateX(-100%); transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.is-open { transform: translateX(0); }
    .menu-toggle { display: inline-flex; }
    .content { padding: 1.25rem 1rem 3rem; }
    .backdrop { position: fixed; inset: 0; background: hsl(220 30% 8% / .5); z-index: 50; }
    .table th, .table td { padding-left: .85rem; padding-right: .85rem; }
}

@media (max-width: 560px) {
    .page-head { flex-direction: column; align-items: stretch; }
    .stat__value { font-size: 1.35rem; }
    .alerts { top: auto; bottom: 1rem; right: 1rem; left: 1rem; width: auto; }
}

/* --------------------------------------------------------- impressão ---- */

/* O cabeçalho de relatório existe só no papel. */
.impressao { display: none; }

@media print {
    /* Nada de cromo da interface: só o conteúdo. */
    .sidebar, .topbar, .staff-mobile-nav, .alerts, .pagination, .search, .personificando,
    .btn, .btn-group, .table__actions, .htmx-indicator, .spinner,
    .backdrop, .dropdown__menu, .field__hint {
        display: none !important;
    }

    /*
     * Tinta é cara: fundo branco e texto preto.
     *
     * Os seletores repetem os do tema escuro de propósito. Um `:root` sozinho
     * perde para `:root:not([data-theme="light"])`, e quem estivesse com o tema
     * escuro imprimiria uma folha preta -- com metade do texto invisível.
     */
    :root,
    :root[data-theme="dark"],
    :root[data-theme="light"],
    :root:not([data-theme="light"]) {
        --bg: #fff !important;
        --surface: #fff !important;
        --surface-2: #fff !important;
        --fg: #000 !important;
        --fg-muted: #333 !important;
        --fg-subtle: #555 !important;
        --border: #bbb !important;
        --border-strong: #999 !important;
        --brand: #000 !important;
        --brand-soft: #fff !important;
    }

    body { background: #fff; color: #000; font-size: 11pt; }
    .shell { display: block; }
    .content { padding: 0; max-width: none; }
    .page-head { display: none; }

    .impressao {
        display: block;
        margin-bottom: 1rem;
        padding-bottom: .6rem;
        border-bottom: 2px solid #000;
    }
    .impressao__marca { display: flex; align-items: center; gap: .8rem; }
    .impressao__logo { width: 44px; height: 44px; object-fit: contain; }
    .impressao__empresa { font-size: 1.1rem; font-weight: 700; }
    .impressao__titulo { font-size: 1rem; font-weight: 600; margin-top: .5rem; }
    .impressao__meta { font-size: .78rem; color: #444; }

    .card { border: 0; box-shadow: none; break-inside: auto; }
    .card__head, .card__foot { display: none; }
    .card__body { padding: 0; }

    .table { font-size: 10pt; width: 100%; }
    .table th {
        background: #eee !important; color: #000;
        border-bottom: 1px solid #000;
    }
    .table td, .table th { padding: .3rem .4rem; }
    .table tbody tr { break-inside: avoid; }
    thead { display: table-header-group; }   /* cabeçalho se repete a cada folha */

    .badge {
        border: 1px solid #999 !important; background: none !important;
        color: #000 !important; padding: 0 .3rem;
    }
    .avatar { display: none; }
    .grid { display: block; }
    .card + .card, .grid > * + * { margin-top: 1rem; }

    a[href]::after { content: ''; }   /* sem o URL colado em cada link */

    @page { margin: 1.5cm 1.2cm; }
}

/* ==========================================================================
   Área do morador — celular
   ==========================================================================
   Tela separada do painel administrativo de propósito: o morador usa de pé,
   com uma mão, na frente do portão. Alvo de toque grande, pouca informação por
   tela e nada de tabela.

   Tudo deriva das mesmas variáveis de marca do resto do sistema, então trocar
   a cor do condomínio muda o app do morador junto.
   ========================================================================== */

/* A cor do aplicativo do morador fica no :root porque a barra de baixo e a
   folha do "Mais" vivem fora de .mobile -- dentro dela, var(--m-brand) não
   resolvia e o item ativo nunca acendia. */
:root {
    --m-brand: hsl(var(--brand-h) var(--brand-s) 18%);
    --m-brand-claro: hsl(var(--brand-h) var(--brand-s) 96%);
}

.mobile {
    --m-fundo: hsl(210 20% 96%);

    max-width: 480px;
    margin: 0 auto;
    padding: 1rem 1rem 5.5rem;
    background: var(--m-fundo);
    min-height: 100vh;
}

:root[data-theme="dark"] { --m-brand-claro: hsl(var(--brand-h) 30% 16%); }
:root[data-theme="dark"] .mobile { --m-fundo: hsl(222 25% 9%); }

/* Faixa de volta ao painel, só para quem também administra o condomínio. */
.m-painel-volta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1rem;
    background: hsl(var(--brand-h) var(--brand-s) 18%);
    color: #fff;
    font-size: .82rem;
    text-decoration: none;
    text-align: center;
}
.m-painel-volta svg { width: 16px; height: 16px; flex: none; }
.m-painel-volta strong { text-decoration: underline; font-weight: 650; }
.m-painel-volta + .mobile { min-height: calc(100vh - 2.4rem); }

/* --------------------------------------------------------------- cabeçalho */

.m-hero {
    background: var(--m-brand);
    color: #fff;
    border-radius: 22px;
    padding: 1.4rem 1.25rem;
    margin-bottom: 1.1rem;
}
.m-hero__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.m-hero__ola { opacity: .72; font-size: .95rem; }
.m-hero__nome { font-size: 1.45rem; font-weight: 680; line-height: 1.2; letter-spacing: -.02em; }
.m-hero__local { opacity: .72; font-size: .88rem; margin-top: .15rem; }

.m-hero__sino {
    width: 46px; height: 46px; flex-shrink: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: hsl(0 0% 100% / .14); color: #fff; cursor: pointer;
    position: relative;
}
.m-hero__sino svg { width: 21px; height: 21px; }
.m-hero__sino[data-badge]::after {
    content: attr(data-badge);
    position: absolute; top: -2px; right: -2px;
    min-width: 20px; height: 20px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: 999px; background: var(--danger); color: #fff;
    font-size: .68rem; font-weight: 700;
}

/* ------------------------------------------------- deslizar para abrir ---- */

.m-deslizar {
    position: relative;
    margin-top: 1.15rem;
    height: 62px;
    border-radius: 999px;
    background: hsl(0 0% 100% / .16);
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
}
.m-deslizar__trilho {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    color: #fff; font-size: 1.05rem; font-weight: 600;
    pointer-events: none;
}
.m-deslizar__trilho svg { width: 18px; height: 18px; opacity: .6; }
.m-deslizar__botao {
    position: absolute; top: 6px; left: 6px;
    width: 50px; height: 50px;
    display: grid; place-items: center;
    border-radius: 50%; background: #fff; color: var(--m-brand);
    box-shadow: 0 2px 10px hsl(0 0% 0% / .25);
    cursor: grab; transition: left .18s ease;
}
.m-deslizar__botao:active { cursor: grabbing; transition: none; }
.m-deslizar__botao svg { width: 22px; height: 22px; }
.m-deslizar.is-aberto { background: hsl(142 60% 40% / .35); }
.m-deslizar.is-aberto .m-deslizar__botao { left: calc(100% - 56px); }
.m-deslizar.is-carregando .m-deslizar__trilho { opacity: .5; }
.m-acesso-visual { margin-top: 1.15rem; }
.m-acesso-visual .m-deslizar { margin-top: .65rem; }
.m-hero .m-camera--portao { aspect-ratio: 16 / 9; margin: 0; border: 2px solid hsl(0 0% 100% / .18); }

/* ------------------------------------------------------------- atalhos ---- */

.m-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: .6rem; margin-bottom: 1.4rem; }
.m-atalhos--2 { grid-template-columns: repeat(2, 1fr); gap: .8rem; }

.m-atalho {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: .9rem .4rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; color: var(--fg); text-decoration: none;
    font-size: .78rem; font-weight: 550; text-align: center;
    transition: transform .08s;
}
.m-atalho:active { transform: scale(.96); text-decoration: none; }
.m-atalho svg { width: 26px; height: 26px; color: var(--m-brand); }
.m-atalho__contador {
    position: absolute; margin: -.55rem 0 0 1.6rem;
    min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: 999px; background: var(--danger); color: #fff;
    font-size: .66rem; font-weight: 700;
}

.m-atalhos--2 .m-atalho { flex-direction: row; justify-content: flex-start; gap: .7rem; padding: 1.1rem; font-size: .92rem; }
.m-atalhos--2 .m-atalho svg { width: 22px; height: 22px; }
.m-atalho__icone {
    width: 42px; height: 42px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 12px; background: var(--m-brand-claro);
}

/* ---------------------------------------------------------------- listas -- */

.m-titulo { font-size: 1.05rem; font-weight: 650; margin: 0 0 .7rem; }

.m-lista { display: flex; flex-direction: column; gap: .55rem; list-style: none; margin: 0 0 1.4rem; padding: 0; }

.m-item {
    display: flex; align-items: center; gap: .8rem;
    padding: .85rem 1rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; color: var(--fg); text-decoration: none;
}
.m-item:active { transform: scale(.99); text-decoration: none; }
.m-item__icone {
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 12px; background: var(--m-brand-claro); color: var(--m-brand);
}
.m-item__icone svg { width: 19px; height: 19px; }
.m-item__corpo { flex: 1; min-width: 0; }
.m-item__titulo { font-weight: 600; font-size: .94rem; }
.m-item__sub { font-size: .8rem; color: var(--fg-muted); }
.m-item__hora { font-size: .78rem; color: var(--fg-subtle); white-space: nowrap; }

.m-item--destaque { border-color: var(--m-brand); background: var(--m-brand-claro); }
.m-item--nao-lida { border-color: var(--m-brand); background: var(--m-brand-claro); position: relative; }
.m-item--nao-lida::after {
    content: ''; width: 8px; height: 8px; flex-shrink: 0;
    border-radius: 50%; background: var(--m-brand);
}

.m-notificacao-ativar {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .55rem;
    margin: -.45rem 0 1.1rem; padding: .75rem 1rem;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); color: var(--m-brand);
    font: inherit; font-size: .84rem; font-weight: 650; cursor: pointer;
}
.m-notificacao-ativar svg { width: 18px; height: 18px; }
.m-notificacao-ativar.is-ativa { color: var(--success); cursor: default; }
.m-notificacoes-resumo__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.m-notificacoes-resumo__topo a { color: var(--m-brand); font-size: .8rem; font-weight: 650; }
.m-notificacoes-lidas {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    margin: 0 0 1rem; color: var(--fg-muted); font-size: .8rem;
}
.m-notificacoes-lidas button {
    border: 0; background: none; color: var(--m-brand);
    font: inherit; font-weight: 650; cursor: pointer; text-align: right;
}

.m-notificacoes-flutuantes {
    position: fixed;
    z-index: 1200;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    width: min(calc(100% - 24px), 440px);
    display: grid;
    gap: .55rem;
    transform: translateX(-50%);
    pointer-events: none;
}
.m-notificacao-flutuante {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid hsl(var(--brand-h) var(--brand-s) 35% / .2);
    border-radius: 16px;
    background: var(--surface);
    color: var(--fg);
    box-shadow: 0 14px 38px hsl(210 30% 10% / .22);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}
.m-notificacao-flutuante.is-visivel { opacity: 1; transform: translateY(0); }
.m-notificacao-flutuante__conteudo { min-width: 0; flex: 1; display: grid; gap: .16rem; }
.m-notificacao-flutuante__conteudo strong { font-size: .9rem; line-height: 1.25; }
.m-notificacao-flutuante__conteudo > span {
    overflow: hidden;
    color: var(--fg-muted);
    font-size: .79rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-notificacao-flutuante__acao { color: var(--m-brand); font-size: .8rem; font-weight: 700; }

.m-entrega-pendente { display: block; }
.m-entrega-pendente__resumo { display: flex; align-items: center; gap: .8rem; }
.m-entrega-pendente__confirmar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: .8rem;
    padding: .7rem .85rem;
    border: 1px solid hsl(var(--brand-h) var(--brand-s) 35% / .24);
    border-radius: 12px;
    background: var(--surface);
    color: var(--m-brand);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
.m-entrega-pendente__confirmar svg { width: 17px; height: 17px; }
.m-entrega-pendente__localizacao {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: .25rem;
    margin-top: .35rem;
    padding: .3rem .55rem;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--m-brand);
    font-size: .75rem;
    font-weight: 650;
}
.m-entrega-pendente__localizacao strong { font-size: .88rem; }

/* Localização física das correspondências na portaria. */
.correspondencia-localizacao-celula { width: 64px; text-align: center; }
.correspondencia-localizacao {
    display: inline-grid;
    min-width: 42px;
    height: 42px;
    padding-inline: .55rem;
    place-items: center;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 7px 18px var(--brand-ring);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1;
}
.correspondencia-localizacao.is-historico {
    background: var(--surface-2);
    color: var(--fg-muted);
    box-shadow: none;
}
.correspondencia-retirada-guia {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid hsl(var(--brand-h) var(--brand-s) 40% / .25);
    border-radius: 18px;
    background: var(--brand-soft);
}
.correspondencia-retirada-guia__numero {
    display: grid;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 17px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 9px 22px var(--brand-ring);
    font-size: 1.7rem;
    font-weight: 900;
}
.correspondencia-retirada-guia strong { display: block; }
.correspondencia-retirada-guia p { margin: .2rem 0 0; color: var(--fg-muted); font-size: .78rem; }
.bloqueio-entrada { border-color: var(--border); transition: border-color .18s ease, background .18s ease; }
.bloqueio-entrada.is-ativo { border-color: var(--danger); background: var(--danger-soft); }
.bloqueio-entrada.is-ativo legend, .bloqueio-entrada.is-ativo > .check { color: var(--danger); }
.m-cartao--perigo { border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger); }
.text-danger { color: var(--danger); }
.panico-global {
    position: sticky; top: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; gap: .75rem;
    padding: .75rem 1rem; background: #991b1b; color: #fff; box-shadow: 0 4px 18px rgb(0 0 0 / .22);
}
.panico-global[hidden] { display: none; }
.panico-global strong { padding: .2rem .5rem; border-radius: 999px; background: #fff; color: #991b1b; font-size: .75rem; }
[data-panico-gatilho] { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.panico-card { border: 2px solid var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.protocolo-grade { align-items: start; }
.protocolo-conversa { display: grid; gap: .9rem; }
.protocolo-msg { padding: .85rem 1rem; border-radius: 12px; background: var(--surface-2); }
.protocolo-msg.is-interna { background: var(--warning-soft); border: 1px solid var(--warning); }
.protocolo-msg p { margin: .35rem 0; }
.protocolo-msg > span { color: var(--fg-muted); font-size: .75rem; }

/* ------------------------------------------------------------- destaque --- */

.m-aviso-topo {
    display: flex; align-items: center; gap: .8rem;
    padding: 1rem 1.15rem; margin-bottom: 1.1rem;
    background: var(--m-brand); color: #fff; border-radius: 18px;
}
.m-aviso-topo svg { width: 22px; height: 22px; }
.m-aviso-topo__titulo { font-weight: 650; }
.m-aviso-topo__sub { font-size: .82rem; opacity: .78; }
.m-aviso-topo--claro { background: var(--surface); color: var(--fg); border: 1px solid var(--border); }
.m-aviso-topo--claro > svg { color: var(--m-brand); flex-shrink: 0; }
.m-aviso-topo--claro > div { flex: 1; }
.m-aviso-topo--claro .m-aviso-topo__sub { color: var(--fg-muted); opacity: 1; }

/* ----------------------------------------------------------------- cartão - */

.m-cartao {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 20px; padding: 1.15rem; margin-bottom: 1.1rem;
}
.m-cartao--marca { background: var(--m-brand); color: #fff; border: 0; text-align: center; }
.m-cartao--marca .m-cartao__titulo { font-weight: 650; margin-bottom: .9rem; }
.m-cartao__legenda { opacity: .75; font-size: .85rem; margin-top: .8rem; }

.comunicado-conteudo { line-height: 1.75; overflow-wrap: anywhere; }
.comunicado-mobile__meta { display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem; color: var(--fg-muted); font-size: .75rem; }
.comunicado-mobile__meta svg { width: 16px; height: 16px; color: var(--success); }
.comunicado-mobile__titulo { margin-bottom: 1rem; font-size: 1.35rem; }

.leitura-lista { max-height: 420px; overflow-y: auto; }
.leitura-item { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); }
.leitura-item:last-child { border-bottom: 0; }
.leitura-item > span { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; background: var(--success-soft); color: var(--success); }
.leitura-item > span svg { width: 18px; height: 18px; }
.leitura-item div { display: flex; flex-direction: column; min-width: 0; }
.leitura-item strong { font-size: .88rem; }
.leitura-item small { color: var(--fg-muted); font-size: .75rem; }

.m-qr { background: #fff; border-radius: 18px; padding: 1rem; display: inline-block; }
.m-qr svg { display: block; width: 190px; height: 190px; }

/* ---------------------------------------------------------------- câmeras - */

.m-cameras { background: #0b0f14; min-height: 100vh; padding: 1rem 1rem 5.5rem; max-width: 480px; margin: 0 auto; }
.m-cameras h1 { color: #fff; font-size: 1.3rem; margin-bottom: 1rem; }
.m-camera {
    position: relative; background: #151b23; border-radius: 16px;
    aspect-ratio: 16 / 10; display: grid; place-items: center; color: #3d4750;
    margin-bottom: .7rem; overflow: hidden;
}
.m-camera::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .76)); pointer-events: none; }
.m-camera img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }
.m-camera svg { width: 38px; height: 38px; }
.m-camera__nome { position: absolute; z-index: 2; left: .8rem; bottom: .7rem; color: #fff; font-size: .82rem; font-weight: 600; text-shadow: 0 1px 4px #000; }
.m-camera__hora { position: absolute; z-index: 2; right: .8rem; bottom: .7rem; color: #d7dde3; font-size: .72rem; font-family: var(--mono); text-shadow: 0 1px 4px #000; }
.m-camera__ao-vivo {
    position: absolute; z-index: 2; top: .7rem; left: .8rem;
    display: flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem; border-radius: 999px;
    background: #e5484d; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
}
.m-camera__ao-vivo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.m-cameras__grade { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.m-cameras__grade .m-camera { aspect-ratio: 4 / 3; margin: 0; }
.m-cameras__grade .m-camera__hora { display: none; }
.m-camera__erro { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 1rem; background: #151b23; color: #9aa5b1; text-align: center; font-size: .78rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
.m-camera.is-sem-imagem .m-camera__erro { opacity: 1; }
.m-camera--vazia { display: flex; flex-direction: column; gap: .75rem; color: #6b7680; }
.m-camera--vazia::after { display: none; }
.m-camera__conexao { color: #8f9ba7; font-size: .72rem; }
.m-camera__conexao::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%; background: #39d98a; box-shadow: 0 0 0 3px rgb(57 217 138 / .12); }
.m-camera__conexao.is-pausada::before { background: #f0a020; box-shadow: none; }
.m-camera__aviso { color: #6b7680; }

.camera-viewer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.camera-viewer-grid .m-camera { margin: 0; box-shadow: var(--shadow-sm); }
.camera-viewer-grid__principal { grid-column: 1 / -1; max-height: 620px; }
@media (max-width: 720px) {
    .camera-viewer-grid { grid-template-columns: 1fr; }
    .camera-viewer-grid__principal { grid-column: auto; }
}

.camera-preview-admin { margin: .4rem 0 1.25rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.camera-preview-admin__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.camera-preview-admin__quadro { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-height: 420px; overflow: hidden; border-radius: var(--radius-md); background: #111820; color: #8e99a5; }
.camera-preview-admin__quadro img { width: 100%; height: 100%; object-fit: contain; display: block; }
.camera-preview-admin__vazio { display: flex; flex-direction: column; align-items: center; gap: .6rem; font-size: .85rem; }
.camera-preview-admin__vazio svg { width: 34px; height: 34px; }
.camera-preview-admin.is-carregando .camera-preview-admin__vazio span::after { content: '…'; }
.camera-preview-admin.is-erro .camera-preview-admin__vazio { color: var(--danger); }

/* ------------------------------------------------------------ formulário -- */

.m-campo { margin-bottom: .9rem; }
.m-campo label { display: block; font-size: .82rem; color: var(--fg-muted); margin-bottom: .35rem; }
.m-campo .input, .m-campo .select, .m-campo .textarea { border-radius: 14px; padding: .8rem .9rem; font-size: 1rem; }
.m-agenda-periodo { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.m-agenda-label { margin: .15rem 0 .5rem; font-size: .82rem; color: var(--fg-muted); }
.m-dias { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-bottom: .55rem; }
.m-dia { cursor: pointer; }
.m-dia input { position: absolute; opacity: 0; pointer-events: none; }
.m-dia span { display: flex; min-height: 38px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--fg-muted); font-size: .78rem; font-weight: 600; }
.m-dia input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.m-item__acoes { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.m-editar { font-size: .78rem; font-weight: 650; color: var(--brand); }
.m-cancelar { padding: .35rem .55rem; border: 0; background: transparent; color: var(--danger); font: inherit; font-size: .75rem; font-weight: 650; cursor: pointer; }
.m-areas { display: flex; flex-direction: column; gap: .8rem; }
.m-area { margin: 0; }
.m-area__topo { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; }
.m-area__topo h3 { margin: 0; font-size: 1rem; }
.m-area__horario { display: flex; align-items: center; gap: .4rem; margin: 0 0 .65rem; color: var(--fg-muted); font-size: .82rem; }
.m-area__horario svg { width: 16px; height: 16px; color: var(--m-brand); }
.m-area__reservar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .85rem; padding-top: .8rem; border-top: 1px solid var(--border); color: var(--m-brand); font-size: .84rem; font-weight: 650; }
.m-area__reservar svg { width: 17px; height: 17px; }
.m-regras strong { display: block; margin-bottom: .4rem; }

.m-botao {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; padding: 1rem;
    border: 0; border-radius: 16px;
    background: var(--m-brand); color: #fff;
    font: inherit; font-size: 1.02rem; font-weight: 620;
    cursor: pointer;
}
.m-botao:active { transform: scale(.99); }
.m-botao svg { width: 19px; height: 19px; }
.m-botao--claro { background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong); }

/* -------------------------------------------------------- barra inferior -- */

.m-barra {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    display: flex; justify-content: space-around;
    max-width: 480px; margin: 0 auto;
    padding: .5rem .4rem calc(.5rem + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
}
.m-barra > a,
.m-barra summary {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .35rem .2rem; color: var(--fg-subtle); text-decoration: none;
    font-size: .68rem; line-height: 1.2; text-align: center;
    list-style: none; cursor: pointer;
}
.m-barra summary::-webkit-details-marker { display: none; }
.m-barra > a.is-ativo,
.m-barra summary.is-ativo { color: var(--m-brand); font-weight: 600; }
.m-barra svg { width: 21px; height: 21px; }

/* O item ativo ganha um berço arredondado: com cinco alvos colados, a cor
   sozinha some no meio dos outros. */
.m-barra > a.is-ativo svg,
.m-barra summary.is-ativo svg {
    background: var(--m-brand-claro); border-radius: 999px;
    padding: .2rem .85rem; box-sizing: content-box; width: 21px; height: 21px;
}

/* -------------------------------------------------- acesso recém-criado - */

.acesso-novo {
    margin-bottom: 1.2rem; padding: 1.1rem;
    border: 1px solid var(--success); border-radius: 18px;
    background: var(--success-soft);
}
.acesso-novo__topo { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .9rem; }
.acesso-novo__topo svg { width: 22px; height: 22px; flex: none; color: var(--success); }
.acesso-novo__topo strong { display: block; font-size: .95rem; }
.acesso-novo__topo p { margin: .15rem 0 0; font-size: .8rem; color: var(--fg-muted); }

.acesso-novo__dados { margin: 0 0 .9rem; display: grid; gap: .5rem; }
.acesso-novo__dados > div {
    display: flex; align-items: baseline; gap: .6rem;
    padding: .55rem .75rem; border-radius: 12px; background: var(--surface);
}
.acesso-novo__dados dt {
    flex: none; width: 5.5rem; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .03em; color: var(--fg-muted);
}
.acesso-novo__dados dd { margin: 0; font-size: .88rem; font-weight: 550; overflow-wrap: anywhere; }
.acesso-novo__dados code { font-family: var(--mono); font-size: .95rem; letter-spacing: .04em; }

.acesso-novo__copiar {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .85rem; border: 0; border-radius: 14px;
    background: var(--success); color: #fff;
    font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
    transition: background .12s;
}
.acesso-novo__copiar svg { width: 18px; height: 18px; }
.acesso-novo__copiar.is-copiado { background: var(--fg); }

/* ---------------------------------------------------- campo obrigatório - */

/* O asterisco só marca; quem explica é a legenda do formulário. Fica em cor
   de atenção, e não de erro: campo obrigatório não é campo errado. */
.req { color: var(--danger); font-weight: 700; margin-left: .15rem; }

.form-legenda {
    display: flex; align-items: center; gap: .4rem;
    margin: 0 0 1rem; font-size: .78rem; color: var(--fg-muted);
}
.form-legenda .req { margin: 0; }

/* Par de campos em que basta preencher um deles. */
.campo-ou {
    padding: .9rem; margin-bottom: 1rem;
    border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface-2);
}
.campo-ou > :last-child { margin-bottom: 0; }
.campo-ou__nota { margin: 0 0 .7rem; font-size: .78rem; color: var(--fg-muted); }
.campo-ou__nota strong { color: var(--fg); }

/* ------------------------------------------------------------------ mais - */

.m-mais { flex: 1; position: static; }
.m-mais__folha {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    max-width: 480px; margin: 0 auto;
    padding: .6rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 32px -12px hsl(220 30% 10% / 0.25);
    animation: m-mais-sobe .16s ease-out;
    transition: transform .18s ease-out;
    touch-action: none;
}
@keyframes m-mais-sobe { from { transform: translateY(12px); opacity: 0; } }

.m-mais__alca {
    width: 38px; height: 4px; margin: 0 auto .9rem;
    border-radius: 999px; background: var(--border-strong);
    cursor: pointer;
    /* área de toque maior que o traço visível -- fácil de acertar no celular */
    padding: .6rem 1rem; margin-top: -.6rem; margin-bottom: .3rem;
    background-clip: content-box;
}

.m-mais__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.m-mais__grade a {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: .85rem .35rem;
    border-radius: 16px; background: var(--surface-2);
    color: var(--fg); text-decoration: none;
    font-size: .72rem; font-weight: 550; line-height: 1.25; text-align: center;
}
.m-mais__grade a:active { transform: scale(.97); }
.m-mais__grade a.is-ativo { background: var(--m-brand-claro); color: var(--m-brand); }
.m-mais__icone { display: grid; place-items: center; }
.m-mais__icone svg { width: 22px; height: 22px; color: var(--m-brand); }

.m-mais__sair { margin-top: .7rem; }
.m-mais__sair button {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .8rem; border: 0; border-radius: 16px;
    background: transparent; color: var(--fg-muted);
    font: inherit; font-size: .78rem; font-weight: 550; cursor: pointer;
}
.m-mais__sair svg { width: 17px; height: 17px; }

/* Fundo escurecido: fecha ao toque, sem prender ninguém dentro da folha. */
.m-mais[open]::before {
    content: ''; position: fixed; inset: 0; z-index: 65;
    background: hsl(220 30% 8% / 0.4);
    animation: m-mais-fade .16s ease-out;
}
@keyframes m-mais-fade { from { opacity: 0; } }

.m-topo { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.m-topo h1 { font-size: 1.3rem; flex: 1; }
/* Subtítulo ocupa a linha inteira: ao lado do título ele espremia os dois. */
.m-topo p { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--fg-muted); }
.m-voltar {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
    color: var(--fg);
}
.m-vazio { text-align: center; padding: 2.5rem 1rem; color: var(--fg-muted); }
.m-vazio svg { width: 40px; height: 40px; color: var(--fg-subtle); margin-bottom: .6rem; }

/* ==========================================================================
   Portaria — telas de computador, usadas em pé e com pressa
   ========================================================================== */

/* A busca da mesa é a tela inteira: campo grande, foco automático, Enter. */
.search--grande { gap: .5rem; max-width: none; }
.search--grande .input { font-size: 1.05rem; padding-top: .7rem; padding-bottom: .7rem; }
.search--grande .btn { flex-shrink: 0; }

/* Cada resultado da busca: quem é à esquerda, o que fazer à direita. */
.achado {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
}
.achado:last-child { border-bottom: 0; padding-bottom: 0; }
.achado:first-child { padding-top: 0; }
.entrada-rapida { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .8rem; }
@media (max-width: 720px) { .entrada-rapida { grid-template-columns: 1fr; } }
.acesso-unificado .select-pesquisavel__campo { font-size: 1.05rem; min-height: 48px; }
.acesso-encontrado {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem 1rem; margin: .75rem 0 1rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.acesso-encontrado[hidden],[data-novo-visitante][hidden],.entrada-cartao-rapido__resultado[hidden]{display:none}
.cadastro-rapido__cabecalho {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding-top: 1rem; margin: 1rem 0; border-top: 1px solid var(--border);
}
.entrada-cartao-rapido{overflow:hidden;margin-top:1rem;border:1px solid hsl(var(--brand-h) 45% 60%/.28);border-radius:16px;background:var(--surface-2)}
.entrada-cartao-rapido__cabecalho{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.85rem 1rem;border-bottom:1px solid var(--border);background:var(--brand-soft)}
.entrada-cartao-rapido__cabecalho>span:first-child{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--surface);color:var(--brand);box-shadow:var(--shadow-sm)}
.entrada-cartao-rapido__cabecalho strong{display:block;font-size:.82rem}.entrada-cartao-rapido__cabecalho strong small{margin-left:.25rem;color:var(--fg-muted);font-size:.62rem;font-weight:600}.entrada-cartao-rapido__cabecalho p{margin:.1rem 0 0;color:var(--fg-muted);font-size:.66rem}
.entrada-cartao-rapido__leitura{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.6rem;padding:.85rem 1rem}
.entrada-cartao-rapido__leitura label>span:first-child{display:block;margin-bottom:.3rem;color:var(--fg-muted);font-size:.62rem;font-weight:750}
.entrada-cartao-rapido__controle{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:.55rem;min-height:44px;padding:0 .7rem;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);transition:border-color .16s,box-shadow .16s}.entrada-cartao-rapido__controle:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}.entrada-cartao-rapido__controle>svg{color:var(--brand)}.entrada-cartao-rapido__controle input{min-width:0;border:0;outline:0;background:transparent;color:var(--fg);font:700 .82rem var(--mono);letter-spacing:.04em;text-transform:uppercase}.entrada-cartao-rapido__controle input::placeholder{color:var(--fg-subtle);font-family:var(--font);font-weight:500;letter-spacing:0;text-transform:none}.entrada-cartao-rapido__controle kbd{padding:.18rem .35rem;border:1px solid var(--border);border-radius:5px;background:var(--surface-2);color:var(--fg-muted);font:600 .55rem var(--mono)}
.entrada-cartao-rapido__resultado{display:flex;align-items:center;gap:.65rem;margin:0 1rem .8rem;padding:.7rem .8rem;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.entrada-cartao-rapido__resultado>span{display:grid;flex:0 0 34px;width:34px;height:34px;place-items:center;border-radius:10px;background:var(--info-soft);color:var(--info)}.entrada-cartao-rapido__resultado strong{display:block;font-size:.72rem}.entrada-cartao-rapido__resultado p{margin:.05rem 0 0;color:var(--fg-muted);font-size:.63rem}.entrada-cartao-rapido__resultado.is-disponivel,.entrada-cartao-rapido__resultado.is-associado{border-color:hsl(152 55% 45%/.25);background:var(--success-soft)}.entrada-cartao-rapido__resultado.is-disponivel>span,.entrada-cartao-rapido__resultado.is-associado>span{background:var(--surface);color:var(--success)}.entrada-cartao-rapido__resultado.is-em_uso{border-color:hsl(38 80% 48%/.28);background:var(--warning-soft)}.entrada-cartao-rapido__resultado.is-em_uso>span{background:var(--surface);color:var(--warning)}.entrada-cartao-rapido__resultado.is-perdida,.entrada-cartao-rapido__resultado.is-bloqueada,.entrada-cartao-rapido__resultado.is-alerta{border-color:hsl(0 65% 52%/.27);background:var(--danger-soft)}.entrada-cartao-rapido__resultado.is-perdida>span,.entrada-cartao-rapido__resultado.is-bloqueada>span,.entrada-cartao-rapido__resultado.is-alerta>span{background:var(--surface);color:var(--danger)}
.entrada-cartao-rapido>footer{display:flex;align-items:center;gap:.4rem;padding:.6rem 1rem;border-top:1px solid var(--border);color:var(--fg-muted);font-size:.61rem}.entrada-cartao-rapido>footer svg{flex:0 0 14px;width:14px}
.visita-cartao{display:flex;align-items:center;gap:.5rem;margin-top:.35rem}.visita-cartao>span{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .45rem;border-radius:7px;background:var(--brand-soft);color:var(--brand);font:700 .63rem var(--mono)}.visita-cartao>span svg{width:12px;height:12px}.visita-cartao small{color:var(--fg-muted);font-size:.6rem}
@media (max-width: 720px) {
    .acesso-encontrado, .cadastro-rapido__cabecalho { align-items: flex-start; flex-direction: column; }
    .entrada-cartao-rapido__cabecalho{grid-template-columns:40px minmax(0,1fr)}.entrada-cartao-rapido__cabecalho>.badge{grid-column:2;width:max-content}.entrada-cartao-rapido__leitura{grid-template-columns:1fr}.entrada-cartao-rapido__leitura>.btn{width:100%}.visita-cartao{align-items:flex-start;flex-direction:column}
}

/* ================================================= Secretaria e atendimento */

.secretaria-cabecalho {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    margin-bottom: 1rem; padding: 1.6rem 1.75rem; border-radius: 20px;
    background: linear-gradient(125deg, var(--sidebar), hsl(var(--brand-h) 48% 27%));
    color: #fff; box-shadow: var(--shadow);
}
.secretaria-cabecalho::after { content: ''; position: absolute; right: -70px; bottom: -115px; width: 260px; height: 260px; border-radius: 50%; background: hsl(0 0% 100% / .07); pointer-events: none; }
.secretaria-cabecalho h1 { margin: .15rem 0 .35rem; color: #fff; font-size: clamp(1.6rem, 3vw, 2.15rem); }
.secretaria-cabecalho p { max-width: 650px; margin: 0; color: hsl(0 0% 100% / .72); }
.secretaria-cabecalho__rotulo { color: hsl(0 0% 100% / .66); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.secretaria-cabecalho__hoje { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; gap: .7rem; min-width: 150px; padding: .75rem .9rem; border: 1px solid hsl(0 0% 100% / .16); border-radius: 14px; background: hsl(0 0% 100% / .09); }
.secretaria-cabecalho__hoje svg { width: 21px; height: 21px; }
.secretaria-cabecalho__hoje span { display: grid; }
.secretaria-cabecalho__hoje small { color: hsl(0 0% 100% / .62); font-size: .68rem; }
.secretaria-cabecalho__hoje strong { font-size: .9rem; }

.secretaria-atencao { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid hsl(0 72% 51% / .25); border-radius: 14px; background: var(--danger-soft); color: var(--danger); }
.secretaria-atencao > svg { width: 22px; height: 22px; flex-shrink: 0; }
.secretaria-atencao > div { display: grid; flex: 1; }
.secretaria-atencao span { margin-top: .1rem; color: var(--fg-muted); font-size: .8rem; }

.secretaria-indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.secretaria-indicador { display: flex; align-items: center; gap: .85rem; min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
a.secretaria-indicador:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow); text-decoration: none; }
.secretaria-indicador.is-ativo { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.secretaria-indicador__icone { width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0; border-radius: 13px; }
.secretaria-indicador__icone svg { width: 20px; height: 20px; }
.secretaria-indicador__icone.is-info { background: var(--info-soft); color: var(--info); }
.secretaria-indicador__icone.is-brand { background: var(--brand-soft); color: var(--brand); }
.secretaria-indicador__icone.is-warning { background: var(--warning-soft); color: var(--warning); }
.secretaria-indicador__icone.is-success { background: var(--success-soft); color: var(--success); }
.secretaria-indicador > span:last-child { display: grid; min-width: 0; }
.secretaria-indicador strong { font-size: 1.45rem; line-height: 1.1; }
.secretaria-indicador small { overflow: hidden; margin-top: .15rem; color: var(--fg-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }

.secretaria-fila { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.secretaria-fila__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--border); }
.secretaria-fila__topo h2 { margin: 0; font-size: 1.12rem; }
.secretaria-fila__topo p { margin: .2rem 0 0; color: var(--fg-muted); font-size: .78rem; }
.secretaria-filtros { display: flex; align-items: center; gap: .55rem; }
.secretaria-filtros .select { min-width: 175px; }
.secretaria-busca { position: relative; display: flex; align-items: center; min-width: min(320px, 30vw); }
.secretaria-busca svg { position: absolute; left: .75rem; width: 17px; height: 17px; color: var(--fg-subtle); pointer-events: none; }
.secretaria-busca input { width: 100%; min-height: 38px; padding: .55rem .75rem .55rem 2.25rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; font-size: .82rem; }
.secretaria-busca input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.secretaria-lista { display: grid; }
.secretaria-protocolo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .34fr) auto; align-items: center; gap: 1rem; min-width: 0; padding: 1rem 1.1rem 1rem 1.35rem; border-bottom: 1px solid var(--border); color: var(--fg); transition: background .14s ease; }
.secretaria-protocolo:last-child { border-bottom: 0; }
.secretaria-protocolo:hover { background: var(--surface-2); text-decoration: none; }
.secretaria-protocolo.is-vencido { background: linear-gradient(90deg, var(--danger-soft), transparent 38%); }
.secretaria-protocolo__prioridade { position: absolute; inset: .75rem auto .75rem 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--fg-subtle); }
.secretaria-protocolo__prioridade.is-alta { background: var(--warning); }
.secretaria-protocolo__prioridade.is-urgente { background: var(--danger); }
.secretaria-protocolo__prioridade.is-baixa { background: var(--info); }
.secretaria-protocolo__principal { min-width: 0; }
.secretaria-protocolo__linha { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.secretaria-protocolo__linha > strong { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.secretaria-protocolo__meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .35rem; color: var(--fg-muted); font-size: .76rem; }
.secretaria-protocolo__meta span { position: relative; }
.secretaria-protocolo__meta span + span::before { content: '•'; position: absolute; left: -.55rem; color: var(--fg-subtle); }
.secretaria-protocolo__lateral { display: grid; justify-items: end; min-width: 0; color: var(--fg-muted); font-size: .78rem; text-align: right; }
.secretaria-protocolo__lateral span, .secretaria-protocolo__lateral small { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.secretaria-protocolo__lateral small { margin-top: .2rem; color: var(--fg-subtle); }
.secretaria-protocolo > svg { width: 18px; height: 18px; color: var(--fg-subtle); }
.secretaria-vazio { display: grid; justify-items: center; padding: 3.5rem 1rem; color: var(--fg-muted); text-align: center; }
.secretaria-vazio > svg { width: 42px; height: 42px; margin-bottom: .7rem; color: var(--fg-subtle); }
.secretaria-vazio h3 { margin: 0; color: var(--fg); }
.secretaria-vazio p { margin: .35rem 0 1rem; }
.badge--muted { background: var(--surface-2); color: var(--fg-muted); }

/* O atalho principal do morador precisa parecer uma ação, não um item perdido. */
.m-atendimento-destaque { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .85rem; margin: -.2rem 0 1.25rem; padding: 1.15rem; border: 1px solid hsl(var(--brand-h) var(--brand-s) 35% / .18); border-radius: 20px; background: linear-gradient(145deg, var(--surface), var(--m-brand-claro)); box-shadow: var(--shadow-sm); }
.m-atendimento-destaque__icone { width: 46px; height: 46px; display: grid; place-items: center; grid-row: span 2; border-radius: 14px; background: var(--m-brand); color: #fff; }
.m-atendimento-destaque__icone svg { width: 22px; height: 22px; }
.m-atendimento-destaque__rotulo { color: var(--m-brand); font-size: .7rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.m-atendimento-destaque h2 { margin: .1rem 0 .2rem; font-size: 1.05rem; }
.m-atendimento-destaque p { margin: 0; color: var(--fg-muted); font-size: .8rem; line-height: 1.45; }
.m-atendimento-destaque__botao { display: flex; align-items: center; justify-content: center; gap: .45rem; grid-column: 1 / -1; margin-top: .8rem; padding: .8rem; border-radius: 13px; background: var(--m-brand); color: #fff; font-size: .88rem; font-weight: 700; }
.m-atendimento-destaque__botao:hover { color: #fff; text-decoration: none; }
.m-atendimento-destaque__botao svg { width: 17px; height: 17px; }
.m-atendimento-destaque__acompanhar { display: flex; align-items: center; justify-content: center; gap: .25rem; grid-column: 1 / -1; padding-top: .4rem; color: var(--m-brand); font-size: .76rem; font-weight: 650; }
.m-atendimento-destaque__acompanhar svg { width: 14px; height: 14px; }

.m-atendimento-hero { margin-bottom: 1.3rem; padding: 1.3rem; border-radius: 22px; background: var(--m-brand); color: #fff; }
.m-atendimento-hero__icone { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 15px; background: hsl(0 0% 100% / .14); }
.m-atendimento-hero__icone svg { width: 23px; height: 23px; }
.m-atendimento-hero span { color: hsl(0 0% 100% / .7); font-size: .76rem; font-weight: 650; }
.m-atendimento-hero h2 { margin: .15rem 0 .35rem; color: #fff; font-size: 1.25rem; }
.m-atendimento-hero p { margin: 0 0 1rem; color: hsl(0 0% 100% / .7); font-size: .84rem; line-height: 1.5; }
.m-atendimento-hero .m-botao { background: #fff; color: var(--m-brand); }
.m-secao-titulo { display: flex; align-items: end; justify-content: space-between; margin: 0 0 .7rem; }
.m-secao-titulo h2 { margin: 0; font-size: 1.02rem; }
.m-secao-titulo p { margin: .1rem 0 0; color: var(--fg-muted); font-size: .72rem; }
.m-vazio--cartao { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.m-vazio--cartao h3 { margin: 0 0 .25rem; color: var(--fg); font-size: 1rem; }
.m-vazio--cartao p { margin: 0; font-size: .82rem; }
.m-chamados { gap: .7rem; }
.m-chamado { align-items: flex-start; border: 1px solid var(--border); border-radius: 17px; box-shadow: var(--shadow-sm); }
.m-chamado > svg { width: 17px; height: 17px; align-self: center; flex-shrink: 0; color: var(--fg-subtle); }
.m-chamado__icone.is-concluido { background: var(--success-soft); color: var(--success); }
.m-chamado__icone.is-em_atendimento { background: var(--brand-soft); color: var(--brand); }
.m-chamado__icone.is-aguardando_morador { background: var(--warning-soft); color: var(--warning); }
.m-chamado__topo { display: flex; justify-content: space-between; gap: .7rem; }
.m-chamado__topo small { flex-shrink: 0; color: var(--fg-subtle); font-size: .68rem; font-weight: 500; }
.m-chamado__status { display: inline-flex; width: fit-content; margin-top: .45rem; padding: .18rem .5rem; border-radius: 999px; background: var(--info-soft); color: var(--info); font-size: .68rem; font-weight: 700; }
.m-chamado__status.is-concluido { background: var(--success-soft); color: var(--success); }
.m-chamado__status.is-em_atendimento { background: var(--brand-soft); color: var(--brand); }
.m-chamado__status.is-aguardando_morador { background: var(--warning-soft); color: var(--warning); }
.m-chamado__status.is-cancelado { background: var(--surface-2); color: var(--fg-muted); }

@media (max-width: 1000px) {
    .secretaria-indicadores { grid-template-columns: repeat(2, 1fr); }
    .secretaria-fila__topo { align-items: stretch; flex-direction: column; }
    .secretaria-busca { flex: 1; min-width: 180px; }
}
@media (max-width: 720px) {
    .secretaria-cabecalho { align-items: flex-start; padding: 1.25rem; }
    .secretaria-cabecalho__hoje { display: none; }
    .secretaria-atencao { align-items: flex-start; flex-wrap: wrap; }
    .secretaria-atencao .btn { width: 100%; }
    .secretaria-filtros { align-items: stretch; flex-direction: column; }
    .secretaria-filtros .select, .secretaria-busca { width: 100%; min-width: 0; }
    .secretaria-protocolo { grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
    .secretaria-protocolo__lateral { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

/* ============================================== Rotinas administrativas */

.cadastro-complementar { align-items: start; }
.cadastro-complementar .card__head > svg { width: 22px; height: 22px; color: var(--brand); }
.cadastro-linha { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.cadastro-linha:first-child { padding-top: 0; }
.cadastro-linha > div { display: grid; min-width: 0; }
.cadastro-linha strong, .cadastro-linha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadastro-linha span { margin-top: .12rem; color: var(--fg-muted); font-size: .76rem; }
.cadastro-linha form { flex-shrink: 0; }
.cadastro-adicionar { margin-top: .9rem; border: 1px dashed var(--border-strong); border-radius: 12px; }
.cadastro-adicionar summary { display: flex; align-items: center; gap: .4rem; padding: .75rem; color: var(--brand); font-size: .82rem; font-weight: 700; cursor: pointer; list-style: none; }
.cadastro-adicionar summary::-webkit-details-marker { display: none; }
.cadastro-adicionar summary svg { width: 16px; height: 16px; }
.cadastro-adicionar[open] summary { border-bottom: 1px solid var(--border); }
.cadastro-adicionar form { padding: .85rem; }
.empty--compact { padding: 1.25rem .5rem; }

.acao-inline { position: relative; }
.acao-inline > summary { list-style: none; cursor: pointer; }
.acao-inline > summary::-webkit-details-marker { display: none; }
.acao-inline[open] form { position: absolute; z-index: 20; right: 0; width: 310px; display: grid; gap: .55rem; padding: .8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }

.relatorio-barras { display: grid; gap: 1rem; }
.relatorio-barras > div > span { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; font-size: .8rem; }
.relatorio-barras > div > span b { color: var(--fg-muted); }
.relatorio-barras i { display: block; overflow: hidden; height: 9px; border-radius: 999px; background: var(--surface-2); }
.relatorio-barras em { display: block; min-width: 3px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), hsl(calc(var(--brand-h) + 28) 70% 55%)); }

/* Livro operacional e painel executivo */
.operacao-hero,.indicadores-hero{position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:1.25rem;padding:2rem;border-radius:24px;color:#fff;background:linear-gradient(135deg,hsl(var(--brand-h) 53% 24%),hsl(var(--brand-h) 57% 15%));box-shadow:0 16px 38px hsl(var(--brand-h) 45% 18%/.18)}
.operacao-hero{flex-wrap:wrap}.operacao-hero__texto{flex:1;min-width:280px}.operacao-hero:after,.indicadores-hero:after{content:"";position:absolute;right:-80px;bottom:-145px;width:330px;height:330px;border:1px solid rgb(255 255 255/.12);border-radius:50%;box-shadow:0 0 0 48px rgb(255 255 255/.035),0 0 0 96px rgb(255 255 255/.025)}
.operacao-hero__texto,.indicadores-hero>div{position:relative;z-index:1}.operacao-hero__eyebrow,.indicadores-hero__eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.7rem;color:hsl(var(--brand-h) 35% 78%);font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.operacao-hero h1,.indicadores-hero h1{margin:0 0 .55rem;color:#fff;font-size:clamp(1.6rem,3vw,2.25rem);letter-spacing:-.035em}.operacao-hero p,.indicadores-hero p{max-width:650px;margin:0;color:rgb(255 255 255/.72);font-size:.98rem;line-height:1.55}.btn--hero{position:relative;z-index:1;flex:none;border-color:#fff;background:#fff;color:hsl(var(--brand-h) 55% 22%)}.btn--hero:hover{background:hsl(var(--brand-h) 30% 96%)}
.operacao-hero__resumo{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:530px;margin-top:1.6rem;border-top:1px solid rgb(255 255 255/.13)}.operacao-hero__resumo a{display:flex;flex-direction:column;padding:1.05rem 1rem 0;color:inherit;text-decoration:none;border-left:1px solid rgb(255 255 255/.13)}.operacao-hero__resumo a:first-child{padding-left:0;border-left:0}.operacao-hero__resumo strong{font-size:1.55rem;line-height:1}.operacao-hero__resumo span{margin-top:.35rem;color:rgb(255 255 255/.64);font-size:.73rem}.operacao-hero__resumo .is-alerta strong{color:#ffbf69}
.alerta-operacional,.gestao-alerta{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;padding:1rem 1.15rem;border:1px solid #fed7aa;border-radius:16px;background:#fff8ed;color:#7c2d12}.alerta-operacional__icone,.gestao-alerta>span{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:13px;background:#ffedd5;color:#c2410c}.alerta-operacional div,.gestao-alerta div{flex:1}.alerta-operacional strong,.gestao-alerta strong{font-size:.9rem}.alerta-operacional p,.gestao-alerta p{margin:.18rem 0 0;color:#9a3412;font-size:.78rem}.alerta-operacional a,.gestao-alerta a{display:flex;align-items:center;gap:.35rem;color:#9a3412;font-size:.8rem;font-weight:800;text-decoration:none}
.livro-layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:1.25rem}.livro-principal{min-width:0}.secao-cabecalho{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:0 0 .9rem}.secao-cabecalho h2{margin:.15rem 0 0;font-size:1.15rem}.secao-cabecalho__sobrelinha{color:var(--brand);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.secao-cabecalho__total{color:var(--fg-muted);font-size:.75rem}.filtro-operacional{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(155px,.75fr) minmax(155px,.75fr) auto auto;gap:.65rem;margin-bottom:.85rem;padding:.75rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.search--wide{min-width:0}.filtro-operacional .btn{white-space:nowrap}
.ocorrencia-lista{display:grid;gap:.65rem}.ocorrencia-item{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:.85rem;overflow:hidden;padding:1rem 1rem 1rem 1.1rem;border:1px solid var(--border);border-radius:17px;background:var(--surface);color:var(--fg);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.ocorrencia-item:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#94a3b8}.ocorrencia-item--alta:before{background:#f59e0b}.ocorrencia-item--urgente:before{background:#ef4444}.ocorrencia-item:hover{transform:translateY(-2px);border-color:hsl(var(--brand-h) 35% 72%);box-shadow:0 10px 28px rgb(15 23 42/.09)}.ocorrencia-item__icone{display:grid;width:46px;height:46px;place-items:center;border-radius:14px;background:hsl(var(--brand-h) 28% 94%);color:var(--brand)}.ocorrencia-item--urgente .ocorrencia-item__icone{background:#fef2f2;color:#dc2626}.ocorrencia-item--alta .ocorrencia-item__icone{background:#fffbeb;color:#d97706}.ocorrencia-item__conteudo{display:flex;min-width:0;flex-direction:column}.ocorrencia-item__topo{display:flex;align-items:center;gap:.75rem;margin-bottom:.22rem}.ocorrencia-item__topo time{margin-left:auto;color:var(--fg-muted);font-size:.7rem}.ocorrencia-item__tipo{color:var(--brand);font-size:.67rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.ocorrencia-item__conteudo>strong{font-size:.94rem}.ocorrencia-item__resumo{overflow:hidden;margin-top:.2rem;color:var(--fg-muted);font-size:.78rem;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}.ocorrencia-item__meta{display:flex;flex-wrap:wrap;gap:.65rem 1rem;margin-top:.65rem;color:var(--fg-muted);font-size:.67rem}.ocorrencia-item__meta span{display:flex;align-items:center;gap:.25rem}.ocorrencia-item__meta svg{width:13px;height:13px}.ocorrencia-item__lateral{display:flex;min-width:118px;align-items:flex-end;justify-content:center;flex-direction:column;gap:.45rem}.ocorrencia-item__lateral>svg{margin-top:auto;color:var(--fg-muted)}.prioridade{font-size:.65rem;font-weight:700}.prioridade--urgente{color:#dc2626}.prioridade--alta{color:#b45309}.badge--status-aberta{background:#eff6ff;color:#1d4ed8}.badge--status-em_andamento{background:#fff7ed;color:#c2410c}.badge--status-resolvida{background:#ecfdf5;color:#047857}.empty--spacious{min-height:270px}
.livro-lateral{display:flex;flex-direction:column;gap:1rem}.turno-card{position:sticky;top:1rem;padding:1.25rem;border:1px solid hsl(var(--brand-h) 28% 84%);border-radius:20px;background:linear-gradient(160deg,hsl(var(--brand-h) 27% 97%),hsl(var(--brand-h) 28% 93%));box-shadow:var(--shadow-sm)}.turno-card__head{display:flex;gap:.75rem;align-items:center}.turno-card__head>span{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:var(--brand);color:#fff}.turno-card__head small{color:var(--fg-muted);font-size:.65rem;text-transform:uppercase}.turno-card h2{margin:.05rem 0 0;font-size:1rem}.turno-card__titulo{margin:1.1rem 0 .6rem;font-size:.88rem;font-weight:700}.turno-card__rota{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.75rem;padding:.7rem;border-radius:12px;background:rgb(255 255 255/.65);font-size:.7rem;font-weight:700}.turno-card>a{display:flex;align-items:center;gap:.3rem;margin-top:1rem;color:var(--brand);font-size:.75rem;font-weight:800;text-decoration:none}.boas-praticas-card{display:flex;gap:.7rem;padding:1rem;border:1px dashed var(--border);border-radius:16px;background:var(--surface)}.boas-praticas-card>span{color:var(--success)}.boas-praticas-card strong{font-size:.78rem}.boas-praticas-card p{margin:.25rem 0 0;color:var(--fg-muted);font-size:.7rem;line-height:1.5}
.indicadores-hero{align-items:center}.indicadores-hero__periodo{display:flex!important;min-width:230px;flex-direction:column;padding:1rem 1.15rem;border:1px solid rgb(255 255 255/.13);border-radius:16px;background:rgb(255 255 255/.08)}.indicadores-hero__periodo span{color:rgb(255 255 255/.6);font-size:.66rem;text-transform:uppercase}.indicadores-hero__periodo strong{margin:.25rem 0;font-size:.9rem}.indicadores-hero__periodo small{color:rgb(255 255 255/.6)}.relatorio-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding:.8rem 1rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.relatorio-toolbar form{display:flex;align-items:flex-end;gap:.65rem}.relatorio-toolbar .field{min-width:150px}.relatorio-toolbar__ate{padding-bottom:.72rem;color:var(--fg-muted);font-size:.75rem}
.kpi-destaques{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem}.kpi-card{position:relative;display:flex;min-height:185px;flex-direction:column;padding:1.25rem;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm)}.kpi-card--brand{border:0;color:#fff;background:linear-gradient(145deg,var(--brand),hsl(var(--brand-h) 58% 28%))}.kpi-card__topo{display:flex;align-items:center;gap:.55rem;color:var(--fg-muted);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.kpi-card--brand .kpi-card__topo{color:rgb(255 255 255/.7)}.kpi-card__icone{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:hsl(var(--brand-h) 28% 94%);color:var(--brand)}.kpi-card--brand .kpi-card__icone{background:rgb(255 255 255/.14);color:#fff}.kpi-card>strong{margin-top:1.25rem;font-size:2.1rem;letter-spacing:-.05em;line-height:1}.kpi-card>p{margin:.3rem 0 0;font-size:.8rem;font-weight:700}.kpi-card>small{margin-top:auto;color:var(--fg-muted);font-size:.67rem}.kpi-card--brand>small{color:rgb(255 255 255/.65)}.kpi-card--progress{align-items:center;text-align:center}.kpi-card--progress .kpi-card__topo{align-self:flex-start}.kpi-circular{display:grid;width:88px;height:88px;margin:.7rem auto .1rem;place-items:center;border-radius:50%;background:conic-gradient(var(--brand) var(--progresso),var(--surface-2) 0)}.kpi-circular:before{content:"";position:absolute;width:68px;height:68px;border-radius:50%;background:var(--surface)}.kpi-circular span{position:relative;z-index:1;display:flex;flex-direction:column}.kpi-circular strong{font-size:1.1rem}.kpi-circular small{font-size:.58rem;color:var(--fg-muted)}.kpi-card--progress>p{font-size:.67rem;color:var(--fg-muted)}
.indicadores-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.65fr);gap:1rem}.indicadores-coluna-principal,.indicadores-coluna-lateral{display:flex;min-width:0;flex-direction:column;gap:1rem}.painel-card{overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm)}.painel-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.15rem 1.25rem;border-bottom:1px solid var(--border)}.painel-card__head h2{margin:.12rem 0;font-size:1.05rem}.painel-card__head p{margin:0;color:var(--fg-muted);font-size:.7rem}.painel-card__total{padding:.38rem .65rem;border-radius:999px;background:var(--surface-2);color:var(--fg-muted);font-size:.65rem;font-weight:700}.relatorio-barras--executivo{padding:1.25rem}.relatorio-barras--executivo>div>span{font-size:.74rem}.relatorio-barras--executivo b small{margin-left:.2rem;color:var(--fg-muted);font-weight:500}.relatorio-barras--executivo i{height:10px}.relatorio-barras--executivo em.barra--concluido,.relatorio-barras--executivo em.barra--fechado{background:#10b981}.relatorio-barras--executivo em.barra--em_andamento{background:#f59e0b}.lista-executiva a{display:grid;grid-template-columns:8px minmax(0,1fr) auto 18px;align-items:center;gap:.7rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--border);color:var(--fg);text-decoration:none;transition:background .15s}.lista-executiva a:last-child{border-bottom:0}.lista-executiva a:hover{background:var(--surface-2)}.lista-executiva__marcador{width:7px;height:34px;border-radius:99px;background:#94a3b8}.lista-executiva__marcador--alta{background:#f59e0b}.lista-executiva__marcador--urgente{background:#ef4444}.lista-executiva strong,.agenda-executiva strong{display:block;font-size:.78rem}.lista-executiva small,.agenda-executiva small{color:var(--fg-muted);font-size:.65rem}.lista-executiva time{color:var(--fg-muted);font-size:.67rem}.lista-executiva svg{color:var(--fg-muted)}
.base-card{overflow:hidden;padding:1.25rem;border-radius:20px;color:#fff;background:linear-gradient(145deg,hsl(var(--brand-h) 55% 27%),hsl(var(--brand-h) 60% 17%));box-shadow:var(--shadow-sm)}.base-card__head{display:flex;align-items:center;gap:.7rem}.base-card__head>span{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:rgb(255 255 255/.12)}.base-card__head small{color:rgb(255 255 255/.6);font-size:.63rem;text-transform:uppercase}.base-card__head h2{margin:.05rem 0 0;color:#fff;font-size:.95rem}.base-card__numero{display:flex;align-items:baseline;gap:.55rem;margin:1.3rem 0}.base-card__numero strong{font-size:2.2rem}.base-card__numero span{color:rgb(255 255 255/.68);font-size:.7rem}.base-card__rodape{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;padding-top:.85rem;border-top:1px solid rgb(255 255 255/.12)}.base-card__rodape span{font-size:.65rem;color:rgb(255 255 255/.65)}.base-card__rodape strong{display:block;margin-bottom:.15rem;color:#fff;font-size:.95rem}.painel-card--compacto .painel-card__head{align-items:center}.agenda-executiva>div{display:flex;gap:.75rem;align-items:center;padding:.85rem 1.1rem;border-bottom:1px solid var(--border)}.agenda-executiva>div:last-child{border-bottom:0}.agenda-executiva time{display:flex;flex:0 0 44px;width:44px;height:48px;align-items:center;justify-content:center;flex-direction:column;border-radius:11px;background:hsl(var(--brand-h) 28% 94%);color:var(--brand)}.agenda-executiva time strong{font-size:1rem;line-height:1}.agenda-executiva time span{font-size:.55rem;font-weight:800}.decisao-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border:1px solid #fed7aa;border-radius:18px;background:#fffaf2}.decisao-card>span{color:#d97706}.decisao-card small{display:block;color:#92400e;font-size:.62rem;text-transform:uppercase}.decisao-card strong{display:inline-block;margin-right:.3rem;color:#7c2d12;font-size:1.4rem}.decisao-card p{display:inline;color:#92400e;font-size:.68rem}

@media(max-width:1100px){.livro-layout,.indicadores-layout{grid-template-columns:1fr}.livro-lateral{display:grid;grid-template-columns:1fr 1fr}.turno-card{position:static}.kpi-destaques{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.operacao-hero,.indicadores-hero{padding:1.4rem;flex-direction:column}.operacao-hero__resumo{grid-template-columns:repeat(2,1fr);max-width:none}.operacao-hero__resumo a:nth-child(3){padding-left:0;border-left:0}.filtro-operacional{grid-template-columns:1fr 1fr}.filtro-operacional .search{grid-column:1/-1}.ocorrencia-item{grid-template-columns:42px minmax(0,1fr)}.ocorrencia-item__lateral{grid-column:2;min-width:0;align-items:center;justify-content:flex-start;flex-direction:row}.ocorrencia-item__lateral>svg{margin:0 0 0 auto}.relatorio-toolbar,.relatorio-toolbar form{align-items:stretch;flex-direction:column}.relatorio-toolbar__ate{display:none}.relatorio-toolbar .field{min-width:0}.indicadores-hero__periodo{width:100%;min-width:0}.livro-lateral{grid-template-columns:1fr}}
@media(max-width:560px){.kpi-destaques{grid-template-columns:1fr 1fr;gap:.65rem}.kpi-card{min-height:155px;padding:1rem}.kpi-card>strong{font-size:1.7rem}.filtro-operacional{grid-template-columns:1fr}.filtro-operacional .search{grid-column:auto}.ocorrencia-item__resumo{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ocorrencia-item__meta span:nth-child(1){display:none}.operacao-hero__resumo{font-size:.9rem}.alerta-operacional,.gestao-alerta{align-items:flex-start}.alerta-operacional a,.gestao-alerta a{display:none}.lista-executiva a{padding:.8rem .9rem}.lista-executiva time{display:none}.base-card__rodape{grid-template-columns:1fr 1fr}}

@media print{.relatorio-toolbar,.sidebar,.app-header,.gestao-alerta{display:none!important}.indicadores-hero{color:#111;background:#fff;box-shadow:none;border:1px solid #ddd}.indicadores-hero h1,.indicadores-hero p{color:#111}.kpi-destaques{grid-template-columns:repeat(4,1fr)}.indicadores-layout{grid-template-columns:1.5fr .65fr}.painel-card,.kpi-card,.base-card{break-inside:avoid;box-shadow:none}}

[data-camera-protegida],[data-camera-protegida] img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kpi-circular{position:relative}

/* Histórico de entradas e saídas */
.acessos-hero{position:relative;overflow:hidden;margin-bottom:1.5rem;padding:2rem;border-radius:24px;color:#fff;background:linear-gradient(135deg,hsl(var(--brand-h) 55% 25%),hsl(var(--brand-h) 62% 14%));box-shadow:0 18px 42px hsl(var(--brand-h) 45% 18%/.2)}
.acessos-hero:after{position:absolute;right:-90px;bottom:-170px;width:360px;height:360px;border:1px solid rgb(255 255 255/.12);border-radius:50%;box-shadow:0 0 0 52px rgb(255 255 255/.035),0 0 0 104px rgb(255 255 255/.02);content:""}
.acessos-hero__cabecalho{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:2rem}
.acessos-hero__texto{max-width:680px}.acessos-hero__eyebrow{display:flex;align-items:center;gap:.45rem;margin-bottom:.65rem;color:hsl(var(--brand-h) 38% 78%);font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.acessos-hero__eyebrow svg{width:16px;height:16px}.acessos-hero h1{margin:0 0 .45rem;color:#fff;font-size:clamp(1.7rem,3vw,2.35rem);letter-spacing:-.04em}.acessos-hero p{max-width:620px;margin:0;color:rgb(255 255 255/.7);line-height:1.55}.acessos-hero__acao{position:relative;z-index:1;border-color:rgb(255 255 255/.7);background:#fff;color:hsl(var(--brand-h) 58% 22%);box-shadow:0 8px 24px rgb(0 0 0/.12)}.acessos-hero__acao:hover{background:hsl(var(--brand-h) 25% 96%)}
.acessos-resumo{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-top:1.7rem}.acessos-resumo__item{display:flex;min-width:0;align-items:center;gap:.75rem;padding:.9rem 1rem;border:1px solid rgb(255 255 255/.1);border-radius:15px;background:rgb(255 255 255/.07);backdrop-filter:blur(3px)}.acessos-resumo__item>span{display:grid;flex:0 0 36px;width:36px;height:36px;place-items:center;border-radius:11px;background:rgb(255 255 255/.1);color:rgb(255 255 255/.78)}.acessos-resumo__item>span svg{width:17px;height:17px}.acessos-resumo__item--entrada>span{background:rgb(16 185 129/.2);color:#6ee7b7}.acessos-resumo__item--saida>span{background:rgb(251 191 36/.18);color:#fcd34d}.acessos-resumo__item div{display:flex;min-width:0;flex-direction:column}.acessos-resumo__item strong{overflow:hidden;color:#fff;font-size:1.3rem;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}.acessos-resumo__item .acessos-resumo__data{font-size:.83rem}.acessos-resumo__item small{margin-top:.22rem;color:rgb(255 255 255/.58);font-size:.65rem}
.acessos-conteudo{overflow:hidden;border:1px solid var(--border);border-radius:21px;background:var(--surface);box-shadow:var(--shadow-sm)}.acessos-secao-cabecalho{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1.2rem 1.25rem .9rem}.acessos-secao-cabecalho span{color:var(--brand);font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.acessos-secao-cabecalho h2{margin:.14rem 0 0;font-size:1.12rem}.acessos-secao-cabecalho>strong{padding:.35rem .65rem;border-radius:999px;background:var(--surface-2);color:var(--fg-muted);font-size:.68rem}
.acessos-filtros{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(145px,.75fr) minmax(155px,.8fr) minmax(130px,.65fr) minmax(130px,.65fr);gap:.65rem;margin:0 1.25rem 1rem;padding:.85rem;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}.acessos-filtros label{min-width:0}.acessos-filtros .label{margin-bottom:.28rem;font-size:.68rem}.acessos-filtros .search{max-width:none}.acessos-filtros__acoes{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.5rem;padding-top:.1rem}.acessos-filtros__acoes .btn{min-width:120px}
.acessos-tabela-wrap{overflow-x:auto;border-top:1px solid var(--border)}.acessos-tabela{width:100%;border-collapse:collapse}.acessos-tabela th{padding:.72rem 1.1rem;background:var(--surface-2);color:var(--fg-muted);font-size:.67rem;font-weight:800;letter-spacing:.055em;text-align:left;text-transform:uppercase;white-space:nowrap}.acessos-tabela td{padding:.82rem 1.1rem;border-top:1px solid var(--border);font-size:.8rem;vertical-align:middle}.acessos-tabela tbody tr{transition:background .14s}.acessos-tabela tbody tr:hover{background:hsl(var(--brand-h) 25% 98%)}
.acesso-sentido{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:750}.acesso-sentido>span{display:grid;width:30px;height:30px;place-items:center;border-radius:10px}.acesso-sentido svg{width:14px;height:14px}.acesso-sentido--entrada{color:#047857}.acesso-sentido--entrada>span{background:#ecfdf5}.acesso-sentido--saida{color:#b45309}.acesso-sentido--saida>span{background:#fffbeb}.acesso-pessoa{display:flex;min-width:210px;align-items:center;gap:.7rem}.acesso-pessoa__avatar{display:grid;flex:0 0 34px;width:34px;height:34px;place-items:center;border-radius:11px;background:hsl(var(--brand-h) 28% 94%);color:var(--brand);font-size:.73rem;font-weight:800}.acesso-pessoa>span:last-child{display:flex;min-width:0;flex-direction:column}.acesso-pessoa strong{overflow:hidden;max-width:320px;font-size:.8rem;text-overflow:ellipsis;white-space:nowrap}.acesso-pessoa small{margin-top:.12rem;color:var(--fg-muted);font-size:.65rem;text-transform:capitalize}.acesso-via{display:inline-flex;align-items:center;gap:.38rem;color:var(--fg-muted);font-size:.72rem}.acesso-via svg{width:14px;height:14px;color:var(--brand)}.acesso-data{color:var(--fg);font-size:.73rem;white-space:nowrap}.acesso-credencial{display:inline-flex;padding:.25rem .5rem;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--fg-muted);font-family:var(--font-mono,monospace);font-size:.66rem;white-space:nowrap}.acessos-vazio{min-height:300px;padding:4rem 1.5rem;text-align:center;color:var(--fg-muted)}.acessos-vazio>svg{width:45px;height:45px;margin-bottom:.8rem;color:var(--fg-subtle)}.acessos-vazio h3{margin:0 0 .3rem;color:var(--fg);font-size:1rem}.acessos-vazio p{margin:0;font-size:.78rem}.acessos-paginacao{display:flex;justify-content:flex-end;padding:1rem 1.25rem;border-top:1px solid var(--border)}

@media(max-width:1050px){.acessos-resumo{grid-template-columns:repeat(2,1fr)}.acessos-filtros{grid-template-columns:repeat(2,minmax(0,1fr))}.acessos-filtros__busca{grid-column:1/-1}}
@media(max-width:720px){.acessos-hero{padding:1.35rem}.acessos-hero__cabecalho{flex-direction:column;gap:1.15rem}.acessos-hero__acao{width:100%}.acessos-resumo{grid-template-columns:1fr 1fr;margin-top:1.25rem}.acessos-resumo__item{padding:.75rem}.acessos-resumo__item strong{font-size:1.08rem}.acessos-secao-cabecalho{align-items:flex-start;flex-direction:column}.acessos-filtros{grid-template-columns:1fr;margin:0 .8rem .9rem}.acessos-filtros__busca{grid-column:auto}.acessos-filtros__acoes{align-items:stretch;flex-direction:column}.acessos-filtros__acoes .btn{width:100%}.acessos-tabela-wrap{padding:.75rem;background:var(--surface-2)}.acessos-tabela,.acessos-tabela tbody{display:block}.acessos-tabela thead{display:none}.acessos-tabela tr{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.7rem;padding:1rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.acessos-tabela tr:last-child{margin-bottom:0}.acessos-tabela td{display:flex;min-width:0;align-items:center;padding:0;border:0}.acessos-tabela td:nth-child(2){grid-column:1/-1;grid-row:1}.acessos-tabela td:nth-child(1){grid-row:2}.acessos-tabela td:nth-child(4){justify-content:flex-end;grid-column:2;grid-row:2}.acessos-tabela td:nth-child(3){grid-column:1;grid-row:3}.acessos-tabela td:nth-child(5){justify-content:flex-end;grid-column:2;grid-row:3}.acesso-pessoa{min-width:0}.acesso-pessoa strong{max-width:calc(100vw - 145px)}.acessos-paginacao{justify-content:center;padding:.9rem .75rem}}
@media(max-width:440px){.acessos-resumo{grid-template-columns:1fr}.acessos-resumo__item:nth-child(4){display:none}.acessos-hero p{font-size:.85rem}.acessos-tabela tr{grid-template-columns:1fr}.acessos-tabela td:nth-child(1),.acessos-tabela td:nth-child(2),.acessos-tabela td:nth-child(3),.acessos-tabela td:nth-child(4),.acessos-tabela td:nth-child(5){grid-column:1;grid-row:auto;justify-content:flex-start}.acessos-tabela td:nth-child(4){padding-top:.15rem;border-top:1px solid var(--border)}}

/* Consulta e gestão de cartões */
.cartao-sobrelinha{color:var(--brand);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.cartao-page-head h1{margin-top:.15rem}.cartao-consulta{position:relative;overflow:hidden;margin-bottom:1.2rem;padding:1.35rem;border-radius:20px;color:#fff;background:linear-gradient(135deg,hsl(var(--brand-h) 55% 25%),hsl(var(--brand-h) 62% 15%));box-shadow:0 14px 34px hsl(var(--brand-h) 45% 18%/.17)}.cartao-consulta:after{position:absolute;right:-60px;top:-90px;width:220px;height:220px;border:1px solid rgb(255 255 255/.1);border-radius:50%;box-shadow:0 0 0 38px rgb(255 255 255/.03),0 0 0 76px rgb(255 255 255/.02);content:""}.cartao-consulta__texto{position:relative;z-index:1;display:flex;align-items:center;gap:.8rem}.cartao-consulta__texto>span{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:13px;background:rgb(255 255 255/.12)}.cartao-consulta__texto strong{font-size:.93rem}.cartao-consulta__texto p{margin:.15rem 0 0;color:rgb(255 255 255/.66);font-size:.72rem}.cartao-consulta__form{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;margin-top:1rem}.cartao-consulta__form .input{min-height:48px;border-color:rgb(255 255 255/.18);background:rgb(255 255 255/.1);color:#fff;font-family:var(--font-mono,monospace);font-size:1rem}.cartao-consulta__form .input::placeholder{color:rgb(255 255 255/.48)}.cartao-consulta__form .btn{border-color:#fff;background:#fff;color:hsl(var(--brand-h) 58% 22%)}.cartao-consulta>small{position:relative;z-index:1;display:flex;align-items:center;gap:.35rem;margin-top:.55rem;color:rgb(255 255 255/.55);font-size:.63rem}.cartao-consulta>small svg{width:13px;height:13px}
.cartao-resultado{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:1rem;margin-bottom:1.2rem;padding:1.15rem;border:1px solid var(--border);border-radius:19px;background:var(--surface);box-shadow:var(--shadow-sm)}.cartao-resultado--novo{border-color:#bfdbfe;background:#f8fbff}.cartao-resultado--atribuido{border-color:#bbf7d0;background:#f8fffb}.cartao-resultado--disponivel{border-color:#c7d2fe;background:#fafaff}.cartao-resultado__icone{display:grid;width:54px;height:54px;place-items:center;border-radius:16px;background:var(--brand-soft);color:var(--brand)}.cartao-resultado--atribuido .cartao-resultado__icone{background:#dcfce7;color:#047857}.cartao-resultado__principal small,.cartao-resultado--novo small{color:var(--brand);font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.cartao-resultado h2{margin:.18rem 0;font-family:var(--font-mono,monospace);font-size:1.2rem}.cartao-resultado p{margin:0;color:var(--fg-muted);font-size:.75rem}.cartao-resultado__acoes{display:flex;gap:.5rem}.cartao-historico{grid-column:2/-1;margin-top:.3rem;padding-top:.8rem;border-top:1px solid var(--border)}.cartao-historico>strong{font-size:.72rem}.cartao-historico>div{display:flex;justify-content:space-between;gap:1rem;padding:.48rem 0;border-bottom:1px dashed var(--border);font-size:.7rem}.cartao-historico>div:last-child{border-bottom:0}.cartao-historico>div>span{display:flex;flex-direction:column}.cartao-historico small{margin-top:.1rem;color:var(--fg-muted)}
.cartao-resultado--perigo{border-color:hsl(0 65% 52%/.3);background:var(--danger-soft)}.cartao-resultado--perigo .cartao-resultado__icone{background:var(--surface);color:var(--danger)}.cartao-resultado--perigo .cartao-resultado__principal small{color:var(--danger)}
.cartao-seguranca{display:grid;grid-column:2/-1;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);align-items:center;gap:1rem;margin-top:.35rem;padding-top:1rem;border-top:1px solid var(--border)}
.cartao-seguranca__texto{display:flex;align-items:center;gap:.7rem}.cartao-seguranca__texto>span{display:grid;flex:0 0 36px;width:36px;height:36px;place-items:center;border-radius:11px;background:var(--warning-soft);color:var(--warning)}.cartao-seguranca__texto strong{display:block;font-size:.76rem}.cartao-seguranca__texto p{margin:.12rem 0 0;font-size:.64rem}.cartao-seguranca__form{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:.5rem}.cartao-seguranca__form .input{min-width:0}.cartao-seguranca.is-impedido{grid-template-columns:minmax(220px,.8fr) minmax(180px,1fr) auto}.cartao-seguranca.is-impedido .cartao-seguranca__texto>span{background:var(--danger-soft);color:var(--danger)}.cartao-seguranca__motivo{display:flex;min-width:0;flex-direction:column}.cartao-seguranca__motivo small{color:var(--fg-muted);font-size:.6rem;text-transform:uppercase}.cartao-seguranca__motivo strong{overflow:hidden;font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}
.cartao-resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.2rem}.cartao-resumo>div{display:grid;grid-template-columns:38px 1fr;gap:0 .7rem;align-items:center;padding:.9rem 1rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.cartao-resumo span{display:grid;grid-row:1/3;width:38px;height:38px;place-items:center;border-radius:11px;background:var(--brand-soft);color:var(--brand)}.cartao-resumo strong{font-size:1.25rem;line-height:1}.cartao-resumo small{margin-top:.2rem;color:var(--fg-muted);font-size:.65rem}.cartao-lista .card__head{align-items:flex-end}.cartao-lista .card__head h2{margin:0;font-size:1.05rem}.cartao-lista .filters{margin-left:auto}
.cartao-associar-layout{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:1rem}.cartao-associar-cartao{align-self:start}.cartao-associar-cartao .card__head>svg,.cartao-associar-pessoa .card__head>svg{color:var(--brand)}.cartao-associar-cartao .input{font-family:var(--font-mono,monospace);font-size:1rem}.cartao-busca-pessoa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem}.cartao-pessoas{display:grid;gap:.5rem;margin-top:1rem}.cartao-pessoa{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.65rem;border:1px solid var(--border);border-radius:13px;background:var(--surface);transition:border-color .14s,background .14s}.cartao-pessoa:hover{border-color:hsl(var(--brand-h) 38% 75%);background:var(--surface-2)}.cartao-pessoa__avatar{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:var(--brand-soft);color:var(--brand);font-weight:800}.cartao-pessoa>span:nth-of-type(2){display:flex;min-width:0;flex-direction:column}.cartao-pessoa strong{overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.cartao-pessoa small{margin-top:.12rem;color:var(--fg-muted);font-size:.64rem}.cartao-busca-instrucao{display:flex;min-height:180px;align-items:center;justify-content:center;flex-direction:column;color:var(--fg-muted)}.cartao-busca-instrucao svg{width:35px;height:35px;color:var(--fg-subtle)}.cartao-busca-instrucao p{font-size:.75rem}
@media(max-width:900px){.cartao-associar-layout{grid-template-columns:1fr}.cartao-associar-cartao{position:static}.cartao-lista .card__head{align-items:stretch;flex-direction:column}.cartao-lista .filters{width:100%;margin-left:0}}
@media(max-width:900px){.cartao-seguranca,.cartao-seguranca.is-impedido{grid-template-columns:1fr;grid-column:1/-1}.cartao-seguranca__form{grid-template-columns:1fr 1fr}.cartao-seguranca__form .input{grid-column:1/-1}}
@media(max-width:650px){.cartao-consulta{padding:1rem}.cartao-consulta__form{grid-template-columns:1fr}.cartao-consulta__form .btn{width:100%}.cartao-resultado{grid-template-columns:44px minmax(0,1fr)}.cartao-resultado__icone{width:44px;height:44px}.cartao-resultado__acoes{grid-column:1/-1}.cartao-resultado__acoes,.cartao-resultado__acoes form,.cartao-resultado__acoes .btn{width:100%}.cartao-historico{grid-column:1/-1}.cartao-resumo{grid-template-columns:1fr}.cartao-busca-pessoa{grid-template-columns:1fr}.cartao-pessoa{grid-template-columns:38px minmax(0,1fr)}.cartao-pessoa .btn{grid-column:1/-1;width:100%}.cartao-seguranca__form{grid-template-columns:1fr}.cartao-seguranca__form .input{grid-column:auto}}

/* Estação de leitura e filtros de cartões */
.cartao-leitor{position:relative;overflow:hidden;margin-bottom:1.2rem;padding:1.4rem;border:1px solid hsl(var(--brand-h) 35% 38%/.48);border-radius:22px;color:#fff;background:linear-gradient(125deg,hsl(var(--brand-h) 58% 24%),hsl(var(--brand-h) 62% 14%));box-shadow:0 18px 42px hsl(var(--brand-h) 48% 15%/.2)}
.cartao-leitor:after{position:absolute;right:-5rem;bottom:-8rem;width:19rem;height:19rem;border:1px solid rgb(255 255 255/.08);border-radius:50%;box-shadow:0 0 0 3rem rgb(255 255 255/.025),0 0 0 6rem rgb(255 255 255/.018);content:"";pointer-events:none}
.cartao-leitor__cabecalho,.cartao-leitor__titulo,.cartao-leitor__form,.cartao-leitor__rodape{position:relative;z-index:1}
.cartao-leitor__cabecalho{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.cartao-leitor__titulo{display:flex;align-items:center;gap:.9rem}.cartao-leitor__icone{display:grid;flex:0 0 48px;width:48px;height:48px;place-items:center;border:1px solid rgb(255 255 255/.12);border-radius:15px;background:rgb(255 255 255/.1)}
.cartao-leitor__titulo small{display:block;margin-bottom:.1rem;color:hsl(var(--brand-h) 70% 78%);font-size:.64rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.cartao-leitor__titulo h2{margin:0;color:#fff;font-size:1.12rem}.cartao-leitor__titulo p{margin:.2rem 0 0;color:rgb(255 255 255/.63);font-size:.72rem}
.cartao-leitor__status{display:flex;align-items:center;gap:.42rem;padding:.42rem .68rem;border:1px solid rgb(255 255 255/.1);border-radius:999px;background:rgb(255 255 255/.07);color:rgb(255 255 255/.74);font-size:.65rem;font-weight:700;white-space:nowrap}.cartao-leitor__status i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgb(74 222 128/.13)}
.cartao-leitor__form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.7rem;margin-top:1.2rem}.cartao-leitor__campo{display:block}.cartao-leitor__campo>span:first-child{display:block;margin:0 0 .42rem;color:rgb(255 255 255/.72);font-size:.66rem;font-weight:700}.cartao-leitor__controle{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:.65rem;min-height:56px;padding:0 .85rem;border:1px solid rgb(255 255 255/.18);border-radius:14px;background:rgb(255 255 255/.1);box-shadow:inset 0 1px 0 rgb(255 255 255/.06);transition:border-color .2s,background .2s,box-shadow .2s}.cartao-leitor__controle:focus-within{border-color:rgb(255 255 255/.55);background:rgb(255 255 255/.14);box-shadow:0 0 0 4px rgb(255 255 255/.07)}.cartao-leitor__controle svg{color:rgb(255 255 255/.55)}.cartao-leitor__controle input{min-width:0;border:0;outline:0;background:transparent;color:#fff;font-family:var(--font-mono,monospace);font-size:1.05rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.cartao-leitor__controle input::placeholder{color:rgb(255 255 255/.38);font-weight:500;letter-spacing:0}.cartao-leitor__controle kbd{padding:.25rem .42rem;border:1px solid rgb(255 255 255/.14);border-radius:6px;background:rgb(0 0 0/.15);color:rgb(255 255 255/.56);font:600 .58rem var(--font-mono,monospace)}
.cartao-leitor__botao{min-height:56px;padding-inline:1.25rem;border-color:#fff;background:#fff;color:hsl(var(--brand-h) 58% 20%);box-shadow:0 8px 18px rgb(0 0 0/.12)}.cartao-leitor__botao:hover{border-color:#fff;background:#fff;transform:translateY(-1px)}.cartao-leitor__rodape{display:flex;justify-content:space-between;gap:1rem;margin-top:.65rem;color:rgb(255 255 255/.46);font-size:.59rem}.cartao-leitor__rodape span{display:flex;align-items:center;gap:.32rem}.cartao-leitor__rodape svg{width:12px;height:12px}
.cartao-lista{overflow:hidden}.cartao-lista__cabecalho{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.25rem;border-bottom:1px solid var(--border)}.cartao-lista__titulo{display:flex;align-items:center;gap:.75rem}.cartao-lista__titulo>span{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:var(--brand-soft);color:var(--brand)}.cartao-lista__titulo h2{margin:0;font-size:1.02rem}.cartao-lista__titulo p{margin:.15rem 0 0;color:var(--fg-muted);font-size:.67rem}.cartao-lista__total{padding:.35rem .62rem;border-radius:999px;background:var(--surface-2);color:var(--fg-muted);font-size:.64rem;font-weight:700;white-space:nowrap}
.cartao-filtros{display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(150px,.65fr) minmax(150px,.65fr) auto;align-items:end;gap:.7rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);background:var(--surface-2)}.cartao-filtros label>span:first-child{display:block;margin-bottom:.35rem;color:var(--fg-muted);font-size:.61rem;font-weight:750}.cartao-filtros .select{width:100%;min-height:42px;background:var(--surface)}.cartao-filtros__controle{display:flex;align-items:center;gap:.5rem;min-height:42px;padding:0 .7rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:border-color .2s,box-shadow .2s}.cartao-filtros__controle:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.cartao-filtros__controle svg{flex:0 0 auto;width:16px;color:var(--fg-muted)}.cartao-filtros__controle input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);font:inherit}.cartao-filtros__controle input::placeholder{color:var(--fg-muted)}.cartao-filtros__acoes{display:flex;gap:.45rem}.cartao-filtros__acoes .btn{min-height:42px;white-space:nowrap}
@media(max-width:1050px){.cartao-filtros{grid-template-columns:1fr 1fr}.cartao-filtros__busca{grid-column:1/-1}.cartao-filtros__acoes{justify-content:flex-end}}
@media(max-width:650px){.cartao-leitor{padding:1rem;border-radius:18px}.cartao-leitor__cabecalho{display:block}.cartao-leitor__status{width:max-content;margin:.8rem 0 0 3.9rem}.cartao-leitor__form{grid-template-columns:1fr}.cartao-leitor__botao{width:100%}.cartao-leitor__rodape{display:block}.cartao-leitor__rodape span+span{display:none}.cartao-leitor__controle kbd{display:none}.cartao-leitor__controle{grid-template-columns:20px minmax(0,1fr)}.cartao-lista__cabecalho{align-items:flex-start;padding:1rem}.cartao-lista__total{display:none}.cartao-filtros{grid-template-columns:1fr;padding:1rem}.cartao-filtros__busca{grid-column:auto}.cartao-filtros__acoes,.cartao-filtros__acoes .btn{width:100%}.cartao-filtros__acoes .btn{justify-content:center}}

/* Fluxo de associação: leitura, estado e responsável em uma sequência única. */
.cartao-associacao-cabecalho,.cartao-associacao{max-width:1080px;margin-inline:auto}
.cartao-associacao{display:grid;gap:1rem}
.cartao-leitor--associacao{margin-bottom:0}
.cartao-etapa-numero{font-size:1rem;font-weight:850}
.cartao-etapa-numero--claro{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:13px;background:var(--brand);color:#fff;box-shadow:0 7px 16px var(--brand-ring)}
.cartao-etapa-cabecalho{align-items:center}
.cartao-etapa-cabecalho>div{flex:1;min-width:0}
.cartao-etapa-cabecalho h2{margin:.08rem 0 .12rem}
.cartao-etapa-cabecalho>svg{color:var(--brand)}

.cartao-associacao-inicio{display:flex;align-items:center;gap:.85rem;padding:1rem 1.15rem;border:1px dashed var(--border-strong);border-radius:16px;background:var(--surface-2);color:var(--fg-muted)}
.cartao-associacao-inicio>span{display:grid;flex:0 0 40px;width:40px;height:40px;place-items:center;border-radius:12px;background:var(--surface);color:var(--fg-subtle);box-shadow:var(--shadow-sm)}
.cartao-associacao-inicio strong{display:block;color:var(--fg);font-size:.78rem}
.cartao-associacao-inicio p{margin:.12rem 0 0;font-size:.68rem}

.cartao-associacao-estado{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:.9rem;padding:1rem 1.15rem;border:1px solid var(--border);border-radius:17px;background:var(--surface);box-shadow:var(--shadow-sm)}
.cartao-associacao-estado__icone{display:grid;width:48px;height:48px;place-items:center;border-radius:14px}
.cartao-associacao-estado small{display:block;font-size:.61rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cartao-associacao-estado h2{margin:.05rem 0;font-size:1.02rem}
.cartao-associacao-estado p{margin:0;color:var(--fg-muted);font-size:.72rem}
.cartao-associacao-estado--livre{border-color:hsl(152 55% 45%/.28)}
.cartao-associacao-estado--livre .cartao-associacao-estado__icone{background:var(--success-soft);color:var(--success)}
.cartao-associacao-estado--livre small{color:var(--success)}
.cartao-associacao-estado--erro{border-color:hsl(0 65% 52%/.3)}
.cartao-associacao-estado--erro .cartao-associacao-estado__icone{background:var(--danger-soft);color:var(--danger)}
.cartao-associacao-estado--erro small{color:var(--danger)}

.cartao-associacao-ocupada{overflow:hidden;border:1px solid hsl(0 65% 52%/.26);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.cartao-associacao-ocupada>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.2rem;border-bottom:1px solid hsl(0 65% 52%/.16);background:var(--danger-soft)}
.cartao-associacao-ocupada>header>div{display:flex;align-items:center;gap:.75rem;min-width:0}
.cartao-associacao-ocupada__alerta{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:13px;background:var(--surface);color:var(--danger);box-shadow:var(--shadow-sm)}
.cartao-associacao-ocupada header small{display:block;color:var(--danger);font-size:.61rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.cartao-associacao-ocupada header h2{margin:.08rem 0 0;font-size:1.05rem}
.cartao-associacao-ocupada__vinculo{display:grid;grid-template-columns:minmax(190px,.7fr) 38px minmax(280px,1.3fr);align-items:center;gap:1.15rem;padding:1.4rem 1.5rem}
.cartao-associacao-ocupada__codigo,.cartao-associacao-ocupada__pessoa>div{display:flex;min-width:0;flex-direction:column}
.cartao-associacao-ocupada__codigo small,.cartao-associacao-ocupada__pessoa small{color:var(--fg-muted);font-size:.62rem;font-weight:750;text-transform:uppercase}
.cartao-associacao-ocupada__codigo strong{margin:.18rem 0 .08rem;font-family:var(--mono);font-size:1.28rem;letter-spacing:.05em}
.cartao-associacao-ocupada__codigo span,.cartao-associacao-ocupada__pessoa span{color:var(--fg-muted);font-size:.67rem}
.cartao-associacao-ocupada__ligacao{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--border);border-radius:50%;background:var(--surface-2);color:var(--fg-subtle)}
.cartao-associacao-ocupada__pessoa{display:flex;min-width:0;align-items:center;gap:.85rem}
.cartao-associacao-ocupada__avatar{display:grid;flex:0 0 52px;width:52px;height:52px;place-items:center;border-radius:16px;background:var(--brand-soft);color:var(--brand);font-size:.92rem;font-weight:850}
.cartao-associacao-ocupada__pessoa strong{overflow:hidden;margin:.12rem 0 .04rem;font-size:1.02rem;text-overflow:ellipsis;white-space:nowrap}
.cartao-associacao-ocupada>footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem;border-top:1px solid var(--border);background:var(--surface-2)}
.cartao-associacao-ocupada>footer p{display:flex;align-items:center;gap:.4rem;margin:0;color:var(--fg-muted);font-size:.68rem}
.cartao-associacao-ocupada>footer p svg{flex:0 0 15px;width:15px}
.cartao-associacao-ocupada>footer>div{display:flex;flex:0 0 auto;gap:.55rem}
.cartao-associacao-ocupada>footer form{margin:0}

.cartao-associar-pessoa--ativa{overflow:hidden}
.cartao-associar-pessoa--ativa .card__body{padding:1.15rem}
.cartao-associar-pessoa--ativa .search--wide{max-width:none}
.cartao-associar-pessoa--ativa .cartao-pessoas{grid-template-columns:repeat(2,minmax(0,1fr))}
.cartao-busca-instrucao--compacta{min-height:115px}

@media(max-width:760px){
    .cartao-associacao-ocupada__vinculo{grid-template-columns:1fr;gap:.8rem;padding:1.15rem}
    .cartao-associacao-ocupada__ligacao{transform:rotate(90deg)}
    .cartao-associacao-ocupada>footer{align-items:stretch;flex-direction:column}
    .cartao-associacao-ocupada>footer>div{width:100%}
    .cartao-associacao-ocupada>footer>div>a,.cartao-associacao-ocupada>footer>div>form,.cartao-associacao-ocupada>footer button{flex:1;width:100%}
    .cartao-associar-pessoa--ativa .cartao-pessoas{grid-template-columns:1fr}
}
@media(max-width:520px){
    .cartao-associacao-cabecalho{align-items:flex-start}
    .cartao-associacao-estado{grid-template-columns:42px minmax(0,1fr)}
    .cartao-associacao-estado__icone{width:42px;height:42px}
    .cartao-associacao-estado>.badge{grid-column:1/-1;width:max-content;margin-left:57px}
    .cartao-associacao-ocupada>header{align-items:flex-start}
    .cartao-associacao-ocupada>header>.badge{display:none}
    .cartao-associacao-ocupada>footer>div{flex-direction:column}
    .cartao-etapa-cabecalho{align-items:flex-start}
    .cartao-etapa-cabecalho>svg{display:none}
}

.documento-folha { max-width: 850px; min-height: 720px; margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid var(--border); border-radius: 4px; background: var(--surface); box-shadow: var(--shadow); }
.documento-folha header { padding-bottom: 1.5rem; border-bottom: 2px solid var(--fg); }
.documento-folha header > span { color: var(--brand); font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.documento-folha header h1 { margin: .5rem 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.documento-folha header > strong { color: var(--fg-muted); font-family: var(--mono); font-size: .8rem; }
.documento-folha__conteudo { min-height: 360px; padding: 2rem 0; line-height: 1.75; }
.documento-folha footer { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.documento-folha footer > div { display: grid; }
.documento-folha footer > div span { color: var(--fg-muted); font-size: .72rem; }
.no-print { display: flex; }

@media print {
    .no-print, .m-barra, .sidebar, .topbar { display: none !important; }
    .documento-folha { max-width: none; min-height: auto; padding: 0; border: 0; box-shadow: none; }
}

@media (max-width: 1100px) {
    .cadastro-complementar, .indicadores-gerenciais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .cadastro-complementar, .indicadores-gerenciais { grid-template-columns: 1fr; }
    .acao-inline[open] form { position: fixed; inset: auto 1rem 1rem; width: auto; }
}

/* Teclado numérico fixo (senha de morador) -- ver montarTecladoPin em app.js */
.pin-pad__input-oculto { display: none; }
.pin-pad { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin: .5rem 0 1rem; }
.pin-pad__dots { display: flex; gap: .85rem; }
.pin-pad__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); transition: background-color .15s, border-color .15s; }
.pin-pad__dot--filled { background: var(--brand); border-color: var(--brand); }
.pin-pad__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; width: 100%; max-width: 280px; }
.pin-pad__key { padding: .95rem 0; font-size: 1.4rem; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--fg); cursor: pointer; }
.pin-pad__key:active { background: var(--brand-soft); border-color: var(--brand); }
.pin-pad__key--vazia { border: none; background: transparent; cursor: default; }
.pin-pad__key--apagar { font-size: 1.2rem; color: var(--fg-muted); background: transparent; border-color: transparent; }