/* GERADO por bin/build a partir de tokens.json — nao edite. falker-ui */
/* Fonte: resources/css/components.css */

/* ==========================================================================
   falker-ui — estilos dos componentes
   Usa so tokens (--fu-*). Estiliza apenas classes fu-* e as welcome-* da home,
   que saem do style.css de cada app (ver D10 no historico-e-pendencias.md).
   As classes Bootstrap 4/Remark que os componentes tambem emitem (btn, alert,
   panel, modal) continuam com o estilo do app.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utilitarios
   -------------------------------------------------------------------------- */
/* A cor da marca como texto e icone sobre a superficie (aba ativa, segmentado escolhido, eyebrow,
   hover dos botoes de icone): no claro o --fu-primary-strong, no escuro o --fu-primary-text, porque o
   strong segue sendo fundo de botao e escuro demais para texto sobre o fundo escuro (3,2:1 no Compact). */
:root { --fu-primary-ink: var(--fu-primary-strong); }
:root[data-fu-scheme="dark"] { --fu-primary-ink: var(--fu-primary-text); }
@media (prefers-color-scheme: dark) {
    :root[data-fu-scheme="auto"] { --fu-primary-ink: var(--fu-primary-text); }
}

.fu-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Botao  <x-falker::button>
   -------------------------------------------------------------------------- */
.fu-btn {
    /* border-box explicito: dentro de tabela do DataTables (td com content-box) o botao herdava
       content-box, e min-width/min-height somavam ao padding. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fu-space-2);
    font-family: var(--fu-font);
    font-weight: var(--fu-weight-medium);
    border-radius: var(--fu-radius-sm);
    transition: background-color var(--fu-motion-fast) var(--fu-motion-easing),
                border-color var(--fu-motion-fast) var(--fu-motion-easing),
                box-shadow var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-btn:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}
.fu-btn--icon {
    min-width: 36px;
    min-height: 36px;
    padding-left: var(--fu-space-2);
    padding-right: var(--fu-space-2);
}
.fu-btn--icon.btn-sm { min-width: 32px; min-height: 32px; }
.fu-btn--icon.btn-xs { min-width: 28px; min-height: 28px; }
.fu-btn--primary,
.fu-btn--done {
    background-color: var(--fu-primary);
    border-color: var(--fu-primary);
    color: var(--fu-on-primary);
}
.fu-btn--primary:hover,
.fu-btn--done:hover {
    background-color: var(--fu-primary-600);
    border-color: var(--fu-primary-600);
    color: var(--fu-on-primary);
}
.fu-btn--secondary {
    background-color: var(--fu-surface);
    border-color: var(--fu-primary);
    color: var(--fu-primary-text);
}
/* Sem estes estados valia o .btn-outline-primary do Bootstrap (o secundario sai com essa classe):
   hover e clique em azul (#62a8ea) e a sombra azul do :focus, em vez da primaria do app. */
.fu-btn--secondary:hover {
    background-color: var(--fu-primary-50);
    border-color: var(--fu-primary-600);
    color: var(--fu-primary-700);
}
.fu-btn--secondary:not(:disabled):not(.disabled):active,
.fu-btn--secondary:not(:disabled):not(.disabled).active {
    background-color: rgba(var(--fu-primary-rgb), .16);
    border-color: var(--fu-primary-700);
    color: var(--fu-primary-700);
}
.fu-btn--secondary:focus,
.fu-btn--secondary:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}
.fu-btn--secondary:focus-visible {
    box-shadow: var(--fu-focus-ring);
}
.fu-btn--secondary:disabled,
.fu-btn--secondary.disabled {
    background-color: var(--fu-surface);
    border-color: var(--fu-primary);
    color: var(--fu-primary-text);
}
.fu-btn--default,
.fu-btn--cancel {
    background-color: var(--fu-surface);
    border-color: var(--fu-border);
    color: var(--fu-text);
}
.fu-btn--default:hover,
.fu-btn--cancel:hover {
    background-color: var(--fu-canvas);
    border-color: var(--fu-border-strong);
    color: var(--fu-text);
}
.fu-btn--danger  { background-color: var(--fu-danger);  border-color: var(--fu-danger);  color: var(--fu-text-inverse); }
.fu-btn--success { background-color: var(--fu-success); border-color: var(--fu-success); color: var(--fu-text-inverse); }
.fu-btn--warning { background-color: var(--fu-warning); border-color: var(--fu-warning); color: var(--fu-text-inverse); }
.fu-btn--danger:hover,
.fu-btn--success:hover,
.fu-btn--warning:hover {
    filter: brightness(.92);
    color: var(--fu-text-inverse);
}
.fu-btn--link {
    background: transparent;
    border-color: transparent;
    color: var(--fu-primary-text);
}

/* --------------------------------------------------------------------------
   Alerta  <x-falker::alert>
   -------------------------------------------------------------------------- */
.fu-alert {
    border-radius: var(--fu-radius-sm);
    border: 1px solid transparent;
    border-left-width: 4px;
}
.fu-alert--success { background-color: var(--fu-success-bg); border-left-color: var(--fu-success); color: var(--fu-success-fg); }
.fu-alert--danger  { background-color: var(--fu-danger-bg);  border-left-color: var(--fu-danger);  color: var(--fu-danger-fg); }
.fu-alert--warning { background-color: var(--fu-warning-bg); border-left-color: var(--fu-warning); color: var(--fu-warning-fg); }
.fu-alert--recovering { background-color: var(--fu-recovering-bg); border-left-color: var(--fu-recovering-accent); color: var(--fu-recovering-fg); }
.fu-alert--info,
.fu-alert--primary { background-color: var(--fu-info-bg);    border-left-color: var(--fu-info);    color: var(--fu-info-fg); }

/* Variante escura (.alert.dark do Remark): fundo solido, texto branco >= 4,5:1 */
/* O .alert.dark.alert-* do Remark tem a mesma especificidade e carrega depois: sem o .alert a mais,
   o #divAlert do app-shell (alert dark alert-danger fu-alert fu-alert--danger) ficava no vermelho
   claro do tema, branco a ~2,9:1. */
.fu-alert.dark { color: var(--fu-text-inverse); }
.fu-alert.dark.fu-alert--success, .alert.fu-alert.dark.fu-alert--success { background-color: var(--fu-success); border-color: var(--fu-success); }
.fu-alert.dark.fu-alert--danger,  .alert.fu-alert.dark.fu-alert--danger  { background-color: var(--fu-danger);  border-color: var(--fu-danger); }
.fu-alert.dark.fu-alert--warning, .alert.fu-alert.dark.fu-alert--warning { background-color: var(--fu-warning); border-color: var(--fu-warning); }
.fu-alert.dark.fu-alert--recovering, .alert.fu-alert.dark.fu-alert--recovering { background-color: var(--fu-recovering); border-color: var(--fu-recovering); }
.fu-alert.dark.fu-alert--info,    .alert.fu-alert.dark.fu-alert--info    { background-color: var(--fu-info);    border-color: var(--fu-info); }
.fu-alert.dark.fu-alert--primary, .alert.fu-alert.dark.fu-alert--primary { background-color: var(--fu-primary); border-color: var(--fu-primary); }
.fu-alert.dark code {
    color: inherit;
    background-color: rgba(0, 0, 0, .3);
    border-color: rgba(255, 255, 255, .45);
}
.fu-alert.dark a {
    color: inherit;
    text-decoration: underline;
}
.fu-alert ul {
    margin: 0;
    padding-left: var(--fu-space-5);
}

/* Com icone: icone a esquerda, texto ao lado */
.fu-alert--with-icon {
    display: flex;
    align-items: flex-start;
    gap: var(--fu-space-3);
}
.fu-alert__icon {
    flex: none;
    margin-top: 2px;
    font-size: 16px;
}
.fu-alert__body {
    flex: 1;
    min-width: 0;
}
.fu-alert--with-icon.alert-dismissible .close {
    order: 3;
}

/* Hint: dica fixa dentro da pagina (o .info-alert do FalkerMap) */
.fu-alert.fu-alert--hint {
    margin: 0 0 var(--fu-space-4);
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--fu-radius-lg);
    font-size: var(--fu-text-sm);
    line-height: var(--fu-leading-base);
}
.fu-alert--hint.fu-alert--info,
.fu-alert--hint.fu-alert--primary { border-color: rgba(var(--fu-info-rgb), .18); }
.fu-alert--hint.fu-alert--success { border-color: rgba(var(--fu-success-rgb), .18); }
.fu-alert--hint.fu-alert--warning { border-color: rgba(var(--fu-warning-rgb), .22); }
.fu-alert--hint.fu-alert--recovering { border-color: rgba(var(--fu-recovering-rgb), .22); }
.fu-alert--hint.fu-alert--danger  { border-color: rgba(var(--fu-danger-rgb), .18); }
.fu-alert--hint.fu-alert--primary { background-color: var(--fu-primary-50); color: var(--fu-primary-700); border-color: rgba(var(--fu-primary-rgb), .18); }
.fu-alert--hint .fu-alert__icon { font-size: 14px; margin-top: 3px; }

/* --------------------------------------------------------------------------
   Cartao da home (.welcome-intro-card) — mesmas medidas da home repaginada
   -------------------------------------------------------------------------- */
.welcome-intro-card {
    background: var(--fu-surface);
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-xl);
    padding: 18px;
    box-shadow: var(--fu-shadow-card);
}
.welcome-actions-title {
    margin: 0 0 var(--fu-space-3);
    font-size: var(--fu-text-md);
    font-weight: var(--fu-weight-semibold);
    color: var(--fu-neutral-700);
}

/* --------------------------------------------------------------------------
   Cartao  <x-falker::card>
   -------------------------------------------------------------------------- */
.fu-card {
    background: var(--fu-surface);
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-xl);
    box-shadow: var(--fu-shadow-card);
    overflow: hidden;
}
.fu-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fu-space-3);
    padding: 14px 18px;
    border-bottom: 1px solid var(--fu-border);
}
.fu-card__title {
    display: flex;
    align-items: center;
    gap: var(--fu-space-2);
    margin: 0;
    font-size: var(--fu-text-md);
    font-weight: var(--fu-weight-semibold);
    color: var(--fu-neutral-700);
}
.fu-card__title i {
    color: var(--fu-primary-text);
}
.fu-card__subtitle {
    margin: 2px 0 0;
    font-size: var(--fu-text-xs);
    color: var(--fu-text-muted);
}
.fu-card__actions {
    display: flex;
    align-items: center;
    gap: var(--fu-space-2);
    flex-wrap: wrap;
}
.fu-card__body {
    padding: 18px;
}
.fu-card__body--flush {
    padding: 0;
}
/* A tabela dentro do corpo sem respiro: o cartao ja e a moldura (sem isto, um quadro
   arredondado dentro do outro). */
.fu-card__body--flush > .fu-table-wrap {
    border: 0;
    border-radius: 0;
}
.fu-card__footer {
    padding: 10px 18px;
    border-top: 1px solid var(--fu-border);
    background: var(--fu-neutral-50);
    font-size: var(--fu-text-sm);
    color: var(--fu-text-muted);
}

/* --------------------------------------------------------------------------
   Lista de links com icone  <x-falker::link-list>
   -------------------------------------------------------------------------- */
.fu-link-list,
.welcome-actions-list {
    display: flex;
    flex-direction: column;
    gap: var(--fu-space-2);
    flex: 1;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fu-link-list__item,
.welcome-action-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fu-text-muted);
    text-decoration: none !important;
    font-weight: var(--fu-weight-medium);
    padding: 10px 12px;
    border-radius: var(--fu-radius-md);
    border: 1px solid var(--fu-border);
    background: var(--fu-surface);
    transition: border-color var(--fu-motion-base) var(--fu-motion-easing),
                color var(--fu-motion-base) var(--fu-motion-easing),
                transform var(--fu-motion-base) var(--fu-motion-easing),
                box-shadow var(--fu-motion-base) var(--fu-motion-easing);
}
.fu-link-list__item i,
.welcome-action-link i {
    width: 18px;
    text-align: center;
    color: var(--fu-primary-text);
}
.fu-link-list__item:hover,
.fu-link-list__item:focus-visible,
.welcome-action-link:hover,
.welcome-action-link:focus-visible {
    border-color: rgba(var(--fu-primary-rgb), .35);
    color: var(--fu-primary-text);
    transform: translateX(2px);
    box-shadow: var(--fu-shadow-card-hover);
}
.fu-link-list__item:focus-visible,
.welcome-action-link:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}

/* --------------------------------------------------------------------------
   Home  <x-falker::welcome>
   Mesmas classes e medidas da home repaginada em hfmweb, compactweb e fmp2web
   (jun-ago/2026), agora em um lugar so.
   -------------------------------------------------------------------------- */
.welcome-page {
    background: linear-gradient(135deg, rgba(var(--fu-primary-rgb), .08), rgba(var(--fu-primary-rgb), .03));
    border: 1px solid rgba(var(--fu-primary-rgb), .14);
    border-radius: var(--fu-radius-2xl);
    padding: 22px;
}
.welcome-left-stack,
.welcome-right-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.welcome-left-stack {
    min-height: 420px;
}
.welcome-message-card {
    flex: 1 1 52%;
    min-height: 215px;
    padding: 0;
    overflow: hidden;
}
.welcome-actions-card {
    flex: 1 1 48%;
    display: flex;
    flex-direction: column;
}
.welcome-msg {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100%;
    padding: var(--fu-space-7) 26px;
    background: linear-gradient(135deg, rgba(var(--fu-primary-rgb), .10), rgba(var(--fu-primary-rgb), .025) 56%, var(--fu-surface) 100%);
}
.welcome-msg::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 26px;
    width: 46px;
    height: 4px;
    border-radius: var(--fu-radius-pill);
    background: var(--fu-primary);
}
.welcome-msg p {
    margin: 0;
    color: var(--fu-text-strong);
    font-size: 1.75rem;
    font-weight: var(--fu-weight-medium);
    line-height: 1.25;
    letter-spacing: -.4px;
}
.welcome-msg p strong {
    display: block;
    margin-top: var(--fu-space-2);
    color: var(--fu-primary-text);
    font-size: 2.05rem;
    font-weight: var(--fu-weight-bold);
    line-height: 1.1;
}
.welcome-illustration-card {
    flex: 1 1 auto;
    min-height: 300px;
    border-radius: var(--fu-radius-xl);
    background: radial-gradient(circle at 12% 14%, rgba(var(--fu-primary-rgb), .18), rgba(var(--fu-primary-rgb), .03) 45%), var(--fu-surface);
    border: 1px solid rgba(var(--fu-primary-rgb), .22);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--fu-space-7) 0 var(--fu-space-7) var(--fu-space-7);
    box-shadow: var(--fu-shadow-raised);
}
.welcome-illustration-card--centered {
    justify-content: center;
    padding: 28px;
}
.welcome-illustration-card--centered .resize-welcome-img {
    width: 100%;
    max-height: 320px;
}
/* Cartao extra dos slots (<x-falker::welcome-card>): a lista de links vai no fluxo do cartao. */
.welcome-intro-card .fu-link-list { margin: 0; }
/* Cartao com os selos das lojas ("Baixe o app"): titulo e selos na mesma linha, os selos a direita,
   num cartao baixo (quebra em duas linhas so quando nao cabe). Pedido no Leaf (18/10/2026). */
.fu-welcome-card:has(> .fu-store-badges) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fu-space-2) var(--fu-space-4);
    padding-top: var(--fu-space-3);
    padding-bottom: var(--fu-space-3);
}
.fu-welcome-card:has(> .fu-store-badges) > .welcome-actions-title { margin-bottom: 0; }
.fu-welcome-card > .fu-store-badges {
    justify-content: flex-end;
    margin-left: auto;
}
.resize-welcome-img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .16));
}
.welcome-below {
    margin-top: 18px;
}

@media (max-width: 991px) {
    .welcome-page {
        padding: var(--fu-space-4);
    }
    .welcome-left-stack,
    .welcome-right-stack {
        gap: 14px;
        min-height: auto;
    }
    .welcome-right-stack {
        margin-top: 14px;
    }
    .welcome-message-card {
        min-height: 175px;
    }
    .welcome-msg {
        padding: var(--fu-space-6) 22px;
    }
    .welcome-msg::before {
        top: 18px;
        left: 22px;
    }
    .welcome-msg p {
        font-size: 1.45rem;
    }
    .welcome-msg p strong {
        font-size: 1.7rem;
    }
    .welcome-illustration-card {
        min-height: 260px;
        padding: 18px 0 18px 18px;
    }
    .resize-welcome-img {
        max-height: 250px;
    }
    .welcome-illustration-card--centered {
        padding: 18px;
    }
}

/* --------------------------------------------------------------------------
   Painel  <x-falker::panel>
   -------------------------------------------------------------------------- */
.fu-panel .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fu-space-3);
}
.fu-panel .panel-title {
    color: var(--fu-text);
    font-weight: var(--fu-weight-semibold);
}
.fu-panel__actions {
    display: flex;
    align-items: center;
    gap: var(--fu-space-2);
    padding-right: var(--fu-space-4);
}

/* --------------------------------------------------------------------------
   Modal  <x-falker::modal>
   O botao de fechar vem ANTES do titulo no HTML (a ordem que o Remark dos apps
   espera, com .close flutuando a direita). O order o poe a direita no flex, como o
   proprio Remark faz (.modal-title order 1, .close order 2). Com row-reverse, a regra
   do Remark invertia o cabecalho nos apps: o x a esquerda e o titulo a direita.
   -------------------------------------------------------------------------- */
