@layer pages {
/* Layouts dos painéis. Componentes globais estão na camada components abaixo. */
:root {
  --ui-ink: var(--color-ink);
  --ui-muted: var(--color-muted);
  --ui-line: var(--color-line);
  --ui-line-strong: var(--color-line-strong);
  --ui-surface: var(--color-surface);
  --ui-green: var(--color-green);
  --ui-green-dark: var(--color-green-ink);
  --ui-red: var(--color-red);
  --ui-width: 1480px;
  --ui-gutter: var(--space-3);
  --ui-card-radius: var(--radius-md);
  --ui-font: var(--font-sans);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --line2: var(--ui-line-strong);
  --card: var(--ui-surface);
  --surface: var(--ui-surface);
  --green: var(--ui-green);
  --green-ink: var(--ui-green-dark);
  --green-dark: var(--ui-green-dark);
  --red: var(--ui-red);
  --page-width: var(--ui-width);
  --page-gutter: var(--ui-gutter);
  --radius: var(--ui-card-radius);
  --radius-card: var(--ui-card-radius);
  font-family: var(--ui-font);
}
body { font-size: var(--text-body); line-height: 1.5; letter-spacing: -.01em; }

/* Cabeçalhos: mesma largura, alinhamento e escala de navegação. */
.institutional-header,
.institutional-main,
.institutional-footer,
.condo-panel {
  max-width: var(--ui-width);
  padding-left: var(--ui-gutter);
  padding-right: var(--ui-gutter);
}
.institutional-header {
  min-height: 72px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.institutional-header img,
.institutional-footer img { width: 168px; }
.institutional-header nav { gap: 8px; }
.institutional-header nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 13px;
  border-radius: var(--radius-md);
  color: var(--ui-muted);
  font: 700 var(--text-body)/var(--text-title) var(--ui-font);
  gap: 8px;
}
.institutional-header nav svg {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
  fill: none;
  stroke: var(--ui-green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.institutional-header nav > a:hover,
.institutional-header nav > a:focus-visible {
  background: var(--ui-surface);
  color: var(--ui-ink);
}
.institutional-header nav > a.secondary {
  background: var(--ui-surface);
  color: var(--ui-ink);
}
.condo-panel { padding-top: 0; font-family: var(--ui-font); }
.condo-header {
  min-height: 72px;
  margin-bottom: 0;
  padding: 8px 0;
}
.condo-panel .panel-navigation > a,
.condo-header .panel-nav-group summary,
.condo-header .panel-navigation .panel-logout {
  font-family: var(--ui-font);
}

.shell .team-tabs button[aria-pressed="true"] { background:var(--ui-ink);color:var(--color-white); }
.shell .create-trigger[aria-expanded="true"] {
  border-color:transparent;
  background:var(--ui-surface);
  color:var(--ui-ink);
}
.shell .create-trigger[aria-expanded="true"]:hover { color:var(--ui-ink); }
.condo-panel .user-row { padding: 13px; border-radius: var(--ui-card-radius); }
.condo-panel section h2 { margin-bottom: 13px; font-size: var(--text-title); line-height: 1.25; }
.login-brand img { width: 128px; }
.login-card { border-radius: var(--ui-card-radius); padding: 21px; }
.login-action { min-height: 48px; border-radius: var(--ui-card-radius); font-family: var(--ui-font); }
#login-form input { min-height: 48px; border-radius: var(--radius-sm); }

.cards article { border-radius: var(--ui-card-radius); }
.settings-tab[aria-selected="true"] {
  background: var(--ui-surface);
  border-color: transparent;
  color: var(--ui-ink);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ui-green);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  :root { --ui-gutter: var(--space-3); }
}
@media (max-width: 848px) {
  :root { --ui-gutter: var(--space-2); }
}
@media (max-width: 720px) {
  .institutional-header { flex-wrap: wrap; gap: 8px; }
  .institutional-header nav { width: 100%; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
  .institutional-header nav > a { flex: none; white-space: nowrap; }
  .condo-header { min-height: 0; }
}
@media (max-width: 600px) {
  :root { --ui-gutter: var(--space-2); }
  .institutional-header img,
  .institutional-footer img { width: 128px; }
  .institutional-header nav { width: 100%; }
  .institutional-header nav > a { font-size: var(--text-body); }
  .condo-panel { padding-top: 0; }
  .login-card { padding: 21px 13px; }
}

.login-action span[aria-hidden="true"],.institutional-main .button span[aria-hidden="true"]{color:var(--ui-green)}
/* Todas as ações com símbolo usam a mesma dimensão e a mesma cor. */
.login-action svg,.login-back svg,.institutional-main .button>svg,
.institutional-header .mobile-menu summary svg,
.shell .text-link svg,.shell .back-link svg,
.condo-panel .panel-navigation svg,
.condo-panel .panel-nav-group svg{
  width:var(--icon-size);
  height:var(--icon-size);
  flex:none;
  color:var(--ui-green);
}
.login-action svg,.login-back svg,.institutional-main .button>svg{fill:none;stroke:var(--ui-green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* O estado atual é definido na camada compartilhada, sem sublinhado. */

.finance-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-1); margin-block:var(--space-2); }
.finance-metric { background:var(--color-gray); border-radius:var(--ui-card-radius); padding:var(--space-2); display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.finance-metric strong { font-size:var(--text-title); overflow-wrap:anywhere; }
.finance-metric span { display:flex; align-items:center; gap:var(--space-1); font-size:var(--text-small); }
.finance-metric .action-icon { width:var(--icon-size); height:var(--icon-size); flex:none; fill:none; stroke:var(--color-green); stroke-width:2; }

/* Relatórios: filtros compactos e a mesma escala dos demais painéis. */
.report-filters { display:grid; grid-template-columns:repeat(2,minmax(0,2fr)) repeat(2,minmax(0,1fr)) minmax(0,2fr); gap:var(--space-2); }
.report-field { display:flex; flex-direction:column; gap:var(--space-1); min-width:0; font-size:var(--text-small); font-weight:700; }
.report-field select,.report-field input { width:100%; min-width:0; height:var(--control-height); padding:var(--space-2); border:0; border-radius:var(--radius-sm); background:var(--color-gray); color:var(--color-ink); font-family:var(--font-sans); font-size:var(--text-body); font-weight:400; }
.report-actions { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-block:var(--space-2); }
.report-note { font-size:var(--text-small); margin-block:var(--space-1); }
.report-summary { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-2); margin-block:var(--space-2); border-radius:var(--radius-md); background:var(--color-gray); }
.report-summary h2,.report-summary p { margin:0; }
.report-summary h2 { font-size:var(--text-title); }
.report-table-scroll { overflow:auto; }
.report-table { width:100%; border-collapse:collapse; font-size:var(--text-small); text-align:left; }
.report-table th,.report-table td { padding:var(--space-2); vertical-align:top; overflow-wrap:anywhere; min-width:96px; }
.report-table th,.report-table tbody tr:nth-child(even) { background:var(--color-gray); }
@media(max-width:848px) { .report-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .report-filters .report-field:last-child { grid-column:1 / -1; } .report-actions .button { flex:1 1 auto; } }

/* Ambientes e usuários compartilham o mesmo resumo nos dois painéis. */
.condo-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin-top:var(--space-3); }
.summary-group { min-width:0; }
.summary-group h3 { display:flex; align-items:center; gap:var(--space-1); margin:0 0 var(--space-2); font-size:var(--text-title); }
.summary-total { font-size:var(--text-small); font-weight:400; }
.summary-list { display:grid; gap:var(--space-1); }
.summary-list>p { margin:0; }
:is(.shell,.condo-panel) .button.summary-environment { display:flex; justify-content:flex-start; white-space:normal; text-align:left; }
.summary-environment span { flex:1; overflow-wrap:anywhere; }
.summary-icon { width:var(--icon-size); height:var(--icon-size); flex:none; fill:none; stroke:var(--color-green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.summary-suspended summary { list-style:none; }
.summary-suspended summary::-webkit-details-marker { display:none; }
.summary-suspended summary::after { content:'+'; }
.summary-suspended[open] summary::after { content:'−'; }
.summary-note { font-size:var(--text-small); margin:var(--space-1) 0; }
.summary-user { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); min-height:var(--control-height); padding:var(--space-1) var(--space-2); border-radius:var(--radius-md); background:var(--color-gray); }
.summary-user-identity { display:flex; align-items:center; gap:var(--space-1); min-width:0; flex:1; }
.summary-user strong { font-size:var(--text-body); overflow-wrap:anywhere; }
.summary-user-role { font-size:var(--text-small); }
.summary-user .summary-note { flex-basis:100%; margin:0; }
@media(max-width:720px) { .condo-summary { grid-template-columns:minmax(0,1fr); } }

.condo-summary.summary-environments-only { grid-template-columns:minmax(0,1fr); margin-top:0; }

/* Contexto único: controles brancos sobre caixa cinza, cinza sobre branco. */
:is(.shell,.condo-panel) .surface-form { display:grid; }
:is(.shell,.condo-panel) .surface-form>h3 { grid-column:1/-1; margin:0; font-size:var(--text-title); font-weight:700; line-height:1.3; }
:is(.shell,.condo-panel) .surface-form.notice-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
:is(.shell,.condo-panel) .notice-form .notice-current-image { display:flex; }
.routine-edit { flex:0 1 480px; min-width:0; }
.routine-edit>summary,.occurrence-answer-editor>summary { list-style:none; }
.routine-edit>summary::-webkit-details-marker,.occurrence-answer-editor>summary::-webkit-details-marker { display:none; }
.routine-edit[open]>.routine-actions { margin-top:var(--space-2); }
:is(.shell,.condo-panel) .routine-edit .routine-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:var(--space-2); min-width:0; }
.routine-edit .routine-assign,.routine-edit .routine-add-task { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:var(--space-2); min-width:0; }
.routine-edit .routine-assign>.button,.routine-edit .routine-add-task>.button { margin:0; }
.routine-edit .routine-add-task input { max-width:none; }
.routine-edit .routine-actions>.button:last-child { grid-column:1/-1; justify-self:start; }
.occurrence-answer-editor { min-width:0; }
.occurrence-answer-editor[open]>.occurrence-answer-form { margin-top:var(--space-2); }
.occurrence-workflow>p:empty { display:none; }
:is(.shell,.condo-panel) .occurrence-answer-form>.button { width:auto; justify-self:start; }
@media(max-width:800px) { .routine-edit { flex-basis:auto; width:100%; } }
@media(max-width:704px) { :is(.shell,.condo-panel) .surface-form.notice-form { grid-template-columns:minmax(0,1fr); } :is(.shell,.condo-panel) .routine-edit .routine-actions,.routine-edit .routine-assign,.routine-edit .routine-add-task { grid-template-columns:minmax(0,1fr); } .routine-edit .button { justify-self:start; white-space:normal; } }

.occurrence-actions>label { flex:1 1 224px; }

.condo-panel section>p { margin:0 0 var(--space-2); }
:is(.shell,.condo-panel) p[role=status]:empty { display:none; }
.occurrence-workflow>p { margin:0; }

}

/* Fonte única dos componentes. A ordem das camadas está em tokens.css:
   regras locais podem organizar o conteúdo, mas não alterar estes controles. */
@layer components {
  *, *::before, *::after { box-sizing:border-box; }
  [hidden] { display:none!important; }
  body { color:var(--color-ink); background:var(--color-white); font:400 var(--text-body)/1.5 var(--font-sans); }
  button, input, select, textarea { font-family:var(--font-sans); }
  strong, b { font-weight:700; }
  small { font-size:var(--text-small); }
  h1, h2, h3, h4 { font-family:var(--font-sans); font-weight:700; line-height:1.3; }
  h1 { font-size:var(--text-display); }
  h2, .condo-identity h1, .place h1, .login-card h1 { font-size:var(--text-title); }
  h3, h4 { font-size:var(--text-body); }
  :is(.surface-form,.routine-form)>h3, .summary-group h3 { font-size:var(--text-title); }
  :is(.page-intro,.hero) h1 { margin:0 0 var(--space-1); }
  :is(.page-intro,.hero) p { margin:0; }
  :is(.condo-panel section,.team-section,.settings-pane,.institutional-main section)>:is(h2,h3,h4) { margin:0 0 var(--space-1); }
  :is(.condo-panel section,.team-section,.settings-pane)>p { margin:0 0 var(--space-2); }
  :is(.user-row,.metric,.detail-panel,.cards article,.overview-metric,.summary-user,.occurrence-card,.settings-pane,.alert-row,.login-card,.lastr2,.cpad,.reppanel,.staff-login,.notice-panel,.portal-contact) {
    --field-surface:var(--color-white);
    --button-surface:var(--color-white);
    background:var(--color-gray);
    border:0;
    border-radius:var(--radius-md);
  }
  :is(.user-row,.metric,.detail-panel,.cards article,.summary-user,.occurrence-card,.settings-pane,.alert-row,.login-card,.cpad,.reppanel,.staff-login) { padding:var(--space-2); }
  :is(.occurrence-answer-form,.occurrence-response,.users-receipt) {
    --field-surface:var(--color-gray);
    --button-surface:var(--color-gray);
    padding:var(--space-2);
    background:var(--color-white);
    border:0;
    border-radius:var(--radius-md);
  }
  /* Formulários usam a mesma caixa; grades e destinos continuam locais. */
  :is(.users-form,.settings-form,.surface-form,.routine-form) {
    --field-surface:var(--color-white);
    --button-surface:var(--color-white);
    width:100%; max-width:none;
    margin:var(--space-2) 0;
    padding:var(--space-2);
    border:0; border-radius:var(--radius-md);
    background:var(--color-gray);
    gap:var(--space-2);
  }
  :is(.user-row,.settings-pane,.detail-panel) :is(.settings-form,.users-form),
  #condominio-configuracoes .settings-row {
    --field-surface:var(--color-gray);
    --button-surface:var(--color-gray);
    background:var(--color-white);
  }
  label, .report-field, .fld label {
    color:var(--color-ink); font:700 var(--text-body)/1.3 var(--font-sans);
  }
  :is(.users-form,.settings-form,.surface-form,.routine-fields,.routine-assign,.occurrence-answer-form,.report-filters) label {
    display:flex; flex-direction:column; gap:var(--space-1); min-width:0;
  }
  :is(.settings-form,.surface-form,.routine-checklist) label:has(input:is([type=checkbox],[type=radio])) {
    flex-direction:row; align-items:center; font-weight:400;
  }
  .fld label { margin:0 0 var(--space-1); }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
    width:100%; min-width:0; max-width:100%;
    min-height:var(--control-height);
    padding:var(--space-1) var(--space-2);
    border:0; border-radius:var(--radius-sm);
    color:var(--color-ink);
    background:var(--field-surface,var(--color-gray));
    font:400 var(--text-body)/1.3 var(--font-sans);
    box-shadow:none;
  }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select { height:var(--control-height); }
  textarea { min-height:112px; resize:vertical; }
  input::placeholder, textarea::placeholder { color:var(--color-ink); opacity:.55; font-weight:400; }
  select {
    appearance:none; -webkit-appearance:none;
    padding-right:calc(var(--space-3) + var(--space-2));
    background-image:linear-gradient(45deg,transparent 50%,var(--color-ink) 50%),linear-gradient(135deg,var(--color-ink) 50%,transparent 50%);
    background-position:calc(100% - 17px) 50%,calc(100% - 13px) 50%;
    background-size:4px 4px; background-repeat:no-repeat;
  }
  label:has(>select)::after { content:none; }
  input:is([type=checkbox],[type=radio]) { width:var(--icon-size); height:var(--icon-size); min-height:0; margin:0; flex:none; accent-color:var(--color-green); }
  input[type=file] { padding:0; line-height:var(--control-height); }
  input[type=file]::file-selector-button {
    min-height:var(--control-height); padding:var(--space-1) var(--space-2); margin:0 var(--space-1) 0 0;
    border:0; border-radius:var(--radius-md); background:var(--color-gray); color:var(--color-ink);
    font:700 var(--text-body)/1.3 var(--font-sans); cursor:pointer;
  }
  input:-webkit-autofill { box-shadow:0 0 0 100px var(--field-surface,var(--color-gray)) inset; -webkit-text-fill-color:var(--color-ink); }
  /* Ações pretas em qualquer superfície. Somente navegação mantém cinza e área atual preta.
     Avaliações preservam seu componente e suas cores semânticas. */
  :is(.button,.btn,.abtn,.portal-btn,.login-action,.login-back,.nav-link,.panel-logout,.text-link,.back-link,.condo-card-open,.occurrence-response-file,.ficon,.notice-toggle),
  :is(.panel-navigation,.panel-subnav,.condo-subnav,.condo-settings-submenu,.institutional-header nav)>a,
  :is(.panel-nav-group,.condo-settings-group,.mobile-menu)>summary {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1);
    min-height:var(--control-height); padding:var(--space-1) var(--space-2);
    border:0; border-radius:var(--radius-md);
    background:var(--color-ink); color:var(--color-white);
    font:700 var(--text-body)/1.3 var(--font-sans);
    text-decoration:none; cursor:pointer; box-shadow:none; list-style:none;
  }
  :is(.button,.btn,.abtn,.portal-btn,.login-action,.login-back,.nav-link,.panel-logout,.text-link,.back-link,.condo-card-open,.occurrence-response-file,.ficon):hover { filter:none; }
  :is(.button, .panel-nav-group, .condo-settings-group, .mobile-menu)>summary::-webkit-details-marker,
  summary.button::-webkit-details-marker { display:none; }
  :is(.button,.btn,.login-action) { white-space:normal; }
  :is(.abtn,.notice-toggle) { justify-content:space-between; text-align:left; }
  .portal-btn { flex:none; }
  .ficon { width:var(--control-height); height:var(--control-height); padding:0; flex:none; }
  .footrow { flex-wrap:wrap; }
  .footleft { gap:var(--space-1); }
  .notice-toggle { min-height:var(--control-height); padding:var(--space-1) 0; border:0; background:transparent; font:700 var(--text-body)/1.3 var(--font-sans); }
  :is(.button,.btn,.abtn,.portal-btn,.login-action,.login-back,.nav-link,.panel-logout,.text-link,.back-link,.ficon) svg,
  :is(.nav-icon,.action-icon,.summary-icon,.overview-metric-icon,.condo-avatar-icon,.portal-contact-icon),
  :is(.panel-navigation,.panel-subnav,.condo-subnav,.condo-settings-submenu,.institutional-header nav,.institutional-main article h3,.contacts) svg {
    width:var(--icon-size); height:var(--icon-size); flex:none; color:var(--color-green);
  }
  svg.action-icon, svg.nav-icon, svg.summary-icon, svg.overview-metric-icon, svg.condo-avatar-icon,
  :is(.button,.btn,.abtn,.portal-btn,.login-action,.login-back,.nav-link,.panel-logout,.text-link,.back-link) svg:not([fill=currentColor]),
  :is(.panel-navigation,.panel-subnav,.condo-subnav,.condo-settings-submenu,.institutional-header nav,.institutional-main article h3,.contacts) svg:not([fill=currentColor]) {
    fill:none; stroke:var(--color-green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  }
  :is(.button,.btn,.abtn,.portal-btn,.login-action,.nav-link,.text-link,.back-link) small { color:inherit; }
  .button-danger .action-icon { stroke:var(--color-red); }
  :is(.user-row,.condo-card-link) :is(h2,strong)+p { margin:var(--space-1) 0 0; }
  .condo-card-meta { gap:var(--space-1); }
  .condo-card-link { gap:var(--space-1); }
  .summary-list, .users-list, .routine-history, .condo-list, .ratecards { gap:var(--space-1); }
  #screen1c>.place { margin-bottom:var(--space-2); }
  .qrow { margin:0 0 var(--space-1); }
  .sec { margin-left:0; margin-right:0; }
  .login-description, .login-card .login-note { margin:0; }
  #login-form label { margin:0; }
  #login-form .login-action { margin-top:0; }
  :is(.login-note,.team-status,.report-note,.occurrence-answer-message)[role=status]:empty { display:none; }
  .envfoot, .condo-footer, .site-footer, .institutional-footer { position:static; margin-top:var(--space-3); }
  /* A área do morador ocupa a sobra da tela; o rodapé continua no fluxo em páginas longas. */
  .app>.view.on { flex:1 0 auto; }
  .app>.envfoot { flex-shrink:0; }
  button:disabled, input:disabled, select:disabled, textarea:disabled, [aria-disabled=true] { opacity:.55; cursor:not-allowed; }
  :is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--color-green); outline-offset:2px; }
  @media(max-width:704px) {
    :is(.users-form,.settings-form,.surface-form,.routine-form) { max-width:100%; }
    .panel-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-1); }
    .panel-metrics .user-row { min-width:0; }
    .panel-metrics p { font-size:var(--text-small); }
  }

  .overview-metric { height:72px; padding:var(--space-1); gap:var(--space-1); }
  .overview-metric>div { display:grid; justify-items:center; gap:var(--space-1); min-width:0; }
  .overview-metric strong { font-size:var(--text-title); line-height:1; }
  .overview-metric p { margin:0; font-size:var(--text-small); line-height:1; }
  .overview-metric-caption { display:flex; align-items:center; gap:var(--space-1); white-space:normal; text-align:center; }

  :root { --file-button-surface:var(--color-white); }
  :is(.user-row,.detail-panel,.settings-pane,.login-card,.cpad,.reppanel,.staff-login,.occurrence-card,.users-form,.settings-form,.surface-form,.routine-form) { --file-button-surface:var(--color-gray); }
  :is(.occurrence-answer-form,.occurrence-response,.users-receipt),
  :is(.user-row,.settings-pane,.detail-panel) :is(.settings-form,.users-form),
  #condominio-configuracoes .settings-row { --file-button-surface:var(--color-white); }
  input[type=file]::file-selector-button { background:var(--color-ink); color:var(--color-white); }
  .notice-list { display:grid; gap:var(--space-1); }
  .notice-item+.notice-item { border:0; }
  .notice-toggle { padding:var(--space-1) var(--space-2); border-radius:var(--radius-md); background:var(--color-ink); color:var(--color-white); }
  .notice-detail { padding:var(--space-1) var(--space-2); }
  .routine-checklist label { --field-surface:var(--color-gray); --button-surface:var(--color-gray); background:var(--color-white); border:0; padding:var(--space-1) var(--space-2); }

  .panel-subnav, .condo-settings-submenu, .institutional-header .mobile-menu nav { --button-surface:var(--color-gray); border:0; border-radius:var(--radius-md); padding:var(--space-1); gap:var(--space-1); background:var(--color-white); box-shadow:none; }
  .condo-card-title { margin:0; }

  /* As duas superfícies também podem ser usadas em novos componentes sem novas variantes. */
  .ui-surface-gray { --button-surface:var(--color-white); background:var(--color-gray); }
  .ui-surface-white { --button-surface:var(--color-gray); background:var(--color-white); }
  /* Exceção explícita: menus de navegação, nunca ações dentro do conteúdo. */
  :where(.navigation) .nav-link,
  :is(.panel-navigation,.panel-subnav,.condo-subnav,.condo-settings-submenu,.institutional-header nav)>a,
  :where(.condo-subnav) .condo-portal-links .button,
  :where(.panel-navigation) .panel-logout,
  :is(.panel-nav-group,.condo-settings-group,.mobile-menu)>summary,
  .header-menu-toggle {
    background:var(--color-gray); color:var(--color-ink);
  }
  :is(.button,.btn,.abtn,.portal-btn,.login-action,.login-back,.nav-link,.panel-logout,.text-link,.back-link,.condo-card-open,.occurrence-response-file,.ficon,.notice-toggle)[aria-current=page],
  :is(.button,.btn,.abtn,.portal-btn,.nav-link,.notice-toggle):is([aria-pressed=true],[aria-selected=true],[aria-expanded=true]),
  .nav-link.active, .condo-subnav>a.active,
  :is(.panel-navigation,.panel-subnav,.condo-subnav,.condo-settings-submenu)>a[aria-current=page],
  :is(.panel-nav-group,.condo-settings-group)>summary[aria-current=page],
  :is(.panel-nav-group,.condo-settings-group):has(a[aria-current=page])>summary,
  :is(.panel-nav-group,.condo-settings-group,.mobile-menu)[open]>summary,
  details[open]>summary.button {
    background:var(--color-ink); color:var(--color-white);
  }

  /* Remove também os espaçamentos padrão do navegador, que criavam uma quarta escala. */
  h1, h2, h3, h4, p, figure, blockquote, pre, dl, dd { margin:0; }
  ul, ol { margin:0; padding-left:var(--space-3); }
  li+li { margin-top:var(--space-1); }
  code, pre, kbd, samp { font-family:var(--font-mono); font-size:var(--text-small); }
  :is(.user-row,.team-record) p { margin-top:var(--space-1); }
  :is(.page-intro,.hero) h1, :is(.condo-panel section,.team-section,.settings-pane,.institutional-main section)>:is(h2,h3,h4) { margin-bottom:var(--space-1); }
  :is(.condo-panel section,.team-section,.settings-pane)>p { margin-bottom:var(--space-2); }
  .routine-main>ol { margin-top:var(--space-1); }
  .overview-metric p { margin:0; }


  .story p+p { margin-top:var(--space-2); }
  :is(.cards article,.audience article)>h3, .settings-row>h4 { margin-bottom:var(--space-1); }

  .summary-group>h3, .routine-history>h3, .account-settings>h3, #users-management>h3, .eyebrow { margin-bottom:var(--space-1); }
  .footer-company p+p { margin-top:var(--space-1); }
  /* Navegação do morador: fundo neutro, sem o peso das ações principais. */
  .portal-btn, .footrow .ficon { background:var(--color-gray); color:var(--color-ink); }
  .portal-btn span { color:inherit; }
  .photo-action { background:var(--color-white); color:var(--color-ink); }
  .reppanel .field-optional { font-weight:400; }

  .header-menu-toggle { display:none; }
  .header-menu-toggle svg, .mobile-menu>summary svg { width:var(--icon-size); height:var(--icon-size); fill:none; stroke:var(--color-green); stroke-width:1.8; stroke-linecap:round; }
  .header-menu-toggle .menu-close-icon { display:none; }
  .header-menu-toggle[aria-expanded=true] { background:var(--color-ink); color:var(--color-white); }
  .header-menu-toggle[aria-expanded=true] .menu-open-icon { display:none; }
  .header-menu-toggle[aria-expanded=true] .menu-close-icon { display:block; }
  .mobile-navigation-panel { display:contents; }
  @media(max-width:720px) {
    .site-header-inner, .condo-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); }
    .brand-group, .condo-identity { flex:1; min-width:0; }
    .condo-identity h1 { overflow-wrap:anywhere; }
    .header-menu-ready>.header-menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:var(--control-height); height:var(--control-height); padding:var(--space-1); border:0; border-radius:var(--radius-md); flex:none; cursor:pointer; }
    .condo-header:has(.panel-navigation[hidden])>.header-menu-toggle { display:none; }
    .mobile-navigation {
      display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:var(--space-1); width:100%; min-width:0; max-width:100%; margin:0; overflow:visible;
    }
    .header-menu-ready>.mobile-navigation { display:none; }
    .header-menu-ready[data-menu-open=true]>.mobile-navigation { display:flex; }
    /* Links, expansores e saída compartilham a mesma caixa e o mesmo alinhamento. */
    .mobile-navigation :is(.panel-nav-group,.condo-settings-group) { width:100%; min-width:0; max-width:100%; margin:0; padding:0; }
    :is(.mobile-navigation,.institutional-header .mobile-menu nav) :is(a,button,summary) {
      display:flex; align-items:center; justify-content:flex-start; gap:var(--space-1);
      box-sizing:border-box; width:100%; min-width:0; max-width:100%;
      height:var(--control-height); min-height:var(--control-height); margin:0;
      padding:var(--space-1) var(--space-2); text-align:left; white-space:normal;
    }
    .mobile-navigation .panel-subnav { position:static; width:100%; min-width:0; max-width:100%; margin-top:var(--space-1); }
    .mobile-navigation .condo-subnav, .mobile-navigation .condo-portal-links, .mobile-navigation .condo-settings-submenu { display:flex; flex-direction:column; align-items:stretch; gap:var(--space-1); width:100%; margin:0; overflow:visible; }
    .condo-area-menu { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
    .condo-area-menu>.condo-page-header { flex:1; min-width:0; margin:0; }
    .institutional-header .mobile-menu nav { overflow:visible; }
    .institutional-header .mobile-menu nav>a:last-child { border:0; border-radius:var(--radius-md); margin-top:0; }
  }

}