.fu-modal .modal-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--fu-space-3);
}
.fu-modal .modal-header .close {
    order: 2;
    float: none;
    margin: 0;
    padding: 0;
}
.fu-modal .modal-title {
    order: 1;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Campo  <x-falker::field>
   -------------------------------------------------------------------------- */
.fu-field label {
    font-weight: var(--fu-weight-medium);
    color: var(--fu-text);
}
.fu-field__required {
    color: var(--fu-danger);
    margin-left: 2px;
}
/* No escuro o --fu-danger (solido, de fundo) dava 3:1 como texto; o tom de texto de perigo da 8:1. */
:root[data-fu-scheme="dark"] .fu-field__required { color: var(--fu-danger-fg); }
@media (prefers-color-scheme: dark) {
    :root[data-fu-scheme="auto"] .fu-field__required { color: var(--fu-danger-fg); }
}
.fu-field .form-control::placeholder {
    color: var(--fu-text-subtle);
    opacity: 1;
}
.fu-field .form-control:focus {
    border-color: var(--fu-primary);
    box-shadow: var(--fu-focus-ring);
}
.fu-field__help {
    display: block;
    margin-top: var(--fu-space-1);
    font-size: var(--fu-text-xs);
    color: var(--fu-text-muted);
}
.fu-field__error {
    display: block;
    margin-top: var(--fu-space-1);
    font-size: var(--fu-text-xs);
    color: var(--fu-danger);
}
.fu-field--invalid .form-control {
    border-color: var(--fu-danger);
}

/* Senha com mostrar/esconder  <x-falker::field type="password" reveal>
   O botao fica dentro do campo, a direita; nasce hidden e o falker-ui.js o mostra. */
.fu-field__reveal {
    position: relative;
}
.fu-field__reveal .form-control {
    padding-right: 44px;
}
/* O icone de invalido do Bootstrap ficaria embaixo do botao; a borda e a mensagem bastam. */
.fu-field__reveal .form-control.is-invalid {
    background-image: none;
}
.fu-field__reveal-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    padding: 0;
    border: 0;
    border-radius: 0 var(--fu-radius-sm) var(--fu-radius-sm) 0;
    background: transparent;
    color: var(--fu-text-muted);
    /* O olho ocupa o 1em inteiro desde a 0.12.0 (antes tinha a margem do Material): 17px
       mantem o desenho do tamanho que ele tinha com 20px. */
    font-size: 17px;
    cursor: pointer;
}
.fu-field__reveal-toggle[hidden] {
    display: none;
}
.fu-field__reveal-toggle:hover {
    color: var(--fu-primary-text);
}
.fu-field__reveal-toggle:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}
.fu-field__reveal-toggle .fu-icon-eye-off,
.fu-field__reveal-toggle[aria-pressed="true"] .fu-icon-eye {
    display: none;
}
.fu-field__reveal-toggle[aria-pressed="true"] .fu-icon-eye-off {
    display: inline-block;
}

/* --------------------------------------------------------------------------
   Autenticacao  <x-falker::auth-layout> <x-falker::auth-links>  (SSO, D27)
   A tela que o SSO ja tinha (falker.css), em tokens: gradiente da marca
   (navy -> primaria -> secundaria) e cartao central. So classes fu-*, sem
   depender da grade do Bootstrap: o SSO usa o 5, os apps o 4.
   -------------------------------------------------------------------------- */
.fu-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--fu-space-12) var(--fu-space-4);
    /* A pagina e do pacote: a fonte tambem (o Bootstrap 5 do SSO usa a do sistema). */
    font-family: var(--fu-font);
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .16), transparent 28%),
        linear-gradient(135deg, var(--fu-falker-navy) 0%, var(--fu-primary) 48%, var(--fu-secondary) 100%);
}
.fu-auth__card {
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    border-radius: var(--fu-radius-panel);
    background: var(--fu-surface);
    box-shadow: var(--fu-shadow-raised);
}
.fu-auth__brand {
    padding: var(--fu-space-8) var(--fu-space-8) 0;
    text-align: center;
}
.fu-auth__brand img {
    max-width: 180px;
    height: auto;
}
.fu-auth__body {
    padding: var(--fu-space-8) var(--fu-space-10) var(--fu-space-10);
}
.fu-auth__title {
    margin: 0 0 var(--fu-space-6);
    color: var(--fu-text-strong);
    font-size: var(--fu-text-lg);
    font-weight: var(--fu-weight-semibold);
    text-align: center;
}
.fu-auth .fu-field {
    margin-bottom: var(--fu-space-5);
}
.fu-auth .fu-field label {
    color: var(--fu-text-strong);
    font-size: var(--fu-text-sm);
    font-weight: var(--fu-weight-semibold);
}
.fu-auth .fu-field .form-control {
    min-height: 46px;
    padding-left: 14px;
    border-color: var(--fu-border-strong);
    border-radius: var(--fu-radius-lg);
    color: var(--fu-text);
}
.fu-auth .fu-field__reveal-toggle {
    border-radius: 0 var(--fu-radius-lg) var(--fu-radius-lg) 0;
}
/* O botao de enviar: <div class="fu-auth__submit"><x-falker::button type="submit">… */
.fu-auth__submit {
    padding: var(--fu-space-4) 0 var(--fu-space-3);
    text-align: center;
}
.fu-auth__submit .fu-btn {
    min-width: 180px;
    min-height: 46px;
    border-radius: var(--fu-radius-pill);
    font-weight: var(--fu-weight-bold);
}
/* Texto branco sobre o gradiente: o centro da base nunca chega a secundaria pura
   (4,19:1). Medido com cartao alto (cadastro): pior 4,67:1 em 375px, 5,1:1 em 768px. */
.fu-auth__footer {
    margin-top: var(--fu-space-4);
    color: var(--fu-text-inverse);
    font-size: var(--fu-text-xs);
    text-align: center;
}
.fu-auth-links {
    margin: var(--fu-space-2) 0 0;
    padding-top: var(--fu-space-5);
    border-top: 1px solid var(--fu-border);
    font-size: var(--fu-text-sm);
    text-align: center;
}
.fu-auth-links a {
    color: var(--fu-primary-text);
    font-weight: var(--fu-weight-semibold);
    text-decoration: none;
}
/* Hover so troca a cor, sem sublinhado (vence o a:hover { underline } do
   Bootstrap/Remark). O sublinhado fica so no foco por teclado. */
.fu-auth-links a:hover,
.fu-auth-links a:focus {
    color: var(--fu-primary-700);
    text-decoration: none;
}
.fu-auth-links a:focus-visible {
    text-decoration: underline;
}
.fu-auth-links__separator {
    display: inline-block;
    margin: 0 var(--fu-space-2);
    color: var(--fu-border-strong);
}
@media (max-width: 575.98px) {
    .fu-auth__card { border-radius: var(--fu-radius-2xl); }
    .fu-auth__brand { padding: var(--fu-space-7) var(--fu-space-7) 0; }
    .fu-auth__brand img { max-width: 150px; }
    .fu-auth__body { padding: var(--fu-space-7) var(--fu-space-6) var(--fu-space-8); }
    .fu-auth__submit .fu-btn { width: 100%; }
    .fu-auth-links__separator { display: block; margin: var(--fu-space-2) 0; line-height: 1; }
}

/* --------------------------------------------------------------------------
   Badge  <x-falker::badge>
   -------------------------------------------------------------------------- */
.fu-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fu-space-1);
    padding: 2px var(--fu-space-2);
    border-radius: var(--fu-radius-pill);
    font-size: var(--fu-text-xs);
    font-weight: var(--fu-weight-semibold);
    line-height: 1.5;
}
.fu-badge--neutral { background: var(--fu-neutral-100);  color: var(--fu-neutral-800); }
.fu-badge--primary { background: var(--fu-primary-50);   color: var(--fu-primary-700); }
.fu-badge--success { background: var(--fu-success-bg);   color: var(--fu-success-fg); }
.fu-badge--danger  { background: var(--fu-danger-bg);    color: var(--fu-danger-fg); }
.fu-badge--warning { background: var(--fu-warning-bg);   color: var(--fu-warning-fg); }
.fu-badge--recovering { background: var(--fu-recovering-bg); color: var(--fu-recovering-fg); }
.fu-badge--info    { background: var(--fu-info-bg);      color: var(--fu-info-fg); }

/* solid: fundo no solido do status, texto branco >= 4,5:1 (D05) */
.fu-badge--solid { color: var(--fu-text-inverse); }
.fu-badge--solid.fu-badge--neutral { background: var(--fu-neutral-600); }
.fu-badge--solid.fu-badge--primary { background: var(--fu-primary-strong); }
.fu-badge--solid.fu-badge--success { background: var(--fu-success); }
.fu-badge--solid.fu-badge--danger  { background: var(--fu-danger); }
.fu-badge--solid.fu-badge--warning { background: var(--fu-warning); }
.fu-badge--solid.fu-badge--recovering { background: var(--fu-recovering); }
.fu-badge--solid.fu-badge--info    { background: var(--fu-info); }

/* outline: so a borda, para marcar sem pesar (ex.: "recuperado" numa linha de log) */
.fu-badge--outline { background: transparent; border: 1px solid currentColor; padding: 1px 7px; }
.fu-badge--outline.fu-badge--neutral { color: var(--fu-neutral-700); }
.fu-badge--outline.fu-badge--primary { color: var(--fu-primary-700); }
.fu-badge--outline.fu-badge--success { color: var(--fu-success-fg); }
.fu-badge--outline.fu-badge--danger  { color: var(--fu-danger-fg); }
.fu-badge--outline.fu-badge--warning { color: var(--fu-warning-fg); }
.fu-badge--outline.fu-badge--recovering { color: var(--fu-recovering-fg); }
.fu-badge--outline.fu-badge--info    { color: var(--fu-info-fg); }

/* Ponto de estado: herda a cor do texto no solid, usa o solido no soft/outline */
.fu-badge__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.fu-badge--success:not(.fu-badge--solid) .fu-badge__dot { background: var(--fu-success); }
.fu-badge--danger:not(.fu-badge--solid) .fu-badge__dot  { background: var(--fu-danger); }
.fu-badge--warning:not(.fu-badge--solid) .fu-badge__dot { background: var(--fu-warning); }
.fu-badge--recovering:not(.fu-badge--solid) .fu-badge__dot { background: var(--fu-recovering-accent); }
.fu-badge--info:not(.fu-badge--solid) .fu-badge__dot    { background: var(--fu-info); }
.fu-badge--primary:not(.fu-badge--solid) .fu-badge__dot { background: var(--fu-primary); }
.fu-badge--neutral:not(.fu-badge--solid) .fu-badge__dot { background: var(--fu-neutral-500); }

/* Selo NOVO: o paralelogramo de 11 graus da marca (D14). O texto volta a ficar reto. */
.fu-badge--new {
    padding: 2px 10px;
    border-radius: 2px;
    background: var(--fu-falker-new);
    color: var(--fu-text-inverse);
    font-weight: var(--fu-weight-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: skewX(-11deg);
}
.fu-badge--new .fu-badge__text {
    display: inline-block;
    transform: skewX(11deg);
}

/* Selos laranja de edicao e de limite (D23): o laranja da dobra, reto (o angulo e so do NOVO). */
.fu-badge--edition,
.fu-badge--limit {
    background: var(--fu-falker-fold);
    color: var(--fu-text-inverse);
    font-weight: var(--fu-weight-bold);
}

/* --------------------------------------------------------------------------
   Selos das lojas  <x-falker::store-badges>
   Os selos oficiais do Google Play e da App Store (D51), lado a lado, na altura de 32 px que as
   lojas aceitam como minima legivel. Sem fundo nem borda: o selo ja e a propria arte da loja.
   -------------------------------------------------------------------------- */
.fu-store-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fu-space-2);
}
.fu-store-badges .fu-store-badges__link {
    display: inline-flex;
    border-radius: var(--fu-radius-xs);
    transition: opacity var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-store-badges .fu-store-badges__link:hover,
.fu-store-badges .fu-store-badges__link:focus-visible {
    opacity: .85;
}
.fu-store-badges .fu-store-badges__link:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}
.fu-store-badges .fu-store-badges__img {
    width: auto;
    height: 32px;
}

/* --------------------------------------------------------------------------
   Seletor de apps  <x-falker::app-switcher> <x-falker::app-list>
   Uma lista com a logo do header de cada app (D48), uma por linha, todas na
   mesma altura. A grade .fu-app-switcher__list fica para o <x-falker::help-menu>.
   -------------------------------------------------------------------------- */
.fu-app-switcher__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    gap: var(--fu-space-2);
    margin: 0;
    padding: var(--fu-space-2);
    list-style: none;
}
.fu-app-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    margin: 0;
    padding: var(--fu-space-2);
    list-style: none;
}
/* Seletores com duas classes e o elemento porque o CSS do app (Remark: a:hover { underline })
   carrega depois do pacote. O app atual e marcado so para leitor de tela (aria-current), como
   na grade de antes: os outros apps ficam iguais a ele. */
.fu-app-list .fu-app-list__item a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--fu-radius-md);
    text-decoration: none;
    transition: background-color var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-app-list .fu-app-list__item a:hover,
.fu-app-list .fu-app-list__item a:focus {
    background-color: var(--fu-neutral-100);
    text-decoration: none;
}
.fu-app-list .fu-app-list__item a:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}
/* O painel na superficie do tema, com ou sem [data-fu-skin]: no escuro o FALKER das logos e claro
   e sumia no branco do dropdown do Remark. */
.fu-app-switcher .dropdown-menu {
    background-color: var(--fu-surface);
}
/* O .falkerApps do CSS antigo dos apps (falker/style.css) tem largura e altura fixas da grade
   (250-300 x 155-160 px): a lista de cinco linhas passava da altura e saia do painel. */
.fu-app-switcher .falkerApps {
    width: auto;
    height: auto;
}
/* As imagens ja vem compostas (D48): icones com a mesma area numa coluna de largura fixa, textos na
   mesma escala e na mesma coluna, todas com a mesma altura. Uma altura so aqui as mantem
   proporcionais e alinhadas. */
.fu-app-list .fu-app-list__logo {
    width: auto;
    max-width: 100%;
    height: 44px;
}

/* --------------------------------------------------------------------------
   Cabecalho  <x-falker::navbar-action> <x-falker::notifications>
              <x-falker::help-menu> <x-falker::user-menu>
   O markup e o do header Remark dos apps (nav-item dropdown, navbar-avatar);
   aqui so o que os componentes acrescentam.
   -------------------------------------------------------------------------- */
/* A barra clara do <x-falker::navbar>. (0,2,0) vence o azul do .site-navbar do site.css e do
   .navbar-inverse do bootstrap-extend sem !important; o texto e os icones saem do branco do
   tema escuro do Remark para o texto secundario (o --text dos style.css dos apps). */
.site-navbar.fu-navbar {
    border: 0;
    background-color: var(--fu-surface);
    box-shadow: var(--fu-shadow-sm);
}
.site-navbar.fu-navbar .navbar-header,
.site-navbar.fu-navbar .navbar-header .navbar-toggler,
.site-navbar.fu-navbar .navbar-toolbar .nav-link {
    color: var(--fu-text-muted);
}
.site-navbar.fu-navbar .navbar-toolbar .nav-link:hover,
.site-navbar.fu-navbar .navbar-toolbar .nav-link:focus,
.site-navbar.fu-navbar .navbar-toolbar > .show > .nav-link {
    background-color: transparent;
    color: var(--fu-primary-text);
}
/* Logo claro/escuro (logo-dark no navbar e no footer): so um aparece, conforme o esquema. */
.fu-logo-dark { display: none; }
:root[data-fu-scheme="dark"] .fu-logo-light { display: none; }
:root[data-fu-scheme="dark"] .fu-logo-dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
    :root[data-fu-scheme="auto"] .fu-logo-light { display: none; }
    :root[data-fu-scheme="auto"] .fu-logo-dark { display: inline-block; }
}
.fu-navbar-action .fu-navbar-action__toggle { position: relative; }
/* Um tamanho so para os icones do header. O dos apps vinha do icon-stl (20px), uma classe
   do CSS do FalkerMap, e o sino e a ajuda ficavam nos 14px do Remark, menores. O do usuario
   fica um pouco menor por estar ao lado do nome. */
.fu-navbar-action .fu-navbar-action__icon,
.fu-app-switcher .fu-app-switcher__icon {
    font-size: 20px;
    line-height: 1;
}
.fu-user-menu .fu-user-menu__icon {
    font-size: 18px;
    line-height: 1;
}
.fu-navbar-action .fu-navbar-action__toggle:focus-visible,
.fu-user-menu .fu-user-menu__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}
.fu-navbar-action .fu-navbar-action__badge {
    position: absolute;
    top: 10px;
    right: 2px;
    min-width: 18px;
    padding: 2px 5px;
    background: var(--fu-danger);
    color: var(--fu-text-inverse);
    font-size: 10px;
    font-weight: var(--fu-weight-bold);
    line-height: 1.2;
}
.fu-navbar-action .fu-navbar-action__badge:empty { display: none; }

/* Botao do menu (D45, D46): as barras do <x-falker::navbar> sobre a placa inclinada do MenuButton do
   falker-ui-mobile. Na web a placa e um tom suave da primaria do app (14% sobre a barra clara; 24%
   no escuro) com as barras na primaria escura: o cinza-escuro do mobile destoava da barra clara
   dos apps. A placa e um ::before centrado, para nao mudar a caixa que o Remark da ao
   .navbar-toggler e ao .nav-link; o icone fica reto, por cima. */
.fu-menu-button {
    position: relative;
    --fu-menu-plate-alpha: .14;
    transition: opacity var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-menu-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: var(--fu-radius-sm);
    background: rgba(var(--fu-primary-rgb), var(--fu-menu-plate-alpha));
    transform: skewX(-11deg);
    transition: background-color var(--fu-motion-fast) var(--fu-motion-easing);
    pointer-events: none;
}
.fu-menu-button:hover { --fu-menu-plate-alpha: .22; }
:root[data-fu-scheme="dark"] .fu-menu-button { --fu-menu-plate-alpha: .24; }
:root[data-fu-scheme="dark"] .fu-menu-button:hover { --fu-menu-plate-alpha: .32; }
@media (prefers-color-scheme: dark) {
    :root[data-fu-scheme="auto"] .fu-menu-button { --fu-menu-plate-alpha: .24; }
    :root[data-fu-scheme="auto"] .fu-menu-button:hover { --fu-menu-plate-alpha: .32; }
}
.fu-menu-button > i {
    position: relative;
    font-size: 20px;
    line-height: 1;
}
/* A cor das barras vence o CSS do app que pinta o hamburguer com !important (o
   `.site-navbar .navbar-header .navbar-toggler { color: var(--text) !important }` do Compact) e o
   .nav-link que o Remark pinta na barra clara. */
.fu-menu-button,
.site-navbar .fu-menu-button,
.site-navbar .fu-menu-button:hover,
.site-navbar .fu-menu-button:focus,
.site-navbar .fu-menu-button > i { color: var(--fu-primary-700) !important; }
.fu-menu-button:active { opacity: .2; }
.fu-menu-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

/* Ajuda: a mesma grade do seletor de apps */
.fu-help-menu .fu-app-switcher__item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fu-space-1);
    padding: 2px 10px;
    border-radius: var(--fu-radius-md);
    color: var(--fu-text);
    text-align: center;
    text-decoration: none;
}
.fu-help-menu .fu-app-switcher__item a:hover,
.fu-help-menu .fu-app-switcher__item a:focus {
    color: var(--fu-text);
    text-decoration: none;
}
.fu-help-menu .fu-app-switcher__item a:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}
.fu-help-menu .fu-app-switcher__label {
    font-size: 10px;
    line-height: 1.4;
}
.fu-help-menu .fu-help-menu__icon {
    color: var(--fu-primary-text);
    font-size: 28px;
    line-height: 40px;
}

.fu-notifications .fu-notifications__menu { min-width: 300px; padding: 0; }
.fu-notifications .fu-notifications__head,
.fu-notifications .fu-notifications__foot {
    padding: var(--fu-space-2) var(--fu-space-3);
    font-size: var(--fu-text-sm);
}
.fu-notifications .fu-notifications__head { border-bottom: 1px solid var(--fu-border); text-align: right; }
.fu-notifications .fu-notifications__foot { border-top: 1px solid var(--fu-border); text-align: center; }
.fu-notifications .fu-notifications__foot a { color: var(--fu-primary-text); }
.fu-notifications .fu-notifications__read {
    padding: 0;
    border: 0;
    color: var(--fu-primary-text);
    font-size: var(--fu-text-sm);
}
.fu-notifications .fu-notifications__list {
    max-height: 360px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}
.fu-notifications .fu-notifications__list:empty { display: none; }
.fu-notifications .fu-notifications__item {
    display: flex;
    align-items: center;
    gap: var(--fu-space-2);
    padding: var(--fu-space-2) var(--fu-space-4);
    border-bottom: 1px solid var(--fu-border);
    font-size: var(--fu-text-sm);
}
.fu-notifications .fu-notifications__item:last-child { border-bottom: 0; }
.fu-notifications .fu-notifications__message {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--fu-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fu-notifications .fu-notifications__item--danger .fu-notifications__message { color: var(--fu-danger); }
.fu-notifications .fu-notifications__item--warning .fu-notifications__message { color: var(--fu-warning-fg, var(--fu-text)); }
.fu-notifications .fu-notifications__item--success .fu-notifications__message { color: var(--fu-success); }
.fu-notifications .fu-notifications__dismiss {
    flex: 0 0 auto;
    padding: 0 var(--fu-space-1);
    border: 0;
    color: var(--fu-text-muted);
}
.fu-notifications .fu-notifications__dismiss:hover { color: var(--fu-danger); }

.fu-user-menu .fu-user-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--fu-space-2);
}
.fu-user-menu .fu-user-menu__img { vertical-align: -2px; }
/* SVG exportado com margem interna (os icones bar/ dos apps, viewBox 55 com o desenho
   ao centro): desenha em 25px, mas ocupa os 16px dos icones vizinhos. */
.fu-user-menu .fu-user-menu__img--padded {
    width: 25px;
    height: 25px;
    margin: -4.5px;
}
.fu-user-menu button.dropdown-item { cursor: pointer; }

/* --------------------------------------------------------------------------
   Menu lateral  <x-falker::menu-group> <x-falker::menu-item> <x-falker::menu-divider>
   O site-menu do Remark abre o submenu no hover. A barra dos apps tem 70px e a cor
   primaria; o grupo aberto (hover, teclado) fica claro, com o icone na primaria.
   O rotulo fica embaixo do icone e, por padrao, so aparece com o grupo aberto, como
   a overlay que os apps tinham (D28). Sem destaque para o item atual (D29).
   -------------------------------------------------------------------------- */
.fu-menu-group {
    --fu-menu-icon-size: 50px;  /* area do icone: a altura dos SVG do menu dos apps */
    --fu-menu-label-size: 8px;  /* CONFIGURACAO e ADMINISTRATIVO cabem nos 70px */
}
/* O .site-menu na frente vence o `.site-menu > .site-menu-item > a { display:block }`
   do Remark (0,2,1), que jogava o rotulo para o lado do icone. */
.fu-menu-group > .fu-menu-group__toggle,
.site-menu > .fu-menu-group > .fu-menu-group__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    text-decoration: none;
}
/* O padding de 12px do Remark nas laterais deixava so 46px para o rotulo. */
.site-menu > .fu-menu-group > .fu-menu-group__toggle {
    padding: 12px 1px 6px;
}
.fu-menu-group > .fu-menu-group__toggle:focus-visible {
    outline: 2px solid var(--fu-primary);
    outline-offset: -2px;
}
/* Grupo aberto pelo teclado (.hover, do falker-ui.js) ou focado: o mesmo fundo claro
   que os apps dao ao :hover, para o icone e o rotulo na primaria aparecerem. */
/* li/a no seletor: vence o `.site-menubar-light .site-menu>.site-menu-item.hover>a`
   do Remark (0,4,1), que pinta o link de azul claro. */
.site-menu > li.fu-menu-group.hover > a.fu-menu-group__toggle,
.site-menu > li.fu-menu-group > a.fu-menu-group__toggle:focus {
    background-color: var(--fu-surface);
    color: var(--fu-primary-text);
}
/* Mesma area em todo grupo, com o desenho centrado: um SVG mais baixo (o do
   FalkerField tem 36px) nao sobe o rotulo, e um icone de fonte largo (fa-gears) nao
   passa da caixa. O .site-menu-icon do Remark tem width:1em e margin:0 auto, que
   descentralizam o glifo mais largo que 1em. */
.fu-menu-group .fu-menu-group__icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--fu-menu-icon-size);
    overflow: hidden;
    line-height: 1;
}
.fu-menu-group .fu-menu-group__icon > i {
    width: auto;
    margin: 0;
    font-size: calc(var(--fu-menu-icon-size) * .8);
    line-height: var(--fu-menu-icon-size);
}
/* fu-icon nao tem glifo: com o width:auto acima ficava com 0px. Caixa do tamanho dos SVG
   que os apps escreviam no menu (50px, desenho em ~44px), e o desenho cabe nela sem
   distorcer: o falker-field, largo, ocupa a largura toda. */
.fu-menu-group .fu-menu-group__icon > i.fu-icon {
    width: var(--fu-menu-icon-size);
    height: calc(var(--fu-menu-icon-size) * .88);
}
.fu-menu-group .fu-menu-group__label {
    max-width: 100%;
    color: inherit;
    font-size: var(--fu-menu-label-size);
    font-weight: var(--fu-weight-bold);
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.fu-menu-group:hover > .fu-menu-group__toggle .fu-menu-group__label,
.fu-menu-group.hover > .fu-menu-group__toggle .fu-menu-group__label,
.fu-menu-group > .fu-menu-group__toggle:focus .fu-menu-group__label {
    color: var(--fu-primary-text); /* sobre o fundo claro do grupo aberto */
}
/* caption="hover" (padrao): opacity, e nao display/visibility, para o leitor de tela
   continuar lendo o nome do grupo. */
.fu-menu-group--caption-hover .fu-menu-group__label {
    opacity: 0;
    transition: opacity var(--fu-motion-base) var(--fu-motion-easing);
}
.fu-menu-group--caption-hover:hover > .fu-menu-group__toggle .fu-menu-group__label,
.fu-menu-group--caption-hover.hover > .fu-menu-group__toggle .fu-menu-group__label,
.fu-menu-group--caption-hover > .fu-menu-group__toggle:focus .fu-menu-group__label {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .fu-menu-group--caption-hover .fu-menu-group__label { transition: none; }
}
.fu-menu-group .fu-menu-group__heading {
    padding: var(--fu-space-2) var(--fu-space-4) var(--fu-space-1);
    color: var(--fu-text-muted);
    font-size: var(--fu-text-xs);
    font-weight: var(--fu-weight-bold);
    text-transform: uppercase;
    list-style: none;
}
.fu-menu-item > a:focus-visible {
    outline: 2px solid var(--fu-primary);
    outline-offset: -2px;
}
.fu-menu-item .fu-menu-item__badge {
    margin-left: var(--fu-space-2);
    background: var(--fu-danger);
    color: var(--fu-text-inverse);
    font-size: 10px;
}
/* Contador vazio (badge=0): fica no DOM para o JS do app preencher, e some ate la. */
.fu-menu-item .fu-menu-item__badge:empty,
.fu-menu-item .fu-menu-item__badge:empty + .fu-menu-item__badge-label {
    display: none;
}
.fu-menu-divider {
    height: 0;
    margin: var(--fu-space-1) var(--fu-space-3);
    border-top: 1px solid var(--fu-border);
    list-style: none;
}

/* --------------------------------------------------------------------------
   Cartao de indicador  <x-falker::kpi-card>
   solid = o stat-card do Water; light = o KPI do painel do FalkerMap
   -------------------------------------------------------------------------- */
.fu-kpi {
    position: relative;
    display: flex;
    overflow: hidden;
    margin-bottom: var(--fu-space-4);
    text-decoration: none;
    transition: transform var(--fu-motion-base) var(--fu-motion-easing),
                box-shadow var(--fu-motion-base) var(--fu-motion-easing);
}
.fu-kpi__content {
    position: relative;
    z-index: 2;
    min-width: 0;
}
.fu-kpi__label {
    font-size: var(--fu-text-xs);
    font-weight: var(--fu-weight-semibold);
    letter-spacing: .25px;
    text-transform: uppercase;
}
.fu-kpi__value {
    font-size: 2rem;
    font-weight: var(--fu-weight-bold);
    line-height: 1.1;
    letter-spacing: -.02em;
}
.fu-kpi__sub {
    margin-top: var(--fu-space-2);
    font-size: var(--fu-text-xs);
}
a.fu-kpi:hover,
a.fu-kpi:focus {
    text-decoration: none;
}
.fu-kpi:hover {
    transform: translateY(-2px);
}
a.fu-kpi:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}

/* solid: fundo no solido do status, texto branco (>= 4,5:1) */
.fu-kpi--solid {
    flex-direction: column;
    min-height: 132px;
    padding: 14px 18px;
    border-radius: var(--fu-radius-md);
    color: var(--fu-text-inverse);
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
}
.fu-kpi--solid:hover { box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }
.fu-kpi--solid,
a.fu-kpi--solid:hover,
a.fu-kpi--solid:focus { color: var(--fu-text-inverse); }
.fu-kpi--solid.fu-kpi--primary { background: var(--fu-primary-strong); }
.fu-kpi--solid.fu-kpi--success { background: var(--fu-success); }
.fu-kpi--solid.fu-kpi--warning { background: var(--fu-warning); }
.fu-kpi--solid.fu-kpi--recovering { background: var(--fu-recovering); }
.fu-kpi--solid.fu-kpi--danger  { background: var(--fu-danger); }
.fu-kpi--solid.fu-kpi--info    { background: var(--fu-info); }
.fu-kpi--solid.fu-kpi--neutral { background: var(--fu-neutral-700); }
/* Sem opacidade no texto: branco a .9 sobre o warning dava 4,28:1 (o branco puro da 4,89:1). */
.fu-kpi--solid .fu-kpi__label { margin-bottom: var(--fu-space-2); }
.fu-kpi--solid .fu-kpi__sub { max-width: 72%; }
.fu-kpi--solid .fu-kpi__icon {
    position: absolute;
    right: -8px;
    bottom: -6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    pointer-events: none;
    transition: transform var(--fu-motion-base) var(--fu-motion-easing);
}
.fu-kpi--solid .fu-kpi__icon i {
    font-size: 4.4rem;
    line-height: 1;
    color: rgba(0, 0, 0, .18);
}
.fu-kpi--solid:hover .fu-kpi__icon { transform: scale(1.06); }
.fu-kpi--solid.is-active {
    outline: 3px solid rgba(255, 255, 255, .85);
    outline-offset: -6px;
}

/* light: cartao branco, barra lateral e icone na cor do status */
.fu-kpi--light {
    align-items: center;
    gap: 14px;
    min-height: 124px;
    padding: var(--fu-space-5);
    background: var(--fu-surface);
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-lg);
    box-shadow: var(--fu-shadow-sm);
    color: var(--fu-text);
}
.fu-kpi--light:hover { box-shadow: var(--fu-shadow-md); }
.fu-kpi--light::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--fu-primary);
}
.fu-kpi--light .fu-kpi__icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--fu-radius-lg);
    font-size: 20px;
    background: var(--fu-primary-50);
    color: var(--fu-primary-700);
}
.fu-kpi--light .fu-kpi__label { margin-bottom: var(--fu-space-1); color: var(--fu-text-muted); }
.fu-kpi--light .fu-kpi__value { color: var(--fu-text); font-size: 1.7rem; }
.fu-kpi--light .fu-kpi__sub { color: var(--fu-text-muted); }
.fu-kpi--light.fu-kpi--success::before { background: var(--fu-success); }
.fu-kpi--light.fu-kpi--warning::before { background: var(--fu-warning); }
.fu-kpi--light.fu-kpi--recovering::before { background: var(--fu-recovering-accent); }
.fu-kpi--light.fu-kpi--danger::before  { background: var(--fu-danger); }
.fu-kpi--light.fu-kpi--info::before    { background: var(--fu-info); }
.fu-kpi--light.fu-kpi--neutral::before { background: var(--fu-border-strong); }
.fu-kpi--light.fu-kpi--success .fu-kpi__icon { background: var(--fu-success-bg); color: var(--fu-success-fg); }
.fu-kpi--light.fu-kpi--warning .fu-kpi__icon { background: var(--fu-warning-bg); color: var(--fu-warning-fg); }
.fu-kpi--light.fu-kpi--recovering .fu-kpi__icon { background: var(--fu-recovering-bg); color: var(--fu-recovering-fg); }
.fu-kpi--light.fu-kpi--danger .fu-kpi__icon  { background: var(--fu-danger-bg);  color: var(--fu-danger-fg); }
.fu-kpi--light.fu-kpi--info .fu-kpi__icon    { background: var(--fu-info-bg);    color: var(--fu-info-fg); }
.fu-kpi--light.fu-kpi--neutral .fu-kpi__icon { background: var(--fu-neutral-100); color: var(--fu-neutral-800); }
.fu-kpi--light.is-active { border-color: var(--fu-primary); }

/* --------------------------------------------------------------------------
   Carrossel  <x-falker::carousel>
   -------------------------------------------------------------------------- */
.fu-carousel__track {
    padding-bottom: var(--fu-space-6);
}
/* Com setas, o conteudo abre espaco para elas em vez de ficar por baixo. */
.fu-carousel__track--controls .carousel-inner {
    padding: 0 40px;
}
.fu-carousel__row {
    flex-wrap: nowrap;
}
.fu-carousel__indicators {
    bottom: 0;
    margin-bottom: 0;
}
.fu-carousel__indicators li {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border: 0;
    border-radius: var(--fu-radius-pill);
    background-color: var(--fu-border-strong);
    opacity: 1;
    text-indent: -999px;
    cursor: pointer;
}
.fu-carousel__indicators li.active {
    width: 20px;
    background-color: var(--fu-primary);
}
.fu-carousel__control {
    width: 36px;
    color: var(--fu-text-muted);
}
.fu-carousel__control:hover,
.fu-carousel__control:focus {
    color: var(--fu-primary-text);
}
.fu-carousel__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: var(--fu-space-3) var(--fu-space-4);
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-md);
    background: var(--fu-surface);
    color: var(--fu-text-muted);
    font-weight: var(--fu-weight-medium);
    text-decoration: none !important;
}
.fu-carousel__link i {
    color: var(--fu-primary-text);
    font-size: 18px;
}
/* Empilhado: icone em cima, num quadrado claro da primaria, e o texto centralizado. */
.fu-carousel--stacked .fu-carousel__link {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    text-align: center;
}
.fu-carousel--stacked .fu-carousel__link i {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--fu-radius-md);
    background: var(--fu-primary-50);
    font-size: 20px;
}
.fu-carousel__link:hover,
.fu-carousel__link:focus-visible {
    border-color: rgba(var(--fu-primary-rgb), .35);
    color: var(--fu-primary-text);
}
@media (prefers-reduced-motion: reduce) {
    .fu-carousel .carousel-item {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Secao  <x-falker::panel-section>
   Mesmas medidas do .panel-section do Water
   -------------------------------------------------------------------------- */
.fu-section {
    margin-bottom: var(--fu-space-4);
    padding: var(--fu-space-3);
    background: var(--fu-surface);
    border-radius: var(--fu-radius-lg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.fu-section.fu-section--outlined {
    border: 1px solid var(--fu-border);
    border-top: 3px solid var(--fu-primary);
    box-shadow: none;
}
.fu-section--outlined.fu-section--secondary { border-top-color: var(--fu-border-strong); }
.fu-section--outlined.fu-section--info      { border-top-color: var(--fu-info); }
.fu-section--outlined.fu-section--success   { border-top-color: var(--fu-success); }
.fu-section--outlined.fu-section--warning   { border-top-color: var(--fu-warning); }
.fu-section--outlined.fu-section--recovering { border-top-color: var(--fu-recovering-accent); }
.fu-section--outlined.fu-section--danger    { border-top-color: var(--fu-danger); }
.fu-section__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fu-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--fu-space-3);
}
.fu-section__titles {
    min-width: 0;
}
.fu-section__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: var(--fu-weight-bold);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--fu-primary-ink);
}
.fu-section .fu-section__title {
    margin: 4px 0;
    font-size: var(--fu-text-md);
    font-weight: var(--fu-weight-semibold);
    color: var(--fu-text);
}
.fu-section__description {
    margin: 0;
    font-size: var(--fu-text-sm);
    color: var(--fu-text-muted);
}
.fu-section__actions {
    display: flex;
    align-items: center;
    gap: var(--fu-space-3);
    flex-wrap: wrap;
    font-size: var(--fu-text-sm);
    color: var(--fu-text-muted);
}
.fu-section__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--fu-radius-lg);
    background: var(--fu-primary-50);
    color: var(--fu-primary-700);
    font-size: 18px;
}
.fu-section__footer {
    margin-top: var(--fu-space-3);
    padding-top: var(--fu-space-3);
    border-top: 1px solid var(--fu-border);
    font-size: var(--fu-text-sm);
    color: var(--fu-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .fu-link-list__item:hover,
    .welcome-action-link:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Trilha  <x-falker::breadcrumbs>
   Seletores com .fu-breadcrumbs na frente: o CSS do app carrega depois e o
   .breadcrumb do Remark/Bootstrap (fundo cinza, barra "/") nao pode vencer.
   -------------------------------------------------------------------------- */
.fu-breadcrumbs .fu-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 0 var(--fu-space-4);
    padding: 0;
    list-style: none;
    background: transparent;
    border-radius: 0;
    font-size: var(--fu-text-sm);
}
/* Sobre mapa ou imagem: a trilha transparente sumia contra o satelite. */
.fu-breadcrumbs--on-media .fu-breadcrumbs__list {
    width: fit-content;
    max-width: 100%;
    padding: 6px 12px;
    background: var(--fu-surface);
    border-radius: var(--fu-radius-md);
    box-shadow: var(--fu-shadow-sm);
}
.fu-breadcrumbs .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    padding: 0;
    color: var(--fu-text-muted);
}
.fu-breadcrumbs .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}
/* Separador: chevron desenhado em CSS, sem texto para o leitor de tela ler */
.fu-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: "";
    float: none;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 8px 0 4px;
    padding: 0;
    border-top: 1.5px solid var(--fu-neutral-500);
    border-right: 1.5px solid var(--fu-neutral-500);
    transform: rotate(45deg);
}
.fu-breadcrumbs a,
.fu-breadcrumbs__text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: var(--fu-radius-xs);
    color: var(--fu-text-muted);
    text-decoration: none;
    transition: background-color var(--fu-motion-fast) var(--fu-motion-easing), color var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-breadcrumbs a:hover {
    background: var(--fu-primary-50);
    color: var(--fu-primary-700);
    text-decoration: none;
}
.fu-breadcrumbs a:focus-visible,
.fu-breadcrumbs__toggle:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}
.fu-breadcrumbs__home a {
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
}
/* Ancestral sem link: como o link, sem hover; trunca como o atual. */
.fu-breadcrumbs__text {
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fu-breadcrumbs__current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 40ch;
    padding: 4px 10px;
    overflow: hidden;
    border-radius: var(--fu-radius-pill);
    background: var(--fu-primary-50);
    color: var(--fu-primary-700);
    font-weight: var(--fu-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fu-breadcrumbs__details {
    position: relative;
}
.fu-breadcrumbs__toggle {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: var(--fu-radius-xs);
    color: var(--fu-text-muted);
    font-weight: var(--fu-weight-bold);
    list-style: none;
    cursor: pointer;
}
.fu-breadcrumbs__toggle::-webkit-details-marker {
    display: none;
}
.fu-breadcrumbs__toggle:hover,
.fu-breadcrumbs__details[open] > .fu-breadcrumbs__toggle {
    background: var(--fu-primary-50);
    color: var(--fu-primary-700);
}
.fu-breadcrumbs__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--fu-z-dropdown);
    min-width: 200px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--fu-surface);
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-md);
    box-shadow: var(--fu-shadow-overlay);
}
.fu-breadcrumbs__menu a,
.fu-breadcrumbs__menu .fu-breadcrumbs__text {
    display: flex;
    max-width: none;
    padding: 6px 10px;
    border-radius: var(--fu-radius-xs);
    background: transparent;
    color: var(--fu-text);
    font-weight: var(--fu-weight-regular);
}

/* --------------------------------------------------------------------------
   Detalhe rotulo/valor  <x-falker::detail-list> <x-falker::detail-item>
   -------------------------------------------------------------------------- */
.fu-details {
    display: grid;
    gap: var(--fu-space-4) var(--fu-space-6);
    margin: 0;
}
.fu-details--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fu-details--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fu-details__item {
    min-width: 0;
}
.fu-details .fu-details__label {
    margin: 0 0 2px;
    font-size: var(--fu-text-xs);
    font-weight: var(--fu-weight-semibold);
    letter-spacing: .02em;
    color: var(--fu-text-muted);
}
.fu-details .fu-details__value {
    margin: 0;
    color: var(--fu-text);
    overflow-wrap: anywhere;
}
.fu-details__empty {
    color: var(--fu-text-subtle);
}

/* --------------------------------------------------------------------------
   Switch  <x-falker::switch>
   O checkbox fica invisivel mas focavel; o trilho mostra o estado e o foco.
   -------------------------------------------------------------------------- */
.fu-switch {
    position: relative;
    display: inline-block;
}
.fu-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.fu-switch__label {
    display: inline-flex;
    align-items: center;
    gap: var(--fu-space-2);
    min-height: 24px;
    margin: 0;
    color: var(--fu-text);
    font-weight: var(--fu-weight-medium);
    cursor: pointer;
}
.fu-switch__track {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    border-radius: var(--fu-radius-pill);
    background: var(--fu-neutral-500);
    transition: background-color var(--fu-motion-fast) var(--fu-motion-easing), box-shadow var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fu-surface);
    box-shadow: var(--fu-shadow-sm);
    transition: transform var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-switch__input:checked + .fu-switch__label .fu-switch__track {
    background: var(--fu-primary-strong);
}
.fu-switch__input:checked + .fu-switch__label .fu-switch__thumb {
    transform: translateX(16px);
}
.fu-switch__input:focus-visible + .fu-switch__label .fu-switch__track {
    box-shadow: var(--fu-focus-ring);
}
.fu-switch.is-disabled .fu-switch__label {
    cursor: not-allowed;
    opacity: .55;
}
.fu-switch__description {
    display: block;
    margin: 2px 0 0 44px;
    font-size: var(--fu-text-xs);
    color: var(--fu-text-muted);
}

/* --------------------------------------------------------------------------
   Controle segmentado  <x-falker::segmented>
   -------------------------------------------------------------------------- */
.fu-segmented {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.fu-segmented .fu-segmented__legend {
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    font-size: var(--fu-text-sm);
    font-weight: var(--fu-weight-medium);
    color: var(--fu-text);
}
/* Grupo de switches <x-falker::switch-group> */
.fu-switch-group {
    min-width: 0;
    margin: 0 0 var(--fu-space-3);
    padding: 0;
    border: 0;
}
.fu-switch-group__legend {
    width: auto;
    margin-bottom: var(--fu-space-2);
    color: var(--fu-text);
    font-size: var(--fu-text-sm);
    font-weight: var(--fu-weight-semibold);
}
.fu-switch-group__options {
    display: flex;
    flex-direction: column;
    gap: var(--fu-space-2);
}
.fu-switch-group--inline .fu-switch-group__options {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--fu-space-2) var(--fu-space-6);
}
.fu-segmented__options {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    background: var(--fu-neutral-100);
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-sm);
}
.fu-segmented--nowrap .fu-segmented__options {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
}
.fu-segmented--nowrap .fu-segmented__option { white-space: nowrap; }
.fu-segmented__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.fu-segmented__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0;
    padding: 6px 14px;
    border-radius: 6px;
    color: var(--fu-text-muted);
    font-weight: var(--fu-weight-medium);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--fu-motion-fast) var(--fu-motion-easing), color var(--fu-motion-fast) var(--fu-motion-easing), box-shadow var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-segmented__option:hover {
    color: var(--fu-text);
}
.fu-segmented__input:checked + .fu-segmented__option {
    background: var(--fu-surface);
    color: var(--fu-primary-ink);
    box-shadow: var(--fu-shadow-sm);
}
.fu-segmented__input:focus-visible + .fu-segmented__option {
    box-shadow: var(--fu-focus-ring);
}
/* Opcao travada ('disabled'): apagada e sem hover; o title da opcao explica o motivo */
.fu-segmented__input:disabled + .fu-segmented__option {
    opacity: .45;
    cursor: not-allowed;
}
.fu-segmented__input:disabled + .fu-segmented__option:hover {
    color: inherit;
}
.fu-segmented--sm .fu-segmented__option {
    min-height: 28px;
    padding: 4px 10px;
    font-size: var(--fu-text-sm);
}

/* --------------------------------------------------------------------------
   Grupo de campos  <x-falker::fieldset>  e grade  .fu-grid
   -------------------------------------------------------------------------- */
.fu-fieldset {
    min-width: 0;
    margin: 0 0 var(--fu-space-5);
    padding: var(--fu-space-4) var(--fu-space-5) var(--fu-space-1);
    background: var(--fu-canvas);
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-lg);
}
/* float tira a legend da borda do fieldset e a poe dentro da caixa */
.fu-fieldset .fu-fieldset__legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--fu-space-3);
    padding: 0;
    font-size: var(--fu-text-xs);
    font-weight: var(--fu-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fu-text-muted);
}
.fu-fieldset__description {
    clear: both;
    margin: calc(var(--fu-space-1) * -1) 0 var(--fu-space-3);
    font-size: var(--fu-text-sm);
    color: var(--fu-text-muted);
}
.fu-grid {
    display: grid;
    clear: both;
    gap: 0 var(--fu-space-4);
}
.fu-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fu-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   Barra de filtros  <x-falker::filter-bar>
   Botoes alinhados a base dos campos (sem <label>&nbsp;</label> espacador).
   -------------------------------------------------------------------------- */
.fu-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--fu-space-3) var(--fu-space-4);
    margin-bottom: var(--fu-space-4);
}
.fu-filter-bar__fields {
    display: grid;
    flex: 1 1 480px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--fu-space-3) var(--fu-space-4);
    min-width: 0;
}
.fu-filter-bar__fields .form-group,
.fu-filter-bar__fields .fu-segmented,
.fu-filter-bar__fields .fu-switch {
    margin-bottom: 0;
}
.fu-filter-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fu-space-2);
}

/* --------------------------------------------------------------------------
   Barra de acoes do formulario  <x-falker::form-actions>
   -------------------------------------------------------------------------- */
.fu-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fu-space-3);
    margin-top: var(--fu-space-5);
    padding-top: var(--fu-space-4);
    border-top: 1px solid var(--fu-border);
}
.fu-form-actions__start,
.fu-form-actions__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fu-space-2);
}
.fu-form-actions__end {
    margin-left: auto;
}
.fu-form-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: var(--fu-z-sticky);
    padding: var(--fu-space-3) var(--fu-space-4);
    background: var(--fu-surface);
    box-shadow: 0 -6px 16px rgba(11, 12, 11, .06);
}
.fu-form-actions__start:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   Dica  <x-falker::help-tip>
   Abre no hover e no foco; a ponte (::before) mantem aberta com o mouse indo do
   botao ate a dica (WCAG 1.4.13). .is-dismissed e posto pelo Esc do falker-ui.js.
   -------------------------------------------------------------------------- */
.fu-help-tip {
    position: relative;
    display: inline-flex;
    margin-left: 4px;
    vertical-align: middle;
}
.fu-help-tip__button {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fu-info);
    font-size: 14px;
    line-height: 1;
    cursor: help;
}
.fu-help-tip__button:hover {
    color: var(--fu-info-fg);
}
.fu-help-tip__button:focus {
    outline: none;
}
.fu-help-tip__button:focus-visible {
    box-shadow: var(--fu-focus-ring);
}
.fu-help-tip__bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: var(--fu-z-popover);
    width: max-content;
    max-width: 260px;
    padding: 8px 10px;
    border-radius: var(--fu-radius-sm);
    background: var(--fu-neutral-900);
    box-shadow: var(--fu-shadow-overlay);
    color: var(--fu-text-inverse);
    font-size: var(--fu-text-xs);
    font-weight: var(--fu-weight-regular);
    line-height: var(--fu-leading-snug);
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity var(--fu-motion-fast) var(--fu-motion-easing), visibility var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-help-tip__bubble::before {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 10px;
}
.fu-help-tip__bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: var(--fu-neutral-900);
}
.fu-help-tip--bottom .fu-help-tip__bubble {
    top: calc(100% + 8px);
    bottom: auto;
}
.fu-help-tip--bottom .fu-help-tip__bubble::before {
    top: auto;
    bottom: 100%;
}
.fu-help-tip--bottom .fu-help-tip__bubble::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--fu-neutral-900);
}
.fu-help-tip:hover .fu-help-tip__bubble,
.fu-help-tip__button:focus + .fu-help-tip__bubble {
    opacity: 1;
    visibility: visible;
}
.fu-help-tip.is-dismissed .fu-help-tip__bubble {
    opacity: 0;
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Progresso  <x-falker::progress>
   -------------------------------------------------------------------------- */
.fu-progress {
    width: 100%;
}
.fu-progress__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fu-space-3);
    margin-bottom: var(--fu-space-1);
    font-size: var(--fu-text-sm);
    color: var(--fu-text);
}
.fu-progress__value {
    color: var(--fu-text-muted);
    font-variant-numeric: tabular-nums;
}
.fu-progress__track {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: var(--fu-radius-pill);
    background: var(--fu-neutral-100);
}
.fu-progress--sm .fu-progress__track {
    height: 6px;
}
.fu-progress__bar {
    height: 100%;
    border-radius: inherit;
    background: var(--fu-primary-strong);
    transition: width var(--fu-motion-base) var(--fu-motion-easing);
}
.fu-progress--success .fu-progress__bar { background: var(--fu-success); }
.fu-progress--warning .fu-progress__bar { background: var(--fu-warning); }
.fu-progress--recovering .fu-progress__bar { background: var(--fu-recovering-accent); }
.fu-progress--danger  .fu-progress__bar { background: var(--fu-danger); }
.fu-progress--info    .fu-progress__bar { background: var(--fu-info); }
.fu-progress--indeterminate .fu-progress__bar {
    width: 35%;
    animation: fu-progress-slide 1.4s ease-in-out infinite;
}
@keyframes fu-progress-slide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(300%); }
}

/* --------------------------------------------------------------------------
   Avatar  <x-falker::avatar>
   -------------------------------------------------------------------------- */
.fu-avatar {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fu-primary-50);
    color: var(--fu-primary-700);
    font-size: 13px;
    font-weight: var(--fu-weight-semibold);
    line-height: 1;
    user-select: none;
}
.fu-avatar--sm { width: 26px; height: 26px; font-size: 11px; }
.fu-avatar--lg { width: 48px; height: 48px; font-size: var(--fu-text-md); }
.fu-avatar.is-selected {
    background: var(--fu-primary-strong);
    color: var(--fu-text-inverse);
}

/* --------------------------------------------------------------------------
   Lista selecionavel  <x-falker::select-list>
   A coluna do cascade-picker do FalkerMap, como listbox. O item escolhido tem
   fundo, avatar invertido E o check (a cor nao e o unico sinal, D17); o item
   ativo do teclado ganha o contorno so quando a lista tem o foco.
   -------------------------------------------------------------------------- */
.fu-select-list {
    min-width: 0;
}
.fu-select-list__label {
    margin-bottom: var(--fu-space-2);
    color: var(--fu-text);
    font-size: var(--fu-text-sm);
    font-weight: var(--fu-weight-semibold);
}
.fu-select-list__search {
    position: relative;
    margin-bottom: var(--fu-space-2);
}
.fu-select-list__search > i {
    position: absolute;
    top: 50%;
    left: 11px;
    transform: translateY(-50%);
    color: var(--fu-text-subtle);
    font-size: var(--fu-text-xs);
    pointer-events: none;
}
.fu-select-list .fu-select-list__search-input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--fu-border-strong);
    border-radius: var(--fu-radius-md);
    background: var(--fu-surface);
    color: var(--fu-text);
    font-size: var(--fu-text-sm);
    transition: border-color var(--fu-motion-fast), box-shadow var(--fu-motion-fast);
}
.fu-select-list .fu-select-list__search-input:focus,
.fu-select-list .fu-select-list__list:focus {
    outline: none;
    border-color: var(--fu-primary);
    box-shadow: var(--fu-focus-ring);
}
.fu-select-list .fu-select-list__list {
    max-height: 208px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-md);
    background: var(--fu-surface);
    list-style: none;
}
.fu-select-list__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--fu-border);
    color: var(--fu-text);
    font-size: var(--fu-text-sm);
    cursor: pointer;
    transition: background var(--fu-motion-fast);
}
.fu-select-list__option:last-child { border-bottom: 0; }
.fu-select-list__option:hover { background: var(--fu-canvas); }
.fu-select-list__option[aria-selected="true"] {
    background: var(--fu-primary-50);
    font-weight: var(--fu-weight-medium);
}
.fu-select-list__option[aria-selected="true"] .fu-avatar {
    background: var(--fu-primary-strong);
    color: var(--fu-text-inverse);
}
.fu-select-list__list:focus .fu-select-list__option.is-active {
    outline: 2px solid var(--fu-primary);
    outline-offset: -2px;
}
.fu-select-list__name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.fu-select-list__check {
    visibility: hidden;
    color: var(--fu-primary-700);
    font-size: var(--fu-text-xs);
}
.fu-select-list__option[aria-selected="true"] .fu-select-list__check { visibility: visible; }
.fu-select-list__empty,
.fu-select-list__placeholder {
    margin: 0;
    padding: 26px 14px;
    border: 1px dashed var(--fu-border-strong);
    border-radius: var(--fu-radius-md);
    background: var(--fu-surface);
    color: var(--fu-text-muted);
    font-size: var(--fu-text-sm);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Abas  <x-falker::tabs> <x-falker::tab-pane>
   Sublinhado na aba ativa. Seletores longos: o .nav-tabs do Remark carrega
   depois e nao pode vencer.
   -------------------------------------------------------------------------- */
.fu-tabs .fu-tabs__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--fu-space-1);
    margin: 0 0 var(--fu-space-4);
    padding: 0;
    overflow-x: auto;
    /* overflow-x: auto poe o y em auto tambem: o -1px do .nav-item do Bootstrap e o da aba
       passavam 2px da lista e aparecia uma barra de rolagem vertical ao lado das abas */
    overflow-y: hidden;
    border-bottom: 1px solid var(--fu-border);
    scrollbar-width: thin;
}
.fu-tabs .fu-tabs__list .nav-item {
    margin-bottom: 0;
}
.fu-tabs .fu-tabs__list .nav-link.fu-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--fu-text-muted);
    font-weight: var(--fu-weight-medium);
    white-space: nowrap;
    transition: color var(--fu-motion-fast) var(--fu-motion-easing), border-color var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-tabs .fu-tabs__list .nav-link.fu-tabs__tab:hover {
    border-bottom-color: var(--fu-border-strong);
    color: var(--fu-text);
}
.fu-tabs .fu-tabs__list .nav-link.fu-tabs__tab.active {
    border-bottom-color: var(--fu-primary-ink);
    background: transparent;
    color: var(--fu-primary-ink);
}
.fu-tabs .fu-tabs__list .nav-link.fu-tabs__tab:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
    border-radius: var(--fu-radius-xs) var(--fu-radius-xs) 0 0;
}
.fu-tabs__panel:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
    border-radius: var(--fu-radius-sm);
}

/* --------------------------------------------------------------------------
   Estado vazio  <x-falker::empty-state>
   -------------------------------------------------------------------------- */
.fu-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fu-space-2);
    padding: var(--fu-space-10) var(--fu-space-4);
    text-align: center;
    color: var(--fu-text-muted);
}
.fu-empty__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--fu-space-2);
    border-radius: 50%;
    background: var(--fu-primary-50);
    color: var(--fu-primary-700);
    font-size: 22px;
}
.fu-empty .fu-empty__title {
    margin: 0;
    font-size: var(--fu-text-md);
    font-weight: var(--fu-weight-semibold);
    color: var(--fu-text);
}
.fu-empty .fu-empty__description {
    max-width: 46ch;
    margin: 0;
    font-size: var(--fu-text-sm);
    color: var(--fu-text-muted);
}
.fu-empty .fu-empty__description a {
    color: var(--fu-primary-ink);
    text-decoration: underline;
}
.fu-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--fu-space-2);
    margin-top: var(--fu-space-3);
}
.fu-empty--compact {
    padding: var(--fu-space-5) var(--fu-space-3);
}
.fu-empty--compact .fu-empty__icon {
    width: 40px;
    height: 40px;
    font-size: var(--fu-text-md);
}

/* --------------------------------------------------------------------------
   Carregando  <x-falker::spinner>
   -------------------------------------------------------------------------- */
.fu-spinner {
    display: inline-flex;
    align-items: center;
    gap: var(--fu-space-2);
    color: var(--fu-primary-ink);
    vertical-align: middle;
}
.fu-spinner__circle {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(var(--fu-primary-rgb), .2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: fu-spin .8s linear infinite;
}
.fu-spinner--sm .fu-spinner__circle { width: 16px; height: 16px; border-width: 2px; }
.fu-spinner--lg .fu-spinner__circle { width: 40px; height: 40px; border-width: 4px; }
.fu-spinner__label {
    color: var(--fu-text-muted);
    font-size: var(--fu-text-sm);
}
.fu-loader-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: rgba(255, 255, 255, .72);
}
@keyframes fu-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Telas estreitas e movimento reduzido dos componentes acima
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .fu-details--cols-2,
    .fu-details--cols-3,
    .fu-grid--cols-2,
    .fu-grid--cols-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 575.98px) {
    /* Botoes empilhados: o grupo da direita (acao principal por ultimo no HTML)
       sobe e se inverte, para a principal ficar no topo; o da esquerda mantem a
       ordem (Voltar, Cancelar). */
    .fu-form-actions,
    .fu-form-actions__end {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .fu-form-actions__start {
        flex-direction: column;
        align-items: stretch;
    }
    .fu-form-actions__end {
        margin-left: 0;
    }
    .fu-form-actions .btn {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .fu-spinner__circle {
        animation-duration: 2.4s;
    }
    .fu-progress--indeterminate .fu-progress__bar {
        width: 100%;
        opacity: .45;
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Tabela de dados  <x-falker::data-table>
   Filetes por padrao, zebra clara opcional (derivada da zebra da marca).
   Seletores com .fu-table-wrap na frente: o .table do Remark carrega depois.
   -------------------------------------------------------------------------- */
.fu-table-wrap {
    margin-bottom: var(--fu-space-4);
    overflow: hidden;
    background: var(--fu-surface);
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-lg);
}
.fu-table-scroll {
    overflow: auto;
}
.fu-table-scroll:focus-visible {
    outline: none;
    box-shadow: inset var(--fu-focus-ring);
}
.fu-table-wrap .fu-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    color: var(--fu-text);
    font-size: var(--fu-text-sm);
}
.fu-table-wrap .fu-table__caption {
    caption-side: top;
    padding: var(--fu-space-3) 14px 0;
    color: var(--fu-text);
    font-size: var(--fu-text-md);
    font-weight: var(--fu-weight-semibold);
    text-align: left;
}
.fu-table-wrap .fu-table th,
.fu-table-wrap .fu-table td {
    padding: 10px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--fu-border);
    vertical-align: middle;
}
.fu-table-wrap .fu-table thead th {
    background: var(--fu-neutral-50);
    border-bottom: 1px solid var(--fu-border-strong);
    color: var(--fu-text-muted);
    font-size: var(--fu-text-xs);
    font-weight: var(--fu-weight-semibold);
    letter-spacing: .02em;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
}
.fu-table-wrap .fu-table tbody tr:last-child td {
    border-bottom: 0;
}
.fu-table-wrap .fu-table tfoot td,
.fu-table-wrap .fu-table tfoot th {
    background: var(--fu-neutral-50);
    border-top: 1px solid var(--fu-border-strong);
    border-bottom: 0;
    font-weight: var(--fu-weight-semibold);
}
.fu-table-wrap .fu-table--striped tbody tr:nth-child(even) td {
    background: var(--fu-neutral-50);
}
.fu-table-wrap .fu-table--hover tbody tr:hover td {
    background: rgba(var(--fu-primary-rgb), .05);
}
.fu-table-wrap .fu-table--dense th,
.fu-table-wrap .fu-table--dense td {
    padding: 6px 10px;
}
.fu-table-wrap .fu-table--sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.fu-table-wrap .fu-num,
.fu-table-wrap .fu-table th.fu-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
/* Ordenacao do DataTables (sem o CSS dele): seta discreta, cabecalho focavel */
.fu-table-wrap .fu-table thead th.sorting,
.fu-table-wrap .fu-table thead th.sorting_asc,
.fu-table-wrap .fu-table thead th.sorting_desc,
.fu-table-wrap .fu-table thead th.dt-orderable-asc,
.fu-table-wrap .fu-table thead th.dt-orderable-desc {
    position: relative;
    padding-right: 28px;
    cursor: pointer;
}
/* Coluna centralizada: o mesmo respiro da seta a esquerda mantem o titulo no centro. */
.fu-table-wrap .fu-table thead th.text-center.sorting,
.fu-table-wrap .fu-table thead th.text-center.sorting_asc,
.fu-table-wrap .fu-table thead th.text-center.sorting_desc,
.fu-table-wrap .fu-table thead th.text-center.dt-orderable-asc,
.fu-table-wrap .fu-table thead th.text-center.dt-orderable-desc {
    padding-left: 28px;
}
.fu-table-wrap .fu-table thead th.sorting::after,
.fu-table-wrap .fu-table thead th.sorting_asc::after,
.fu-table-wrap .fu-table thead th.sorting_desc::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 0;
    height: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 5px solid var(--fu-neutral-400);
    transform: translateY(-50%);
}
.fu-table-wrap .fu-table thead th.sorting_asc::after {
    border-top: 0;
    border-bottom: 5px solid var(--fu-primary-strong);
}
.fu-table-wrap .fu-table thead th.sorting_desc::after {
    border-top-color: var(--fu-primary-ink);
}
.fu-table-wrap .fu-table thead th.sorting_asc,
.fu-table-wrap .fu-table thead th.sorting_desc {
    color: var(--fu-text);
}
.fu-table-wrap .fu-table thead th:focus-visible {
    outline: none;
    box-shadow: inset var(--fu-focus-ring);
}
.fu-table-wrap .fu-table td.dataTables_empty {
    padding: var(--fu-space-8) var(--fu-space-4);
    color: var(--fu-text-muted);
    text-align: center;
}
.fu-table-wrap > .fu-empty {
    border-top: 0;
}

/* --------------------------------------------------------------------------
   Barra da tabela  <x-falker::table-toolbar>
   -------------------------------------------------------------------------- */
.fu-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fu-space-3);
    padding: var(--fu-space-3) 14px;
    border-bottom: 1px solid var(--fu-border);
}
.fu-table-toolbar__form {
    display: flex;
    flex: 1 1 320px;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fu-space-3);
    margin: 0;
}
.fu-table-toolbar__search {
    position: relative;
    flex: 1 1 220px;
    max-width: 360px;
    margin-left: auto;
}
.fu-table-toolbar__search i {
    position: absolute;
    top: 50%;
    left: 12px;
    color: var(--fu-neutral-500);
    font-size: 13px;
    transform: translateY(-50%);
    pointer-events: none;
}
.fu-table-toolbar .fu-table-toolbar__search .form-control {
    height: 36px;
    padding-left: 34px;
    border-color: var(--fu-border-strong);
    border-radius: var(--fu-radius-sm);
    font-size: var(--fu-text-sm);
}
.fu-table-toolbar .form-control::placeholder {
    color: var(--fu-text-subtle);
    opacity: 1;
}
.fu-table-toolbar .form-control:focus {
    border-color: var(--fu-primary);
    box-shadow: var(--fu-focus-ring);
}
.fu-table-toolbar__length {
    display: flex;
    align-items: center;
    gap: var(--fu-space-2);
    color: var(--fu-text-muted);
    font-size: var(--fu-text-sm);
}
.fu-table-toolbar__length label {
    margin: 0;
    white-space: nowrap;
}
.fu-table-toolbar .fu-table-toolbar__length .form-control {
    width: auto;
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    border-color: var(--fu-border-strong);
    border-radius: var(--fu-radius-sm);
    font-size: var(--fu-text-sm);
}
.fu-table-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fu-space-2);
    margin-left: auto;
}
.fu-table-toolbar__actions:empty {
    display: none;
}
.fu-table-export {
    display: inline-flex;
}

/* --------------------------------------------------------------------------
   Paginacao  <x-falker::pagination>  (e a do DataTables, desenhada pelo JS)
   -------------------------------------------------------------------------- */
.fu-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fu-space-3);
    margin: var(--fu-space-3) 0;
}
.fu-table-wrap > .fu-pagination,
.fu-table-wrap > nav.fu-pagination {
    margin: 0;
    padding: var(--fu-space-3) 14px;
    border-top: 1px solid var(--fu-border);
}
.fu-pagination[hidden] {
    display: none;
}
.fu-pagination .fu-pagination__info {
    margin: 0;
    color: var(--fu-text-muted);
    font-size: var(--fu-text-sm);
    font-variant-numeric: tabular-nums;
}
.fu-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fu-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.fu-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: var(--fu-surface);
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-sm);
    color: var(--fu-text);
    font-family: inherit;
    font-size: var(--fu-text-sm);
    font-weight: var(--fu-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fu-motion-fast) var(--fu-motion-easing), border-color var(--fu-motion-fast) var(--fu-motion-easing);
}
a.fu-pagination__link:hover,
button.fu-pagination__link:hover:not(:disabled):not([aria-current="page"]) {
    background: var(--fu-canvas);
    border-color: var(--fu-border-strong);
    color: var(--fu-text);
    text-decoration: none;
}
.fu-pagination__link[aria-current="page"],
.fu-pagination__link[aria-current="page"]:hover {
    background: var(--fu-primary-strong);
    border-color: var(--fu-primary-strong);
    color: var(--fu-text-inverse);
}
.fu-pagination__link[aria-disabled="true"],
.fu-pagination__link:disabled {
    color: var(--fu-text-subtle);
    background: var(--fu-surface);
    cursor: default;
    opacity: .6;
}
.fu-pagination__link:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}
.fu-pagination__ellipsis {
    display: inline-block;
    min-width: 20px;
    color: var(--fu-text-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Acoes da linha  <x-falker::row-actions>
   -------------------------------------------------------------------------- */
.fu-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.fu-row-actions__form {
    display: inline-flex;
    margin: 0;
}
.fu-row-actions__btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fu-radius-sm);
    color: var(--fu-neutral-600);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fu-motion-fast) var(--fu-motion-easing), color var(--fu-motion-fast) var(--fu-motion-easing), border-color var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-row-actions__btn:hover {
    background: var(--fu-canvas);
    border-color: var(--fu-border);
    color: var(--fu-primary-ink);
    text-decoration: none;
}
/* O .table a do Remark (bootstrap-extend) sublinha todo link de tabela. */
.table a.fu-row-actions__btn,
.table a.fu-row-actions__btn:hover,
.table a.fu-row-actions__btn:focus {
    text-decoration: none;
}
.fu-row-actions__btn.is-danger:hover {
    background: var(--fu-danger-bg);
    border-color: rgba(var(--fu-danger-rgb), .2);
    color: var(--fu-danger);
}
.fu-row-actions__btn:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}

/* --------------------------------------------------------------------------
   Dialogo de confirmacao  FalkerUi.confirm()  — SweetAlert2 e bootstrap-sweetalert
   Resolve a P09: o #DD6B55 que as views passam em confirmButtonColor vira o token.
   O !important e para vencer o style inline que as duas bibliotecas poem.
   -------------------------------------------------------------------------- */
.swal2-popup {
    border-radius: var(--fu-radius-md) !important;
    font-family: var(--fu-font) !important;
}
.swal2-popup .swal2-title {
    padding-bottom: 0;
    border: 0;
    color: var(--fu-text);
    font-size: var(--fu-text-lg);
    font-weight: var(--fu-weight-semibold);
}
.swal2-popup .swal2-html-container {
    color: var(--fu-text-muted);
    font-size: var(--fu-text-base);
}
.swal2-popup .swal2-actions {
    gap: var(--fu-space-2);
}
.swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--fu-primary-strong) !important;
    border-radius: var(--fu-radius-sm);
}
.swal2-popup .swal2-styled.swal2-cancel {
    background-color: var(--fu-surface) !important;
    border: 1px solid var(--fu-border) !important;
    border-radius: var(--fu-radius-sm);
    color: var(--fu-text) !important;
}
.swal2-popup .swal2-styled:focus,
.swal2-popup .fu-btn:focus {
    box-shadow: var(--fu-focus-ring) !important;
}
.swal2-popup .swal2-icon.swal2-warning {
    border-color: var(--fu-warning);
    color: var(--fu-warning);
}
.sweet-alert {
    border-radius: var(--fu-radius-md) !important;
    box-shadow: var(--fu-shadow-lg);
    font-family: var(--fu-font) !important;
}
.sweet-alert h2 {
    padding-bottom: 0 !important;
    border: 0 !important;
    color: var(--fu-text) !important;
    font-size: var(--fu-text-lg) !important;
    font-weight: var(--fu-weight-semibold) !important;
}
.sweet-alert p {
    color: var(--fu-text-muted) !important;
    font-size: var(--fu-text-base) !important;
}
.sweet-alert button {
    border-radius: var(--fu-radius-sm) !important;
    font-size: var(--fu-text-base) !important;
    font-weight: var(--fu-weight-medium) !important;
    box-shadow: none !important;
}
.sweet-alert button:focus {
    box-shadow: var(--fu-focus-ring) !important;
}
.sweet-alert button.confirm {
    background-color: var(--fu-primary-strong) !important;
    border-color: var(--fu-primary-strong) !important;
    color: var(--fu-text-inverse) !important;
}
/* Alerta de aviso (type: "warning") e acao destrutiva: botao no vermelho do token */
.sweet-alert .sa-icon.sa-warning[style*="block"] ~ .sa-button-container button.confirm,
.sweet-alert .sa-icon.sa-warning[style*="block"] ~ button.confirm,
.sweet-alert button.confirm.btn-danger {
    background-color: var(--fu-danger) !important;
    border-color: var(--fu-danger) !important;
}
.sweet-alert button.cancel {
    background-color: var(--fu-surface) !important;
    border: 1px solid var(--fu-border) !important;
    color: var(--fu-text) !important;
}
.sweet-alert .sa-icon.sa-warning {
    border-color: var(--fu-warning) !important;
}
.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot {
    background-color: var(--fu-warning) !important;
}

/* --------------------------------------------------------------------------
   Toast  FalkerUi.toast()  — toastr e a regiao propria (sem toastr)
   Fundo no solido do status: texto branco >= 4,5:1.
   Abre no canto superior direito, abaixo do header: --fu-toast-top (padrao 72px, a altura da
   barra do Remark + respiro) deixa o app acertar o espaco se o header dele for de outra altura.
   -------------------------------------------------------------------------- */
#toast-container.toast-top-right { top: var(--fu-toast-top, 72px); right: var(--fu-space-4); }
#toast-container > .toast {
    border-radius: var(--fu-radius-sm);
    box-shadow: var(--fu-shadow-overlay);
    font-family: var(--fu-font);
    font-size: var(--fu-text-sm);
    opacity: 1;
}
#toast-container > .toast:hover {
    box-shadow: var(--fu-shadow-lg);
}
#toast-container > .toast-success { background-color: var(--fu-success); }
#toast-container > .toast-error   { background-color: var(--fu-danger); }
#toast-container > .toast-warning { background-color: var(--fu-warning); }
#toast-container > .toast-info    { background-color: var(--fu-info); }
#toast-container .toast-close-button {
    color: var(--fu-text-inverse);
    opacity: .9;
    text-shadow: none;
}
.fu-toasts {
    position: fixed;
    top: var(--fu-toast-top, 72px);
    right: var(--fu-space-4);
    z-index: var(--fu-z-toast);
    display: flex;
    flex-direction: column-reverse; /* o mais novo em cima, sem mudar a ordem no DOM (leitor de tela) */
    gap: var(--fu-space-2);
    width: min(360px, calc(100vw - 32px));
}
.fu-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 10px 12px 14px;
    border-radius: var(--fu-radius-sm);
    box-shadow: var(--fu-shadow-overlay);
    color: var(--fu-text-inverse);
    font-size: var(--fu-text-sm);
    line-height: var(--fu-leading-snug);
}
.fu-toast--success { background: var(--fu-success); }
.fu-toast--danger  { background: var(--fu-danger); }
.fu-toast--warning { background: var(--fu-warning); }
.fu-toast--info    { background: var(--fu-info); }
.fu-toast__icon {
    flex: none;
    margin-top: 1px;
    font-size: 16px;
}
.fu-toast__body {
    flex: 1;
    min-width: 0;
}
.fu-toast__title {
    display: block;
}
.fu-toast__close {
    flex: none;
    width: 28px;
    height: 28px;
    margin: -4px 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--fu-radius-xs);
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.fu-toast__close:focus-visible {
    outline: 2px solid var(--fu-text-inverse);
    outline-offset: 1px;
}

@media (max-width: 575.98px) {
    .fu-pagination__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .fu-table-toolbar__actions {
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   Legenda  <x-falker::legend>  (mapa e grafico)
   -------------------------------------------------------------------------- */
.fu-legend {
    color: var(--fu-text-muted);
    font-size: var(--fu-text-sm);
}
.fu-legend .fu-legend__title {
    margin: 0 0 6px;
    color: var(--fu-text);
    font-size: var(--fu-text-sm);
    font-weight: var(--fu-weight-semibold);
}
.fu-legend__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fu-legend--vertical .fu-legend__list {
    flex-direction: column;
    gap: 6px;
}
.fu-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.fu-legend__swatch {
    flex: none;
    width: 11px;
    height: 11px;
    background: var(--fu-neutral-500);
}
.fu-legend__swatch--dot    { border-radius: 50%; }
.fu-legend__swatch--square { width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(11, 12, 11, .12); }
.fu-legend__swatch--line   { width: 16px; height: 3px; border-radius: 2px; }
/* Faixa (o min-max sombreado do grafico): a cor a 30%, sem perder a cor do item. */
.fu-legend__swatch--band   { width: 22px; height: 12px; border-radius: 2px; opacity: .3; }
.fu-legend__swatch--custom { background: var(--fu-legend-color, var(--fu-neutral-500)); }
.fu-legend__swatch--success { background: var(--fu-success); }
.fu-legend__swatch--danger  { background: var(--fu-danger); }
.fu-legend__swatch--warning { background: var(--fu-warning); }
.fu-legend__swatch--recovering { background: var(--fu-recovering-accent); }
.fu-legend__swatch--info    { background: var(--fu-info); }
.fu-legend__swatch--neutral { background: var(--fu-neutral-500); }
.fu-legend__swatch--primary { background: var(--fu-primary); }
.fu-legend__swatch--chart-1 { background: var(--fu-chart-1); }
.fu-legend__swatch--chart-2 { background: var(--fu-chart-2); }
.fu-legend__swatch--chart-3 { background: var(--fu-chart-3); }
.fu-legend__swatch--chart-4 { background: var(--fu-chart-4); }
.fu-legend__swatch--chart-5 { background: var(--fu-chart-5); }
.fu-legend__swatch--chart-6 { background: var(--fu-chart-6); }
.fu-legend__swatch--chart-7 { background: var(--fu-chart-7); }
.fu-legend__swatch--chart-8 { background: var(--fu-chart-8); }
.fu-legend__swatch--seq-1 { background: var(--fu-chart-seq-1); }
.fu-legend__swatch--seq-2 { background: var(--fu-chart-seq-2); }
.fu-legend__swatch--seq-3 { background: var(--fu-chart-seq-3); }
.fu-legend__swatch--seq-4 { background: var(--fu-chart-seq-4); }
.fu-legend__swatch--seq-5 { background: var(--fu-chart-seq-5); }
.fu-legend__icon {
    width: 14px;
    color: var(--fu-text-muted);
    text-align: center;
}
.fu-legend--floating {
    padding: 10px 12px;
    color: var(--fu-text);
}
/* Recolhivel: o titulo e o <summary>, com a seta no fim. */
.fu-legend--collapsible > .fu-legend__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fu-space-2);
    margin: 0;
    cursor: pointer;
    list-style: none;
}
.fu-legend--collapsible > .fu-legend__toggle::-webkit-details-marker { display: none; }
.fu-legend--collapsible > .fu-legend__toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-legend--collapsible:not([open]) > .fu-legend__toggle::after { transform: rotate(-45deg); }
.fu-legend--collapsible[open] > .fu-legend__toggle { margin-bottom: 6px; }
.fu-legend--collapsible > .fu-legend__toggle:focus-visible {
    outline: none;
    border-radius: var(--fu-radius-xs);
    box-shadow: var(--fu-focus-ring);
}

/* --------------------------------------------------------------------------
   Pino de mapa  FalkerUi.mapPin() / leafletIcon()  e shape "pin" da legenda
   A cor e a do status (currentColor); aneis por variavel, sem estilo inline.
   -------------------------------------------------------------------------- */
.fu-map-pin-host {
    background: transparent;
    border: 0;
}
.fu-map-pin {
    position: relative;
    display: inline-block;
    flex: none;
    width: 28px;
    height: 36px;
    color: var(--fu-primary);
}
.fu-map-pin__head {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    background: currentColor;
    border: 2px solid var(--fu-surface);
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 0 0 3px var(--fu-pin-ring1, transparent), 0 0 0 6px var(--fu-pin-ring2, transparent), 0 2px 6px rgba(11, 12, 11, .28);
    transform: rotate(-45deg);
}
.fu-map-pin__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    color: var(--fu-text-inverse);
    font-size: 12px;
    line-height: 28px;
    text-align: center;
}
.fu-map-pin__badge {
    position: absolute;
    top: -7px;
    right: -9px;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--fu-surface);
    box-shadow: var(--fu-shadow-sm);
    color: var(--fu-info);
    font-size: 9px;
}
.fu-map-pin--success { color: var(--fu-success); }
.fu-map-pin--danger  { color: var(--fu-danger); }
.fu-map-pin--warning { color: var(--fu-warning); }
.fu-map-pin--recovering { color: var(--fu-recovering-accent); }
.fu-map-pin--info    { color: var(--fu-info); }
.fu-map-pin--neutral { color: var(--fu-neutral-500); }
.fu-map-pin--primary { color: var(--fu-primary); }
.fu-map-pin--ring1-success { --fu-pin-ring1: var(--fu-success); }
.fu-map-pin--ring1-danger  { --fu-pin-ring1: var(--fu-danger); }
.fu-map-pin--ring1-warning { --fu-pin-ring1: var(--fu-warning); }
.fu-map-pin--ring1-recovering { --fu-pin-ring1: var(--fu-recovering-accent); }
.fu-map-pin--ring1-info    { --fu-pin-ring1: var(--fu-info); }
.fu-map-pin--ring1-neutral { --fu-pin-ring1: var(--fu-neutral-500); }
.fu-map-pin--ring1-primary { --fu-pin-ring1: var(--fu-primary); }
.fu-map-pin--ring2-success { --fu-pin-ring2: var(--fu-success); }
.fu-map-pin--ring2-danger  { --fu-pin-ring2: var(--fu-danger); }
.fu-map-pin--ring2-warning { --fu-pin-ring2: var(--fu-warning); }
.fu-map-pin--ring2-recovering { --fu-pin-ring2: var(--fu-recovering-accent); }
.fu-map-pin--ring2-info    { --fu-pin-ring2: var(--fu-info); }
.fu-map-pin--ring2-neutral { --fu-pin-ring2: var(--fu-neutral-500); }
.fu-map-pin--ring2-primary { --fu-pin-ring2: var(--fu-primary); }
.fu-map-pin--sm {
    width: 14px;
    height: 18px;
}
.fu-map-pin--sm .fu-map-pin__head {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
    box-shadow: 0 1px 3px rgba(11, 12, 11, .25);
}
.fu-map-pin--sm .fu-map-pin__icon {
    display: none;
}

/* --------------------------------------------------------------------------
   Mapa  <x-falker::map-card>, cartao flutuante e botao sobre o mapa
   -------------------------------------------------------------------------- */
.fu-map-card__stage {
    position: relative;
}
.fu-map {
    width: 100%;
    overflow: hidden;
    border-radius: var(--fu-radius-md);
    background: var(--fu-neutral-100);
}
.fu-map--sm { height: 280px; }
.fu-map--md { height: 420px; }
.fu-map--lg { height: 560px; }
.fu-map:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring);
}
.fu-map-card__layers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fu-space-3) var(--fu-space-6);
    margin-top: var(--fu-space-3);
}
.fu-map-float {
    background: var(--fu-surface);
    border-radius: var(--fu-radius-lg);
    box-shadow: var(--fu-shadow-overlay);
    padding: 12px 14px;
}
.fu-map-float--top-left,
.fu-map-float--top-right,
.fu-map-float--bottom-left,
.fu-map-float--bottom-right {
    position: absolute;
    z-index: 800;
    max-width: calc(100% - 24px);
}
.fu-map-float--top-left     { top: 12px; left: 12px; }
.fu-map-float--top-right    { top: 12px; right: 12px; }
.fu-map-float--bottom-left  { bottom: 24px; left: 12px; }
.fu-map-float--bottom-right { bottom: 24px; right: 12px; }
.fu-map-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--fu-surface);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--fu-shadow-overlay);
    color: var(--fu-text-muted);
    font-size: 15px;
    cursor: pointer;
    transition: color var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-map-btn:hover {
    color: var(--fu-primary-ink);
}
/* O botao que e link (3D, imprimir) sem o sublinhado do a:hover. */
a.fu-map-btn:hover,
a.fu-map-btn:focus {
    text-decoration: none;
}
.fu-map-btn:focus-visible {
    outline: none;
    box-shadow: var(--fu-focus-ring), var(--fu-shadow-overlay);
}
.fu-map-btn:disabled {
    cursor: default;
    opacity: .45;
}
@media (pointer: coarse) {
    .fu-map-btn {
        width: 44px;
        height: 44px;
    }
}

/* Coluna de botoes redondos sobre o mapa (centralizar, 3D, imprimir), como controle do Leaflet. */
.fu-map-btn-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--fu-space-2);
}
.fu-map-btn-stack .fu-map-btn { color: var(--fu-text); }
.fu-map-btn-stack .fu-map-btn:hover,
.fu-map-btn-stack .fu-map-btn:focus-visible {
    background: var(--fu-primary-50);
    color: var(--fu-primary-ink);
}

/* Barra de ferramentas sobre o mapa: grupos com titulo em versalete, divisores e um valor em
   destaque. Rola na horizontal em vez de quebrar; no celular vira coluna, fora do mapa. */
.fu-map-toolbar {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px 12px;
    max-width: 100%;
    padding: 10px 16px;
    overflow-x: auto;
    border-radius: var(--fu-radius-sm);
    background: var(--fu-surface);
    box-shadow: var(--fu-shadow-overlay);
    color: var(--fu-text);
}
.fu-map-toolbar__group {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.fu-map-toolbar__title {
    color: var(--fu-primary-text);
    font-size: 11px;
    font-weight: var(--fu-weight-semibold);
    letter-spacing: .03em;
    text-transform: uppercase;
}
.fu-map-toolbar__stat {
    color: var(--fu-primary-text);
    font-size: 18px;
    font-weight: var(--fu-weight-bold);
    font-variant-numeric: tabular-nums;
}
.fu-map-toolbar__divider {
    flex: none;
    align-self: stretch;
    width: 1px;
    min-height: 30px;
    background: var(--fu-border);
}
.fu-map-toolbar .fu-switch__text { white-space: nowrap; }
@media (max-width: 767.98px) {
    .fu-map-toolbar__divider { display: none; }
}
@media (max-width: 575.98px) {
    .fu-map-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Tela de mapa  <x-falker::map-stack> <x-falker::map-float-card> FalkerUi.mapPage
   O mapa ocupa a pagina inteira (a altura e medida pelo JS, ate o rodape) e os cartoes flutuam
   em pilhas a esquerda e a direita; --fu-map-chrome-top desconta a trilha, que fica por cima. */
.fu-map-page {
    position: relative;
    overflow: hidden;
    min-height: 420px;
}
.fu-map-page__map {
    position: absolute;
    inset: 0;
    /* contexto proprio: os panes do Leaflet (ate 1000) nao passam por cima dos cartoes */
    z-index: 0;
}
.fu-map-stack {
    position: absolute;
    top: var(--fu-map-chrome-top, 12px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(50% - 24px);
}
.fu-map-stack--left { left: 12px; align-items: flex-start; }
.fu-map-stack--right { right: 12px; align-items: flex-end; }
.fu-map-stack > .fu-map-float { position: static; max-width: 100%; }
.fu-map-float-card { max-height: calc(100vh - 220px); overflow-y: auto; }
.fu-map-float-card__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}
.fu-map-float-card__summary::-webkit-details-marker { display: none; }
.fu-map-float-card[open] > .fu-map-float-card__summary { margin-bottom: 12px; }
.fu-map-float-card__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--fu-text);
    font-size: var(--fu-text-base, 14px);
    font-weight: var(--fu-weight-semibold);
    line-height: var(--fu-leading-snug, 1.3);
}
.fu-map-float-card__heading--lg { font-size: 20px; }
.fu-map-float-card__toggle {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--fu-text-muted);
    font-size: 12px;
}
.fu-map-float-card__summary:hover .fu-map-float-card__toggle {
    background: var(--fu-neutral-100);
    color: var(--fu-text);
}
.fu-map-float-card__summary:focus-visible {
    outline: none;
    border-radius: var(--fu-radius-sm);
    box-shadow: var(--fu-focus-ring);
}
.fu-map-float-card[open] > summary .fu-map-float-card__toggle .fa-plus,
.fu-map-float-card:not([open]) > summary .fu-map-float-card__toggle .fa-minus { display: none; }
.fu-map-float-card__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
@media (max-width: 767.98px) {
    .fu-map-stack { max-width: calc(100% - 24px); }
    /* em cima fica o cartao principal; a pilha da direita desce para o canto de baixo */
    .fu-map-stack--right { top: auto; bottom: 24px; }
    .fu-map-float-card { max-height: 55vh; }
}

/* Origem -> acao -> destino  <x-falker::transfer> */
.fu-transfer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--fu-space-4);
    align-items: start;
}
.fu-transfer__action { align-self: center; }
@media (max-width: 991.98px) {
    .fu-transfer { grid-template-columns: minmax(0, 1fr); }
    .fu-transfer__action { justify-self: center; }
    /* empilhado, a seta aponta para o destino, embaixo */
    .fu-transfer__action .fa-arrow-right { transform: rotate(90deg); }
}

/* Cartao de escolha  <x-falker::pick-card> */
.fu-pick-card {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-md);
    background-color: var(--fu-surface);
}
.fu-pick-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin-bottom: 6px;
}
.fu-pick-card__title {
    flex: 1;
    margin: 0;
    color: var(--fu-text);
    font-size: var(--fu-text-md, 15px);
    font-weight: var(--fu-weight-semibold);
}
.fu-pick-card__icon { color: var(--fu-primary-ink); }
.fu-pick-card__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--fu-pick-color, var(--fu-neutral-500));
}
.fu-pick-card__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 10px;
}
.fu-pick-card .form-group { margin-bottom: 10px; }
.fu-pick-card label {
    margin-bottom: 2px;
    color: var(--fu-text-muted);
    font-size: var(--fu-text-xs);
}
.fu-pick-card__remove {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--fu-radius-sm);
    background: transparent;
    color: var(--fu-text-muted);
}
.fu-pick-card__remove:hover { background-color: var(--fu-neutral-100); color: var(--fu-danger); }
.fu-pick-card__remove:focus-visible { outline: none; box-shadow: var(--fu-focus-ring); }

/* Tabela de rotulo/valor  .fu-kv-table  (dados do trabalho e da medicao): moldura, filetes,
   zebra opcional e a linha de titulo na primaria forte (o branco passa 4,5:1 nela). */
.fu-kv-table {
    width: 100%;
    margin-bottom: var(--fu-space-4);
    border: 1px solid var(--fu-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--fu-radius-md);
    overflow: hidden;
    background-color: var(--fu-surface);
    color: var(--fu-text);
}
.fu-kv-table th,
.fu-kv-table td {
    padding: 6px 12px;
    border-top: 0;
    border-bottom: 1px solid var(--fu-border);
}
.fu-kv-table tr:last-child > th,
.fu-kv-table tr:last-child > td { border-bottom: 0; }
.fu-kv-table th[scope="row"] { color: var(--fu-text-muted); font-weight: var(--fu-weight-medium); }
.fu-kv-table--striped tbody tr:nth-child(even) > * { background-color: var(--fu-neutral-50); }
.fu-kv-table .fu-kv-table__title,
.fu-kv-table .fu-kv-table__title > * {
    background-color: var(--fu-primary-strong);
    color: var(--fu-on-primary);
    font-weight: var(--fu-weight-semibold);
}

/* Passo a passo de um intervalo  <x-falker::range-stepper>  (play, -, controle, +) */
.fu-range-stepper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fu-range-stepper__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.fu-range-stepper__head > label { margin: 0; font-weight: var(--fu-weight-semibold); }
.fu-range-stepper__value { color: var(--fu-text-muted); font-variant-numeric: tabular-nums; }
.fu-range-stepper__controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fu-range-stepper__input { flex: 1; min-width: 0; margin: 0 4px; accent-color: var(--fu-primary); }
.fu-range-stepper__btn {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--fu-border-strong);
    border-radius: var(--fu-radius-sm);
    background: var(--fu-surface);
    color: var(--fu-text);
    cursor: pointer;
}
.fu-range-stepper__btn:hover { border-color: var(--fu-primary); color: var(--fu-primary-text); }
.fu-range-stepper__btn:focus-visible { outline: none; box-shadow: var(--fu-focus-ring); }
.fu-range-stepper__btn:disabled { cursor: default; opacity: .4; }
.fu-range-stepper__btn[aria-pressed="true"] {
    border-color: var(--fu-primary);
    background: var(--fu-primary);
    color: var(--fu-on-primary);
}

/* Skin do Leaflet (.fu-leaflet no container do mapa) */
.fu-leaflet.leaflet-container {
    font-family: var(--fu-font);
    font-size: var(--fu-text-sm);
}
.fu-leaflet .leaflet-popup-content-wrapper {
    border-radius: var(--fu-radius-md);
    box-shadow: var(--fu-shadow-overlay);
    color: var(--fu-text);
}
.fu-leaflet .leaflet-popup-content {
    margin: 12px 14px;
    line-height: var(--fu-leading-snug);
}
.fu-leaflet .leaflet-popup-tip {
    box-shadow: none;
}
.fu-leaflet .leaflet-bar,
.fu-leaflet .leaflet-control-layers {
    overflow: hidden;
    border: 0;
    border-radius: var(--fu-radius-sm);
    box-shadow: var(--fu-shadow-overlay);
}
.fu-leaflet .leaflet-bar a {
    width: 36px;
    height: 36px;
    border-bottom-color: var(--fu-border);
    color: var(--fu-text);
    line-height: 36px;
}
.fu-leaflet .leaflet-bar a:hover {
    background: var(--fu-canvas);
    color: var(--fu-primary-ink);
}
.fu-leaflet .leaflet-bar a:focus-visible,
.fu-leaflet .leaflet-control-layers-toggle:focus-visible {
    outline: none;
    box-shadow: inset var(--fu-focus-ring);
}
.fu-leaflet .leaflet-control-attribution {
    background: rgba(255, 255, 255, .85);
    color: var(--fu-text-muted);
    font-size: 11px;
}

/* --------------------------------------------------------------------------
   Envio de arquivo  <x-falker::dropzone>
   O <input type="file"> cobre a area (opacity 0): clicar e soltar sao nativos.
   -------------------------------------------------------------------------- */
.fu-dropzone__area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 150px;
    padding: var(--fu-space-5) var(--fu-space-4);
    background: var(--fu-canvas);
    border: 2px dashed var(--fu-border-strong);
    border-radius: var(--fu-radius-lg);
    text-align: center;
    transition: border-color var(--fu-motion-fast) var(--fu-motion-easing), background-color var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-dropzone__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.fu-dropzone__area:hover,
.fu-dropzone__area.is-dragover {
    background: var(--fu-primary-50);
    border-color: var(--fu-primary);
}
.fu-dropzone__area:focus-within {
    border-color: var(--fu-primary);
    box-shadow: var(--fu-focus-ring);
}
.fu-field--invalid .fu-dropzone__area {
    border-color: var(--fu-danger);
}
.fu-dropzone__prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fu-space-2);
    color: var(--fu-text-muted);
}
/* primary-700, nao primary-strong: a area e canvas, e o primary-strong do Leaf
   sobre o canvas da 4,49:1. */
.fu-dropzone__prompt i {
    color: var(--fu-primary-700);
    font-size: 28px;
}
.fu-dropzone__prompt strong {
    color: var(--fu-primary-700);
}
.fu-dropzone .fu-dropzone__hint {
    margin: 0;
    color: var(--fu-text-muted);
    font-size: var(--fu-text-xs);
}
.fu-dropzone__preview {
    display: flex;
    align-items: center;
    gap: var(--fu-space-3);
    margin-top: var(--fu-space-3);
}
.fu-dropzone__preview[hidden] { display: none; }
.fu-dropzone__image {
    max-width: 160px;
    height: 88px;
    object-fit: contain;
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-sm);
    background: var(--fu-surface);
}
.fu-dropzone__files {
    display: flex;
    flex-direction: column;
    gap: var(--fu-space-1);
    width: 100%;
    max-width: 420px;
    margin: var(--fu-space-2) 0 0;
    padding: 0;
    list-style: none;
}
.fu-dropzone__files:empty {
    display: none;
}
.fu-dropzone__file {
    display: flex;
    align-items: center;
    gap: var(--fu-space-2);
    padding: 6px 10px;
    background: var(--fu-surface);
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-sm);
    color: var(--fu-text);
    font-size: var(--fu-text-sm);
    text-align: left;
}
.fu-dropzone__file i {
    color: var(--fu-text-muted);
}
.fu-dropzone__file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fu-dropzone__file-size {
    color: var(--fu-text-muted);
    font-variant-numeric: tabular-nums;
}
.fu-dropzone__file.is-invalid {
    border-color: var(--fu-danger);
    color: var(--fu-danger-fg);
}
.fu-dropzone__file.is-invalid i {
    color: var(--fu-danger);
}

@media (max-width: 767.98px) {
    .fu-map--md { height: 320px; }
    .fu-map--lg { height: 420px; }
}

/* --------------------------------------------------------------------------
   Arvore de dados  <x-falker::treeview>  (jstree do app, D30)
   A selecao e um preenchimento retangular da linha inteira (plugin wholerow),
   na cor da barra de busca (D31):
   o tema do jstree ja deixa o <a> transparente sobre a linha, entao raio e
   sombra ficam de fora, ou o rotulo reaparece como uma pilula sobre a linha.
   O icone fu-icon fica numa caixa de 24px (a linha do tema) com o desenho em
   16px de altura; na selecao fica branco pelo currentColor, sem variantes
   _white de SVG. A seta de abrir/recolher e um chevron do Font Awesome (abaixo).
   -------------------------------------------------------------------------- */
/* O Remark da 22px de respiro ao primeiro .page-aside-section; a arvore e o primeiro e o
   cabecalho dela (busca) precisa ficar no topo, alinhado com o "Inicio" do menu
   (--fu-aside-head-height). */
.page-aside-section.fu-tree:first-child { padding-top: 0; }
.fu-tree .fu-tree__options {
    box-sizing: border-box;
    min-height: var(--fu-aside-head-height);
    display: flex;
    flex-direction: column;
    gap: var(--fu-space-2);
    padding: var(--fu-space-3);
    background: var(--fu-secondary);
}
.fu-tree .fu-tree__search {
    margin: 0;
}
.fu-tree .fu-tree__search .input-search {
    position: relative;
    width: 100%;
    margin: 0;
}
.fu-tree .fu-tree__search .input-search-btn {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--fu-radius-md) 0 0 var(--fu-radius-md);
    background: transparent;
    color: var(--fu-text-subtle);
    font-size: var(--fu-text-xs);
}
.fu-tree .fu-tree__search .form-control {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--fu-border-strong);
    border-radius: var(--fu-radius-md);
    background: var(--fu-surface);
    color: var(--fu-text);
    font-size: var(--fu-text-sm);
}
.fu-tree .fu-tree__search .form-control:focus {
    outline: none;
    border-color: var(--fu-primary);
    box-shadow: 0 0 0 2px var(--fu-surface), 0 0 0 4px var(--fu-text);
}
.fu-tree .fu-tree__expand {
    display: flex;
    justify-content: flex-end;
    gap: var(--fu-space-1);
    padding: 0;
}
.fu-tree .fu-tree__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--fu-radius-sm);
    background: var(--fu-surface);
    color: var(--fu-text-muted);
    font-size: var(--fu-text-xs);
    line-height: 1;
    cursor: pointer;
    transition: color var(--fu-motion-fast), box-shadow var(--fu-motion-fast);
}
.fu-tree .fu-tree__toggle:hover {
    color: var(--fu-primary-text);
}
.fu-tree .fu-tree__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--fu-surface), 0 0 0 4px var(--fu-text);
}
.fu-tree .fu-tree__tree {
    overflow-x: auto;
    padding: 0 0 var(--fu-space-2);
}
.fu-tree .fu-tree__tree > .jstree-container-ul {
    padding-left: var(--fu-space-2);
}
.fu-tree .fu-tree__message {
    margin: 0;
    padding: var(--fu-space-3) var(--fu-space-4);
    color: var(--fu-text-muted);
    font-size: var(--fu-text-sm);
}
.fu-tree .jstree-default .jstree-anchor {
    color: var(--fu-text);
}
.fu-tree .jstree-default .jstree-hovered,
.fu-tree .jstree-default .jstree-clicked {
    border-radius: 0;
    box-shadow: none;
}
.fu-tree .jstree-default .jstree-wholerow-hovered {
    background: var(--fu-primary-50);
}
/* No azul da barra de busca (D31), com ou sem o mouse em cima. */
.fu-tree .jstree-default .jstree-wholerow-clicked,
.fu-tree .jstree-default .jstree-wholerow-clicked.jstree-wholerow-hovered {
    background: var(--fu-secondary);
}
.fu-tree .jstree-default .jstree-clicked {
    color: var(--fu-text-inverse);
}
.fu-tree .jstree-default .jstree-anchor:focus-visible {
    outline: 2px solid var(--fu-text);
    outline-offset: -2px;
}
.fu-tree .jstree-default .jstree-search {
    color: inherit;
    font-style: normal;
    font-weight: var(--fu-weight-bold);
    text-decoration: underline;
}
/* color: inherit vence o `.jstree-default .jstree-hovered .jstree-themeicon-custom
   { color: #76838f }` do jstree.min.css do Remark, que os cinco apps servem: sem ele o
   icone ficava cinza no hover, inclusive no no selecionado, em vez de seguir o texto. */
.fu-tree .jstree-default .jstree-themeicon.fu-icon {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 4px 0;
    vertical-align: top;
    color: inherit;
    background-color: currentColor;
    -webkit-mask-origin: content-box;
    mask-origin: content-box;
}
/* Abrir/recolher: o sprite do jstree (32px.png) desenhava o "fechado" como um triangulo vazado
   cinza-claro de ~6px, que mal aparecia no claro e sumia no escuro. Vira o chevron do Font Awesome
   (que os apps ja servem), na cor da marca, girado 90 graus no aberto e branco na linha escolhida.
   O no carregando fica de fora: o throbber do tema continua. */
.fu-tree .jstree-default .jstree-closed:not(.jstree-loading) > .jstree-ocl,
.fu-tree .jstree-default .jstree-open > .jstree-ocl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    color: var(--fu-primary-ink);
    cursor: pointer;
}
.fu-tree .jstree-default .jstree-closed:not(.jstree-loading) > .jstree-ocl::before,
.fu-tree .jstree-default .jstree-open > .jstree-ocl::before {
    content: "\f054";
    font: var(--fa-font-solid);
    font-size: 11px;
    line-height: 1;
    transition: transform .15s ease;
}
.fu-tree .jstree-default .jstree-open > .jstree-ocl::before {
    transform: rotate(90deg);
}
/* !important: os apps pintam o .jstree-icon com !important na cor da marca */
.fu-tree .jstree-default .jstree-wholerow-clicked ~ .jstree-ocl {
    color: var(--fu-text-inverse) !important;
}
@media (prefers-reduced-motion: reduce) {
    .fu-tree .jstree-default .jstree-ocl::before { transition: none; }
}

/* --------------------------------------------------------------------------
   Mensagens da sessao  <x-falker::flash-messages>
   -------------------------------------------------------------------------- */
.fu-flash-messages:empty {
    display: none;
}
.fu-flash-messages__list {
    margin: 0;
    padding-left: var(--fu-space-4);
}

/* --------------------------------------------------------------------------
   Pagina de erro  <x-falker::error-page>
   O tamanho do codigo e do titulo vem do errors.css do Remark, como antes.
   -------------------------------------------------------------------------- */
.fu-error-page__debug {
    max-width: 640px;
    margin: 0 auto var(--fu-space-4);
    padding: var(--fu-space-3);
    border-radius: var(--fu-radius-sm);
    background: var(--fu-surface);
    color: var(--fu-text);
    font-size: var(--fu-text-xs);
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Cabeçalho da coluna lateral: o bloco de busca da árvore (.fu-tree__options) e o "Início" do menu
   (<x-falker::menubar>) têm a mesma altura, e a linha abaixo do Início cai na base do bloco de busca.
   O app não precisa de margem própria para isso. */
:root { --fu-aside-head-height: 98px; }
.fu-menubar .site-menu-item.begin {
    box-sizing: border-box;
    height: var(--fu-aside-head-height);
    margin-bottom: 0 !important;
    padding-top: 8px !important;
}
.fu-menubar .begin-hr {
    width: 40%;
    margin: 0 auto -2px;
    border-top-color: var(--fu-border);
}

/* --------------------------------------------------------------------------
   Grupo de opcoes  <x-falker::choice-group>
   Radio e checkbox usam o radio-custom/checkbox-custom do Remark (D08); o tile e
   proprio: o bloco inteiro e o rotulo, e a borda na primaria marca o escolhido.
   -------------------------------------------------------------------------- */
.fu-choice-group {
    min-width: 0;
    margin-bottom: var(--fu-space-4);
    padding: 0;
    border: 0;
}
.fu-choice-group__legend {
    width: auto;
    margin-bottom: var(--fu-space-2);
    font-size: inherit;
    font-weight: var(--fu-weight-medium);
    color: var(--fu-text);
}
.fu-choice-group__options--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fu-space-2) var(--fu-space-4);
}
.fu-choice-group__options--inline > [class*="-custom"] {
    margin: 0;
}
.fu-choice-group--tiles {
    width: 100%;
}
.fu-choice-group--tiles .fu-choice-group__options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--fu-space-3);
}
.fu-choice-tile {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}
.fu-choice-tile__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}
.fu-choice-tile__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fu-space-2);
    min-height: 100px;
    height: 100%;
    padding: var(--fu-space-3);
    border: 2px solid var(--fu-border);
    border-radius: var(--fu-radius-lg);
    background: var(--fu-surface);
    color: var(--fu-text);
    text-align: center;
    overflow-wrap: anywhere;
    transition: border-color var(--fu-motion-fast) var(--fu-motion-easing), box-shadow var(--fu-motion-fast) var(--fu-motion-easing);
}
.fu-choice-tile__icon {
    font-size: 40px;
    color: var(--fu-primary-text);
}
.fu-choice-tile:hover .fu-choice-tile__body {
    border-color: var(--fu-border-strong);
}
.fu-choice-tile__input:checked + .fu-choice-tile__body {
    border-color: var(--fu-primary);
    background: var(--fu-primary-50);
}
.fu-choice-tile__input:focus-visible + .fu-choice-tile__body {
    box-shadow: var(--fu-focus-ring);
}
.fu-choice-tile__input:disabled + .fu-choice-tile__body {
    cursor: not-allowed;
    opacity: .55;
}
/* Tiles compactos (size="sm"): tres numa coluna estreita (tipo de grafico nas preferencias). */
.fu-choice-group--sm.fu-choice-group--tiles .fu-choice-group__options {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: var(--fu-space-2);
}
.fu-choice-group--sm .fu-choice-tile__body {
    min-height: 0;
    padding: var(--fu-space-2) var(--fu-space-1);
}
.fu-choice-group--sm .fu-choice-tile__icon { font-size: 30px; }
.fu-choice-group--sm .fu-choice-tile__label { font-size: var(--fu-text-xs); }
.fu-choice-group--invalid .fu-choice-tile__body {
    border-color: var(--fu-danger);
}

/* Casca da pagina (<x-falker::app-shell>): a faixa de manutencao. Era #EB672C com texto branco
   (3,2:1) dentro de um .page-main aninhado; agora usa o aviso do pacote. */
.fu-maintenance {
    padding: var(--fu-space-2) var(--fu-space-4);
    background: var(--fu-warning-bg);
    border-bottom: 1px solid var(--fu-warning);
    color: var(--fu-warning-fg);
    font-size: var(--fu-text-sm);
    text-align: center;
}

/* Paleta de cores em faixas (<x-falker::palette-table> e <x-falker::palette-editor>). O quadrado
   leva a cor da faixa (dado do usuario, num style); na tabela de leitura o #rrggbb fica so em sr-only
   (D17), no editor tambem. */
.fu-palette { width: 100%; }
.fu-palette th, .fu-palette td { vertical-align: middle; }
/* Colunas alinhadas a esquerda, como as outras tabelas dos apps (pedido no Leaf, 18/10/2026) */
.fu-palette--table th, .fu-palette--table td,
.fu-palette__table th, .fu-palette__table td { text-align: left; }
.fu-palette .fu-palette__swatch {
    display: inline-block;
    width: 96px;
    height: 28px;
    border: 1px solid var(--fu-border-strong);
    border-radius: var(--fu-radius-xs);
    vertical-align: middle;
}
.fu-palette--table .fu-palette__swatch { display: block; width: 100%; min-width: 96px; height: 32px; margin: 0; }
.fu-palette .fu-palette__table .fu-palette__color { display: block; width: 100%; max-width: 144px; min-width: 96px; height: 38px; margin: 0; }
.fu-palette .fu-palette__color {
    width: 96px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--fu-border-strong);
    border-radius: var(--fu-radius-xs);
    background: var(--fu-surface);
    vertical-align: middle;
    cursor: pointer;
}
.fu-palette .fu-palette__limit { display: block; width: 100%; max-width: 144px; margin: 0; text-align: left; }
.fu-palette .fu-palette__limit[aria-invalid="true"] { border-color: var(--fu-danger); }
.fu-palette .fu-palette__toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--fu-space-3); }

/* Rodape (<x-falker::footer>): no lugar do float e do estilo inline dos apps. */
.fu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fu-space-3);
    padding: var(--fu-space-3) var(--fu-space-5);
    border-top: 1px solid var(--fu-border);
    background: var(--fu-surface);
    color: var(--fu-text-muted);
    font-size: var(--fu-text-sm);
}
.fu-footer a { color: var(--fu-primary-text); }
.fu-footer .fu-footer__logo img { display: block; }
/* Com logo-dark: um logo por esquema (o display: block acima vencia o .fu-logo-dark). */
.fu-footer .fu-footer__logo img.fu-logo-dark { display: none; }
:root[data-fu-scheme="dark"] .fu-footer .fu-footer__logo img.fu-logo-light { display: none; }
:root[data-fu-scheme="dark"] .fu-footer .fu-footer__logo img.fu-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
    :root[data-fu-scheme="auto"] .fu-footer .fu-footer__logo img.fu-logo-light { display: none; }
    :root[data-fu-scheme="auto"] .fu-footer .fu-footer__logo img.fu-logo-dark { display: block; }
}
/* O clearfix do Remark (.site-footer::before/::after, display: table) vira item do flex e, com
   space-between, empurra o logo para o meio em vez de para a direita. */
footer.fu-footer::before, footer.fu-footer::after { content: none !important; display: none !important; }
@media (max-width: 575px) {
    .fu-footer { flex-direction: column; text-align: center; }
}

/* FalkerUi.chart sem linhas: o texto no lugar do grafico (o <div> mantem a altura da view). */
.fu-chart--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fu-text-muted);
    font-size: var(--fu-text-sm);
}

/* Aviso de cookies (<x-falker::cookie-consent>): faixa fixa embaixo, sem tapar o conteudo todo. */
.fu-consent {
    position: fixed;
    right: var(--fu-space-4);
    bottom: var(--fu-space-4);
    left: var(--fu-space-4);
    z-index: var(--fu-z-toast);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fu-space-3);
    max-width: 960px;
    margin: 0 auto;
    padding: var(--fu-space-4);
    background: var(--fu-surface);
    border: 1px solid var(--fu-border-strong);
    border-radius: var(--fu-radius-md);
    box-shadow: var(--fu-shadow-overlay);
    color: var(--fu-text);
    font-size: var(--fu-text-sm);
}
.fu-consent[hidden] { display: none; }
.fu-consent .fu-consent__text { flex: 1 1 320px; margin: 0; }
.fu-consent .fu-consent__text a { color: var(--fu-primary-text); }
.fu-consent .fu-consent__actions { display: flex; flex-wrap: wrap; gap: var(--fu-space-2); }

/* ==========================================================================
   Camada base sobre Bootstrap 4 / Remark (P12)  —  so com <html data-fu-skin>
   Repagina .btn, .form-control, .table, .panel, .modal, .dropdown-menu, .badge e .nav-tabs sem
   mexer no markup, no desenho do FalkerMap (D40). Ligada por config falker-ui.skin: sem o atributo
   nenhuma regra abaixo vale (D24). O seletor [data-fu-skin] soma especificidade (0,2,0): vence o
   Bootstrap mesmo com o pacote carregando ANTES dele, sem !important. O CSS do app carrega depois
   e pode sobrescrever. Foco: contorno solido de 2px na primaria (>= 3:1), nao a sombra de 28%
   dos apps (1,8:1).
   ========================================================================== */
[data-fu-skin] body {
    color: var(--fu-text);
    font-family: var(--fu-font);
    -webkit-font-smoothing: antialiased;
}
/* Links soltos na cor da marca. Os links que sao componentes (acao de linha, botao do mapa,
   carrossel, lista de links, paginacao) tem cor propria: o :where() os tira daqui sem somar
   especificidade, ou o (0,1,1) desta regra vencia o (0,1,0) deles e pintava tudo de primaria. */
[data-fu-skin] a:where(:not(.fu-row-actions__btn):not(.fu-map-btn):not(.fu-carousel__link):not(.fu-carousel__control):not(.fu-link-list__item):not(.fu-pagination__link):not(.fu-kpi)) { color: var(--fu-primary-text); }
[data-fu-skin] a:where(:not(.fu-row-actions__btn):not(.fu-map-btn):not(.fu-carousel__link):not(.fu-carousel__control):not(.fu-link-list__item):not(.fu-pagination__link):not(.fu-kpi)):hover,
[data-fu-skin] a:where(:not(.fu-row-actions__btn):not(.fu-map-btn):not(.fu-carousel__link):not(.fu-carousel__control):not(.fu-link-list__item):not(.fu-pagination__link):not(.fu-kpi)):focus { color: var(--fu-primary-700); }
/* Links sem sublinhado, tambem nas tabelas (o bootstrap-extend do Remark sublinha .table a); a cor
   da marca e o foco visivel os distinguem. Pedido no Leaf (18/10/2026). Os links em que o sublinhado
   e a unica pista (no alerta escuro, que herda a cor do texto, e na descricao do estado vazio) tem
   regra propria, mais especifica, e continuam sublinhados. */
/* Tudo em (0,1,1) pelo :where(): vence o .table a do Remark (mesmo peso, carregado antes) sem passar
   por cima das excecoes (0,2,1). */
[data-fu-skin] a,
[data-fu-skin] a:where(:hover),
[data-fu-skin] a:where(:focus) { text-decoration: none; }
[data-fu-skin] h1, [data-fu-skin] h2, [data-fu-skin] h3, [data-fu-skin] h4, [data-fu-skin] h5, [data-fu-skin] h6 {
    color: var(--fu-text);
    font-weight: var(--fu-weight-semibold);
}
[data-fu-skin] * { scrollbar-width: thin; scrollbar-color: var(--fu-neutral-400) transparent; }

/* Foco visivel em tudo que e interativo */
[data-fu-skin] .btn:focus-visible,
[data-fu-skin] .form-control:focus-visible,
[data-fu-skin] .custom-select:focus-visible,
[data-fu-skin] .dropdown-item:focus-visible,
[data-fu-skin] .nav-tabs .nav-link:focus-visible {
    outline: 2px solid var(--fu-primary);
    outline-offset: 2px;
}

/* Botoes */
[data-fu-skin] .btn {
    padding: 8px 16px;
    border-radius: var(--fu-radius-sm);
    font-weight: var(--fu-weight-medium);
    line-height: var(--fu-leading-snug);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
[data-fu-skin] .btn:focus { box-shadow: none; }
[data-fu-skin] .btn-sm { padding: 5px 12px; font-size: var(--fu-text-sm); }
[data-fu-skin] .btn-lg { padding: 12px 22px; font-size: 16px; }
[data-fu-skin] .btn-xs { padding: 3px 8px; font-size: var(--fu-text-xs); }
/* Botao so com icone: o padding lateral curto do .fu-btn--icon vale tambem com a skin, que
   pintava 16px de cada lado e deixava o botao largo. */
[data-fu-skin] .btn.fu-btn--icon { padding-left: var(--fu-space-2); padding-right: var(--fu-space-2); }
[data-fu-skin] .btn-primary { background-color: var(--fu-primary); border-color: var(--fu-primary); color: var(--fu-on-primary); }
[data-fu-skin] .btn-primary:hover { background-color: var(--fu-primary-600); border-color: var(--fu-primary-600); color: var(--fu-on-primary); }
[data-fu-skin] .btn-default { background-color: var(--fu-surface); border-color: var(--fu-border-strong); color: var(--fu-text); }
[data-fu-skin] .btn-default:hover { background-color: var(--fu-canvas); border-color: var(--fu-primary); color: var(--fu-primary-text); }
[data-fu-skin] .btn-success { background-color: var(--fu-success); border-color: var(--fu-success); color: var(--fu-text-inverse); }
[data-fu-skin] .btn-danger { background-color: var(--fu-danger); border-color: var(--fu-danger); color: var(--fu-text-inverse); }
[data-fu-skin] .btn-warning { background-color: var(--fu-warning); border-color: var(--fu-warning); color: var(--fu-text-inverse); }
/* Desabilitado parece desabilitado (o legado do Water o forcava igual ao ativo) */
[data-fu-skin] .btn.disabled, [data-fu-skin] .btn:disabled, [data-fu-skin] .btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Campos */
[data-fu-skin] .form-control, [data-fu-skin] .custom-select {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--fu-border-strong);
    border-radius: var(--fu-radius-sm);
    background-color: var(--fu-surface);
    color: var(--fu-text);
}
[data-fu-skin] .form-control::placeholder { color: var(--fu-text-subtle); opacity: 1; }
[data-fu-skin] .form-control:focus, [data-fu-skin] .custom-select:focus {
    border-color: var(--fu-primary);
    box-shadow: none;
    outline: 2px solid var(--fu-primary);
    outline-offset: 0;
}
[data-fu-skin] .form-control:disabled, [data-fu-skin] .form-control[readonly] { background-color: var(--fu-canvas); }
[data-fu-skin] textarea.form-control { min-height: 96px; }
/* O select.form-control do Remark desenha a seta no fundo, a direita: o padding de 12px acima
   a deixava por cima do texto (o "25" dos itens por pagina). */
[data-fu-skin] select.form-control:not([size]):not([multiple]),
[data-fu-skin] select.form-control[size="1"],
[data-fu-skin] .custom-select:not([size]):not([multiple]),
[data-fu-skin] .custom-select[size="1"] { padding-right: 30px; }
/* Tamanhos do Bootstrap: sem eles o min-height de 40px valia para o -sm tambem. */
[data-fu-skin] .form-control-sm, [data-fu-skin] .custom-select-sm {
    height: 32px;
    min-height: 32px;
    padding: 4px 8px;
    font-size: var(--fu-text-sm);
}
[data-fu-skin] select.form-control-sm:not([size]):not([multiple]),
[data-fu-skin] .custom-select-sm:not([size]):not([multiple]) { padding-right: 28px; }
[data-fu-skin] .form-control-lg, [data-fu-skin] .custom-select-lg {
    min-height: 48px;
    padding: 10px 16px;
    font-size: 16px;
}
/* Lista (size > 1 ou multiple): sem seta, opcoes com respiro e a marcada na primaria. */
[data-fu-skin] select[multiple],
[data-fu-skin] select[size]:not([size="1"]) {
    height: auto;
    padding: 6px;
    background-image: none;
}
[data-fu-skin] select[multiple] option,
[data-fu-skin] select[size]:not([size="1"]) option {
    padding: 6px 10px;
    border-radius: var(--fu-radius-xs);
}
[data-fu-skin] select[multiple] option:checked,
[data-fu-skin] select[size]:not([size="1"]) option:checked {
    background: var(--fu-primary) linear-gradient(0deg, var(--fu-primary), var(--fu-primary));
    color: var(--fu-on-primary);
}
[data-fu-skin] label { color: var(--fu-text); font-weight: var(--fu-weight-medium); }

/* Tabela base (sem cabecalho colorido, sem padding zerado) */
[data-fu-skin] .table { color: var(--fu-text); }
[data-fu-skin] .table thead th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--fu-border);
    background-color: var(--fu-canvas);
    color: var(--fu-text-muted);
    font-size: var(--fu-text-xs);
    font-weight: var(--fu-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}
[data-fu-skin] .table td { padding: 12px 14px; border-top: 1px solid var(--fu-border); vertical-align: middle; }
[data-fu-skin] .table-hover tbody tr:hover { background-color: var(--fu-canvas); }
[data-fu-skin] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--fu-neutral-50); }

/* Painel: claro; o cabecalho colorido so na variante primary */
[data-fu-skin] .panel {
    border: 0;
    border-radius: var(--fu-radius-panel);
    background-color: var(--fu-surface);
    box-shadow: var(--fu-shadow-sm);
    overflow: hidden;
}
[data-fu-skin] .panel-heading { border-bottom: 1px solid var(--fu-border); background-color: var(--fu-surface); }
[data-fu-skin] .panel-title { color: var(--fu-text); font-weight: var(--fu-weight-semibold); }
[data-fu-skin] .panel-primary > .panel-heading { background-color: var(--fu-primary); border-bottom-color: var(--fu-primary); }
[data-fu-skin] .panel-primary > .panel-heading .panel-title { color: var(--fu-on-primary); }
/* Cabecalho primario em pilula, como no FalkerMap: sem forma, o do Remark era um bloco de 63px
   colado no corpo. */
[data-fu-skin] .panel-primary > .panel-heading {
    margin-bottom: 15px;
    padding: 4px 4px 4px 15px;
    border-radius: var(--fu-radius-panel);
}
[data-fu-skin] .panel-primary > .panel-heading .panel-title {
    margin: 0;
    padding: 10px 20px;
    font-size: 15px;
}
[data-fu-skin] .panel-footer { border-top: 1px solid var(--fu-border); background-color: var(--fu-canvas); }

/* Modal */
[data-fu-skin] .modal-content { border: 0; border-radius: var(--fu-radius-md); box-shadow: var(--fu-shadow-lg); }
[data-fu-skin] .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--fu-border); }
[data-fu-skin] .modal-body { padding: 22px; }
[data-fu-skin] .modal-primary .modal-header { background-color: var(--fu-primary); border-bottom-color: var(--fu-primary); color: var(--fu-on-primary); }
[data-fu-skin] .modal-primary .modal-header .modal-title,
[data-fu-skin] .modal-primary .modal-header .close { color: var(--fu-on-primary); opacity: 1; text-shadow: none; }

/* Dropdown */
[data-fu-skin] .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--fu-border);
    border-radius: var(--fu-radius-sm);
    background-color: var(--fu-surface);
    box-shadow: var(--fu-shadow-md);
}
[data-fu-skin] .dropdown-item { border-radius: var(--fu-radius-xs); color: var(--fu-text); }
[data-fu-skin] .dropdown-item:hover, [data-fu-skin] .dropdown-item:focus { background-color: var(--fu-canvas); color: var(--fu-primary-text); }
[data-fu-skin] .dropdown-divider { border-top-color: var(--fu-border); }

/* Badge e abas (sublinhadas, como o <x-falker::tabs>) */
[data-fu-skin] .badge { padding: .32em .7em; border-radius: var(--fu-radius-pill); font-size: 11.5px; font-weight: var(--fu-weight-semibold); }
[data-fu-skin] .badge-primary { background-color: var(--fu-primary-50); color: var(--fu-primary-700); }
[data-fu-skin] .badge-secondary, [data-fu-skin] .badge-default, [data-fu-skin] .badge-light { background-color: var(--fu-neutral-100); color: var(--fu-neutral-800); }
[data-fu-skin] .badge-dark { background-color: var(--fu-neutral-600); color: var(--fu-text-inverse); }
[data-fu-skin] .badge-success { background-color: var(--fu-success-bg); color: var(--fu-success-fg); }
[data-fu-skin] .badge-danger { background-color: var(--fu-danger-bg); color: var(--fu-danger-fg); }
[data-fu-skin] .badge-warning { background-color: var(--fu-warning-bg); color: var(--fu-warning-fg); }
[data-fu-skin] .badge-info { background-color: var(--fu-info-bg); color: var(--fu-info-fg); }
[data-fu-skin] .nav-tabs { border-bottom: 1px solid var(--fu-border); }
[data-fu-skin] .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--fu-text-muted);
}
[data-fu-skin] .nav-tabs .nav-link:hover { color: var(--fu-primary-text); }
[data-fu-skin] .nav-tabs .nav-link.active { border-bottom-color: var(--fu-primary); color: var(--fu-primary-text); font-weight: var(--fu-weight-semibold); }

/* Checkbox e radio do Remark (checkbox-custom/radio-custom) na primaria do tema, nao no azul. */
[data-fu-skin] .checkbox-primary input[type="checkbox"]:checked + label::before,
[data-fu-skin] .checkbox-primary input[type="checkbox"]:checked + input[type="hidden"] + label::before,
[data-fu-skin] .checkbox-primary input[type="radio"]:checked + label::before {
    background-color: var(--fu-primary);
    border-color: var(--fu-primary);
}
[data-fu-skin] .checkbox-primary input[type="checkbox"]:checked + label::after,
[data-fu-skin] .checkbox-primary input[type="checkbox"]:checked + input[type="hidden"] + label::after { color: var(--fu-on-primary); }
[data-fu-skin] .checkbox-default input[type="checkbox"]:checked + label::after,
[data-fu-skin] .checkbox-default input[type="radio"]:checked + label::after { color: var(--fu-primary-text); }
[data-fu-skin] .radio-primary input[type="radio"]:checked + label::before,
[data-fu-skin] .radio-primary input[type="radio"]:checked + input[type="hidden"] + label::before { border-color: var(--fu-primary); }
[data-fu-skin] .checkbox-custom label::before,
[data-fu-skin] .radio-custom label::before { border-color: var(--fu-border-strong); background-color: var(--fu-surface); }

/* Select2 (o 4.0.x do template, FalkerUi.select2) no desenho dos campos. O CSS do template carrega
   depois e poe o campo inteiro em z-index 1701, acima dos modais (1700): so a lista aberta fica
   alta. O [data-fu-skin] vence o template sem important. */
[data-fu-skin] .select2-container:not(.select2-container--open) { z-index: auto; }
[data-fu-skin] .select2-container--default .select2-selection--single,
[data-fu-skin] .select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border: 1px solid var(--fu-border-strong);
    border-radius: var(--fu-radius-sm);
    background-color: var(--fu-surface);
}
[data-fu-skin] .select2-container--default .select2-selection--single { height: 40px; padding: 0; }
[data-fu-skin] .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    padding-right: 30px;
    color: var(--fu-text);
    font-size: inherit;
    line-height: 38px;
}
[data-fu-skin] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--fu-text-subtle); }
[data-fu-skin] .select2-container--default .select2-selection--single .select2-selection__arrow { top: 1px; right: 6px; height: 38px; }
[data-fu-skin] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 0;
    border-radius: var(--fu-radius-pill);
    background-color: var(--fu-primary-50);
    color: var(--fu-primary-700);
}
[data-fu-skin] .select2-container--default.select2-container--focus .select2-selection--single,
[data-fu-skin] .select2-container--default.select2-container--open .select2-selection--single,
[data-fu-skin] .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--fu-primary);
    box-shadow: var(--fu-focus-ring);
    outline: none;
}
[data-fu-skin] .select2-dropdown {
    z-index: 2000;
    border-color: var(--fu-border-strong);
    border-radius: var(--fu-radius-sm);
    background-color: var(--fu-surface);
    box-shadow: var(--fu-shadow-md);
    color: var(--fu-text);
}
[data-fu-skin] .select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 6px 10px;
    border: 1px solid var(--fu-border-strong);
    border-radius: var(--fu-radius-sm);
    background-color: var(--fu-surface);
    color: var(--fu-text);
}
[data-fu-skin] .select2-container--default .select2-results__option { padding: 7px 12px; }
[data-fu-skin] .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--fu-primary-50); color: var(--fu-text); }
[data-fu-skin] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--fu-primary); color: var(--fu-on-primary); }

/* Modo escuro da camada base (P03, D47): o que o Remark pinta de claro e a skin acima nao toca
   (cartao, lista, popover, trilha, grupo de campo, paginacao, alerta, DataTables, dropify,
   intro.js, casca do Remark). So com data-fu-scheme="dark"; tudo por token, entao a paleta escura
   do tema (themes/<tema>.css) vale aqui tambem. Sem important: o seletor (0,3,0) ja vence o Remark. */
[data-fu-skin][data-fu-scheme="dark"] body,
[data-fu-skin][data-fu-scheme="dark"] .page,
[data-fu-skin][data-fu-scheme="dark"] .page-main {
    background-color: var(--fu-canvas);
    color: var(--fu-text);
}
[data-fu-skin][data-fu-scheme="dark"] hr { border-color: var(--fu-border); }
[data-fu-skin][data-fu-scheme="dark"] .text-muted { color: var(--fu-text-muted); }
[data-fu-skin][data-fu-scheme="dark"] .card,
[data-fu-skin][data-fu-scheme="dark"] .list-group-item,
[data-fu-skin][data-fu-scheme="dark"] .well,
[data-fu-skin][data-fu-scheme="dark"] .popover,
[data-fu-skin][data-fu-scheme="dark"] .nav-tabs-horizontal .tab-content {
    background-color: var(--fu-surface);
    border-color: var(--fu-border);
    color: var(--fu-text);
}
[data-fu-skin][data-fu-scheme="dark"] .card-header,
[data-fu-skin][data-fu-scheme="dark"] .card-footer,
[data-fu-skin][data-fu-scheme="dark"] .card-block,
[data-fu-skin][data-fu-scheme="dark"] .card-body,
[data-fu-skin][data-fu-scheme="dark"] .modal-header,
[data-fu-skin][data-fu-scheme="dark"] .modal-footer {
    background-color: transparent;
    border-color: var(--fu-border);
    color: inherit;
}
[data-fu-skin][data-fu-scheme="dark"] .modal-content { background-color: var(--fu-surface); color: var(--fu-text); }
[data-fu-skin][data-fu-scheme="dark"] .close { color: var(--fu-text); text-shadow: none; }
[data-fu-skin][data-fu-scheme="dark"] .breadcrumb { background-color: transparent; }
[data-fu-skin][data-fu-scheme="dark"] .dropdown-header { color: var(--fu-text-muted); }
[data-fu-skin][data-fu-scheme="dark"] .input-group-addon,
[data-fu-skin][data-fu-scheme="dark"] .input-group-text {
    background-color: var(--fu-surface-muted);
    border-color: var(--fu-border-strong);
    color: var(--fu-text);
}
[data-fu-skin][data-fu-scheme="dark"] .form-control:disabled,
[data-fu-skin][data-fu-scheme="dark"] .form-control[readonly] { background-color: var(--fu-surface-muted); color: var(--fu-text-muted); }
[data-fu-skin][data-fu-scheme="dark"] .page-link { background-color: var(--fu-surface); border-color: var(--fu-border); color: var(--fu-text); }
[data-fu-skin][data-fu-scheme="dark"] .page-item.disabled .page-link { background-color: var(--fu-surface); color: var(--fu-text-muted); }
[data-fu-skin][data-fu-scheme="dark"] .alert:not(.dark):not(.fu-alert) { background-color: var(--fu-neutral-200); border-color: var(--fu-border); color: var(--fu-text); }
[data-fu-skin][data-fu-scheme="dark"] table.dataTable { color: var(--fu-text); background-color: transparent; }
[data-fu-skin][data-fu-scheme="dark"] table.dataTable thead th,
[data-fu-skin][data-fu-scheme="dark"] table.dataTable tbody td { border-color: var(--fu-border); }
[data-fu-skin][data-fu-scheme="dark"] table.dataTable tbody tr { background-color: transparent; }
[data-fu-skin][data-fu-scheme="dark"] .dataTables_wrapper .dataTables_info,
[data-fu-skin][data-fu-scheme="dark"] .dataTables_wrapper .dataTables_length,
[data-fu-skin][data-fu-scheme="dark"] .dataTables_wrapper .dataTables_filter,
[data-fu-skin][data-fu-scheme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--fu-text-muted); }
[data-fu-skin][data-fu-scheme="dark"] .dropify-wrapper { background-color: var(--fu-surface-muted); border-color: var(--fu-border); color: var(--fu-text); }
[data-fu-skin][data-fu-scheme="dark"] .introjs-tooltip { background-color: var(--fu-neutral-200); color: var(--fu-text); }
[data-fu-skin][data-fu-scheme="dark"] .sweet-alert { background-color: var(--fu-surface); }
[data-fu-skin][data-fu-scheme="dark"] .sweet-alert h2,
[data-fu-skin][data-fu-scheme="dark"] .sweet-alert p { color: var(--fu-text); }
[data-fu-skin][data-fu-scheme="dark"] .site-menubar,
[data-fu-skin][data-fu-scheme="dark"] .site-footer,
[data-fu-skin][data-fu-scheme="dark"] .page-aside,
[data-fu-skin][data-fu-scheme="dark"] .page-aside-switch {
    background-color: var(--fu-surface);
    border-color: var(--fu-border);
    color: var(--fu-text-muted);
}
[data-fu-skin][data-fu-scheme="dark"] .site-footer { box-shadow: none; }
[data-fu-skin][data-fu-scheme="dark"] ::-webkit-scrollbar-track { background: var(--fu-surface); }
[data-fu-skin][data-fu-scheme="dark"] ::-webkit-scrollbar-thumb { background: var(--fu-neutral-300); }
/* Controles do Leaflet (zoom, camadas, popup); o mapa em si fica como esta. */
[data-fu-skin][data-fu-scheme="dark"] .leaflet-bar a,
[data-fu-skin][data-fu-scheme="dark"] .leaflet-control-layers,
[data-fu-skin][data-fu-scheme="dark"] .leaflet-popup-content-wrapper,
[data-fu-skin][data-fu-scheme="dark"] .leaflet-popup-tip {
    background-color: var(--fu-neutral-200);
    border-color: var(--fu-border);
    color: var(--fu-text);
}
[data-fu-skin][data-fu-scheme="dark"] .leaflet-container { background-color: var(--fu-canvas); }
/* A opcao de aparencia marcada (<x-falker::user-menu theme>), nos dois modos. */
[data-fu-skin] .dropdown-item.fu-theme-option.active {
    background-color: transparent;
    color: var(--fu-primary-text);
    font-weight: var(--fu-weight-semibold);
}
[data-fu-skin] .dropdown-item.fu-theme-option.active::after { content: " \2713"; }