/* =============================================================
   Sistema FMF — Folha de estilos base
   Paleta neutra + acento azul (ajustável em --accent)
   ============================================================= */

/* =============================================================
   v2::fonts — Inter (400/500/600) + JetBrains Mono (400/500)
   Self-hosted em /assets/fonts/. Arquivos originais do pacote
   @fontsource 5.2.8 (Google Fonts community OSS).
   font-display: swap evita FOIT — texto pinta com fallback do
   system stack até o woff2 carregar.
   unicode-range na Inter 400 só pra permitir que o browser
   pule o download dos outros pesos se o conteúdo da página
   for 100% pt-BR/latin (não é limitador, é otimização).
   ============================================================= */
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-fg: #fff;

    --bg: #f8fafc;
    --bg-elev: #ffffff;
    --bg-side: #0f172a;
    --bg-side-hover: #1e293b;

    --fg: #0f172a;
    --fg-muted: #64748b;
    --fg-side: #cbd5e1;
    --fg-side-active: #fff;

    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    --success: #16a34a;
    --warning: #ca8a04;
    --danger: #dc2626;
    --info: #0284c7;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);

    --sidebar-w: 240px;
    --sidebar-rail-w: 64px;
    --header-h: 60px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* =========================================================
       v2::tokens — design system FMF v2
       Convive com tokens legacy acima. Consumido apenas por
       primitivas .fmf-* — templates legacy continuam usando
       os tokens sem prefixo.
       ========================================================= */

    /* Accent indigo — substitui o blue legacy nas primitivas fmf-* */
    --fmf-accent:         #3730a3;
    --fmf-accent-hover:   #312e81;
    --fmf-accent-soft:    #eef2ff;
    --fmf-accent-text:    #3730a3;
    --fmf-accent-fg:      #ffffff;

    /* Neutros — slate, alinhado com legacy mas com --fmf-bg-muted e --fmf-border-subtle extras */
    --fmf-fg:             #0f172a;
    --fmf-fg-muted:       #64748b;

    --fmf-bg:             #f8fafc;
    --fmf-bg-elev:        #ffffff;
    --fmf-bg-muted:       #f8fafc;

    --fmf-border:         #e2e8f0;
    --fmf-border-strong:  #cbd5e1;
    --fmf-border-subtle:  #f1f5f9;

    /* Semânticas — idênticas ao legacy, duplicadas com prefixo pra isolamento */
    --fmf-success:        #16a34a;
    --fmf-warning:        #ca8a04;
    --fmf-danger:         #dc2626;
    --fmf-info:           #0284c7;

    /* Forma */
    --fmf-radius:         10px;
    --fmf-radius-sm:      6px;
    --fmf-radius-pill:    999px;

    /* Escala tipográfica — menor que system default, densidade de app financeiro */
    --fmf-text-xs:        11px;
    --fmf-text-sm:        12.5px;
    --fmf-text-base:      14px;
    --fmf-text-md:        15px;

    /* Fontes — Inter + JetBrains Mono self-hosted (ver v2::fonts no topo). */
    --fmf-font:           'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --fmf-font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Grid default pra .fmf-list — contexto de uso sobrescreve inline via style="--fmf-list-cols: ..."
       Ordem das colunas: [icon|avatar] [main] [meta] [valor] [status] [actions] */
    --fmf-list-cols:      40px minmax(0,1fr) 110px 140px 180px 120px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--fg-muted); }

/* Layout ==================================================== */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
    transition: grid-template-columns .2s ease;
}
/* Estado RAIL: só ícones (~64px). Hover expande temporariamente. */
.app-shell[data-sidebar="rail"] {
    grid-template-columns: var(--sidebar-rail-w) 1fr;
}
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-content { flex: 1; padding: 1.5rem 2rem; }

/* Sidebar =================================================== */
.app-sidebar {
    background: var(--bg-side);
    color: var(--fg-side);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    transition: width .2s ease, padding .2s ease;
    z-index: 20;
}
.sidebar-brand { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand-link { display: inline-block; }
.brand-mark {
    font-weight: 700; letter-spacing: 1px; color: #fff;
    padding: .25rem .5rem; background: var(--accent); border-radius: var(--radius-sm);
}
.sidebar-nav { padding: .75rem .5rem; flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.sidebar-footer { padding: .5rem; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem .75rem; border-radius: var(--radius-sm);
    color: var(--fg-side); text-decoration: none; font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
}
.nav-item:hover { background: var(--bg-side-hover); color: #fff; text-decoration: none; }
.nav-item [data-icon] { flex: 0 0 auto; }
.nav-item span { flex: 1 1 auto; min-width: 0; transition: opacity .15s ease; }
.nav-item.is-active { background: var(--bg-side-hover); color: #fff; }

/* Grupo colapsável (submenus na sidebar) ===================================
   Estrutura: <details class="nav-group"> <summary class="nav-item--group">...
   Auto-abre quando a URL atual bate com o pai ou algum filho (via atributo open
   setado no template). */
.nav-group { list-style: none; }
.nav-group > summary { cursor: pointer; list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::marker { content: ''; }

.nav-item--group { padding-right: .5rem; }
.nav-group__caret {
    transition: transform .15s ease;
    opacity: .6;
    font-size: .85rem !important;
}
.nav-group[open] > summary .nav-group__caret { transform: rotate(180deg); }

.nav-group__children {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 4px;
    padding-left: 1.75rem;   /* alinha com o texto do pai (ícone=20px + gap) */
}
.nav-item--child {
    padding: .35rem .75rem;
    font-size: .85rem;
    color: var(--fg-side);
    opacity: .85;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.nav-item--child:hover { opacity: 1; border-left-color: var(--accent); }
.nav-item--child.is-active {
    opacity: 1;
    color: #fff;
    background: var(--bg-side-hover);
    border-left-color: var(--accent);
}

/* No estado rail (desktop colapsado), os children somem — usuário expande
   no hover pra ver de novo. */
.app-shell[data-sidebar="rail"] .app-sidebar .nav-group__children,
.app-shell[data-sidebar="rail"] .app-sidebar .nav-group__caret {
    display: none;
}
.app-shell[data-sidebar="rail"] .app-sidebar:hover .nav-group__children,
.app-shell[data-sidebar="rail"] .app-sidebar:hover .nav-group__caret {
    display: flex;
}
.app-shell[data-sidebar="rail"] .app-sidebar:hover .nav-group__caret {
    display: inline-flex;
}

/* Estado RAIL — só ícones visíveis. Hover expande temporariamente sobrepondo o conteúdo. */
.app-shell[data-sidebar="rail"] .app-sidebar {
    width: var(--sidebar-rail-w);
}
.app-shell[data-sidebar="rail"] .app-sidebar .nav-item span,
.app-shell[data-sidebar="rail"] .app-sidebar .brand-mark {
    opacity: 0;
    pointer-events: none;
}
.app-shell[data-sidebar="rail"] .app-sidebar .sidebar-brand,
.app-shell[data-sidebar="rail"] .app-sidebar .nav-item {
    justify-content: center;
    padding-left: 0; padding-right: 0;
}
/* Hover na sidebar em rail mode → expande visualmente sem mexer no grid */
.app-shell[data-sidebar="rail"] .app-sidebar:hover {
    width: var(--sidebar-w);
    box-shadow: var(--shadow-md);
}
.app-shell[data-sidebar="rail"] .app-sidebar:hover .nav-item span,
.app-shell[data-sidebar="rail"] .app-sidebar:hover .brand-mark {
    opacity: 1;
    pointer-events: auto;
}
.app-shell[data-sidebar="rail"] .app-sidebar:hover .sidebar-brand,
.app-shell[data-sidebar="rail"] .app-sidebar:hover .nav-item {
    justify-content: flex-start;
    padding-left: .75rem; padding-right: .75rem;
}
.app-shell[data-sidebar="rail"] .app-sidebar:hover .sidebar-brand {
    padding-left: 1.25rem; padding-right: 1.25rem;
}

/* Header ==================================================== */
.app-header {
    height: var(--header-h);
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.5rem;
    position: sticky; top: 0; z-index: 10;
}
.sidebar-toggle {
    background: transparent; border: 0; cursor: pointer;
    padding: .5rem; border-radius: var(--radius-sm);
}
.sidebar-toggle:hover { background: var(--bg); }
.header-title { font-weight: 600; flex: 1; }

/* Breadcrumbs ============================================================= */
.breadcrumbs {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    overflow-x: auto;
    font-size: .875rem;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* firefox */
}
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumb-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    flex-shrink: 0;
}
.breadcrumb-home:hover { background: var(--bg); color: var(--accent); text-decoration: none; }
.breadcrumb-sep { color: var(--border-strong); font-weight: 300; flex-shrink: 0; }
.breadcrumb-item {
    color: var(--fg-muted);
    text-decoration: none;
    padding: .25rem .375rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.breadcrumb-item:hover { color: var(--accent); background: var(--bg); text-decoration: none; }
.breadcrumb-item.is-current {
    color: var(--fg);
    font-weight: 600;
    cursor: default;
}
.breadcrumb-item.is-current:hover { background: transparent; color: var(--fg); }

@media (max-width: 640px) {
    .breadcrumbs { font-size: .8125rem; }
    /* No mobile esconde os intermediários, mostra só home + item atual */
    .breadcrumbs .breadcrumb-item:not(.is-current) { display: none; }
    .breadcrumbs .breadcrumb-sep { display: none; }
    .breadcrumbs .breadcrumb-sep:last-of-type { display: inline; }
    .breadcrumbs .breadcrumb-item.is-current { display: inline-block; }
}
.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-bell { position: relative; padding: .5rem; border-radius: var(--radius-sm); color: var(--fg); }
.header-bell:hover { background: var(--bg); text-decoration: none; }
.badge-dot {
    position: absolute; top: 2px; right: 2px;
    background: var(--danger); color: #fff;
    font-size: .65rem; font-weight: 600;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; display: grid; place-items: center;
}
.header-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.user-name { font-size: .85rem; font-weight: 500; }
.user-role { font-size: .75rem; color: var(--fg-muted); }

/* Guest (login etc.) ======================================== */
.guest-body {
    background: linear-gradient(180deg, #f8fafc, #e2e8f0);
    min-height: 100vh;
    display: grid; place-items: center;
}
.guest-wrapper { width: 100%; max-width: 400px; padding: 2rem 1rem; }
.guest-card {
    background: var(--bg-elev);
    border-radius: var(--radius);
    padding: 2rem; box-shadow: var(--shadow-md);
}
.guest-brand { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin-bottom: 1.5rem; }
.guest-brand .brand-mark { font-size: 1.25rem; padding: .4rem .8rem; }
.guest-brand .brand-sub { color: var(--fg-muted); font-size: .85rem; }
.guest-foot { text-align: center; color: var(--fg-muted); font-size: .75rem; margin-top: 1rem; }
.auth-title { text-align: center; margin-bottom: .25rem; }
.auth-links { text-align: center; margin-top: 1rem; font-size: .85rem; }

/* Forms ===================================================== */
.form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], input[type=url], select, textarea {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff; color: var(--fg);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Buttons =================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .55rem 1rem;
    border-radius: var(--radius-sm);
    font: inherit; font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-warning:hover { background: #a16207; border-color: #a16207; }
.btn-sm { padding: .35rem .65rem; font-size: .8rem; }
.btn-block { width: 100%; }

/* Cards ===================================================== */
.card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }

/* Dashboard cards =========================================== */
.dash-welcome { margin-bottom: 1.5rem; }
.card-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.module-card {
    position: relative;
    display: flex; align-items: flex-start; gap: .75rem;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    color: var(--fg);
    text-decoration: none;
    transition: transform .1s, box-shadow .15s, border-color .15s;
}
.module-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transform: translateY(-1px);
}
.module-card .card-icon {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    background: rgba(37, 99, 235, .1);
    color: var(--accent);
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
}
.module-card h3 { font-size: 1rem; margin: 0 0 .25rem; }
.card-badge {
    position: absolute; top: .75rem; right: .75rem;
    background: var(--accent); color: #fff;
    font-size: .75rem; font-weight: 600;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px; display: grid; place-items: center;
}

/* Tables ==================================================== */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.table th {
    font-size: .75rem; font-weight: 600;
    color: var(--fg-muted);
    text-transform: uppercase; letter-spacing: .05em;
}

/* Badges ==================================================== */
.badge {
    display: inline-block;
    padding: .15rem .5rem;
    font-size: .7rem; font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: .05em;
}
.badge-success { background: rgba(22, 163, 74, .12); color: var(--success); }
.badge-warning { background: rgba(202, 138, 4, .12); color: var(--warning); }
.badge-danger  { background: rgba(220, 38, 38, .12); color: var(--danger); }
.badge-info    { background: rgba(2, 132, 199, .12); color: var(--info); }
.badge-muted   { background: #e2e8f0; color: var(--fg-muted); }

/* Flash ==================================================== */
.flash {
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: .9rem;
}
.flash-success { background: rgba(22, 163, 74, .1); color: var(--success); border: 1px solid rgba(22, 163, 74, .25); }
.flash-error   { background: rgba(220, 38, 38, .1); color: var(--danger); border: 1px solid rgba(220, 38, 38, .25); }
.flash-info    { background: rgba(2, 132, 199, .1); color: var(--info); border: 1px solid rgba(2, 132, 199, .25); }

/* Definition list =========================================== */
.def-list { display: grid; grid-template-columns: 110px 1fr; gap: .5rem .75rem; margin: 0; }
.def-list dt { color: var(--fg-muted); font-size: .85rem; }
.def-list dd { margin: 0; }

/* 2FA setup ================================================= */
.tfa-setup { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.tfa-qr { width: 200px; height: 200px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding: .5rem; }
.tfa-secret { font-family: 'SF Mono', Monaco, Consolas, monospace; background: var(--bg); padding: .5rem .75rem; border-radius: var(--radius-sm); display: inline-block; font-size: .9rem; }

/* Responsivo: < 768px → sidebar vira drawer off-canvas com backdrop ========= */
@media (max-width: 767.98px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
    /* Em mobile o estado "rail" (desktop) também colapsa pra drawer fechado */
    .app-shell[data-sidebar="rail"] { grid-template-columns: 1fr; }

    .app-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 80vw; max-width: 320px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 50;
        box-shadow: var(--shadow-md);
    }
    .app-shell[data-sidebar="open"] .app-sidebar { transform: translateX(0); }
    .app-shell[data-sidebar="rail"] .app-sidebar { transform: translateX(-100%); }

    /* Backdrop (overlay escuro) atrás do drawer aberto */
    .app-shell[data-sidebar="open"]::before {
        content: '';
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, .5);
        z-index: 40;
        animation: fmf-fade-in .2s ease;
    }
    .sidebar-backdrop-trigger {
        /* Click interceptado via JS (event delegation no shell) */
    }

    /* Em mobile, brand mark e textos sempre aparecem */
    .app-shell[data-sidebar="rail"] .app-sidebar .nav-item span,
    .app-shell[data-sidebar="rail"] .app-sidebar .brand-mark { opacity: 1; }
    .app-shell[data-sidebar="rail"] .app-sidebar .nav-item,
    .app-shell[data-sidebar="rail"] .app-sidebar .sidebar-brand {
        justify-content: flex-start;
        padding-left: .75rem; padding-right: .75rem;
    }
    .app-shell[data-sidebar="rail"] .app-sidebar .sidebar-brand {
        padding-left: 1.25rem; padding-right: 1.25rem;
    }

    .app-content { padding: 1rem; }
}

@keyframes fmf-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Icons — SVG inline injetado pelo app.js. ============================= */
[data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    font-style: normal;
    color: inherit;
}
[data-icon] svg { width: 1em; height: 1em; }
/* Tamanhos: cresce com o contexto via font-size */
.sidebar-nav [data-icon],
.header-bell [data-icon],
.sidebar-toggle [data-icon] { font-size: 1.125rem; }
.card-icon [data-icon] { font-size: 1.5rem; }
/* Esconde o texto bruto antes do JS substituir (FOUC mitigation) */
[data-icon]:empty::before { content: ''; }

/* Módulo Colaboradores ======================================= */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.page-head .muted { margin: 0; }

/* Painel de filtros rico — usado em telas com muitos critérios.
   Estrutura: busca destacada no topo, grid responsivo de campos rotulados, ações. */
.filter-panel {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem; margin-bottom: 1rem;
    display: grid; gap: .875rem;
}
.filter-panel .filter-search { display: grid; gap: .25rem; }
.filter-panel .filter-search label { font-size: .75rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.filter-panel .filter-search input {
    width: 100%; padding: .625rem .875rem; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: .9375rem; font-family: inherit; background: #fff;
}
.filter-panel .filter-grid {
    display: grid; gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.filter-panel .filter-grid .fmf-field,
.filter-panel .filter-search .fmf-field { margin: 0; }
.filter-panel .filter-grid label { font-size: .75rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.filter-panel .filter-grid select,
.filter-panel .filter-grid input {
    width: 100%; padding: .5rem .625rem; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: .875rem; font-family: inherit; background: #fff; color: var(--fg);
    min-height: 38px;
}
.filter-panel .filter-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .25rem; border-top: 1px solid var(--border); margin-top: .125rem; padding-top: .75rem; }
@media (max-width: 480px) {
    .filter-panel .filter-grid { grid-template-columns: 1fr 1fr; }
    .filter-panel .filter-actions .btn { flex: 1; }
}

.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); object-fit: cover; flex-shrink: 0; }
.avatar-sm { width: 32px; height: 32px; font-size: .75rem; font-weight: 600; }
.avatar-lg { width: 80px; height: 80px; font-size: 2rem; font-weight: 600; }
.avatar-placeholder { background: var(--accent); color: #fff; }

.badge-ativo     { background: rgba(22, 163, 74, .12); color: var(--success); }
.badge-afastado  { background: rgba(202, 138, 4, .12); color: var(--warning); }
.badge-desligado { background: rgba(220, 38, 38, .12); color: var(--danger); }
.badge-vigente      { background: rgba(22, 163, 74, .12); color: var(--success); }
.badge-a_vencer     { background: rgba(202, 138, 4, .12); color: var(--warning); }
.badge-vencido      { background: rgba(220, 38, 38, .12); color: var(--danger); }
.badge-sem_validade { background: #e2e8f0; color: var(--fg-muted); }
.badge-arquivado    { background: #e2e8f0; color: var(--fg-muted); }

/* Status de movimentações */
.badge-previsto           { background: #e2e8f0; color: var(--fg-muted); }
.badge-pendente_aprovacao { background: rgba(202, 138, 4, .12); color: var(--warning); }
.badge-a_pagar            { background: rgba(2, 132, 199, .12); color: var(--info); }
.badge-pago               { background: rgba(22, 163, 74, .12); color: var(--success); }
.badge-cancelado          { background: #e2e8f0; color: var(--fg-muted); }
.badge-rejeitado          { background: rgba(220, 38, 38, .12); color: var(--danger); }
.badge-atrasado           { background: rgba(220, 38, 38, .12); color: var(--danger); }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* =====================================================================
   Página de detalhe de movimentação (show.twig) — hero + cards + ações
   ===================================================================== */
.mov-head { flex-direction: column; align-items: stretch; gap: 1rem; }
.mov-head-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.mov-head-titles { flex: 1 1 320px; min-width: 0; }
.mov-head-titles h1 { margin: .35rem 0 .35rem; font-size: 1.5rem; line-height: 1.25; }
.mov-tipo.badge { background: rgba(37, 99, 235, .1); color: var(--accent); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; padding: .2rem .5rem; }
.mov-head-value { text-align: right; flex: 0 0 auto; }
.mov-valor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.75rem; font-weight: 700; color: var(--fg); line-height: 1; }
.mov-status { display: inline-block; margin-top: .5rem; font-size: .75rem; }
.mov-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Painel de ação — sutil, em destaque, só aparece quando relevante */
.mov-action-panel {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.mov-action-panel > div:first-child { flex: 1 1 200px; min-width: 0; }
.mov-action-panel h3 { margin: 0 0 .25rem; font-size: 1rem; }
.mov-action-panel p { margin: 0; }
/* O atributo HTML `hidden` equivale a `display: none`, mas tem
   especificidade menor que a regra .mov-action-panel { display: flex }
   acima. Esta regra garante que `hidden` continue escondendo o painel. */
.mov-action-panel[hidden] { display: none; }
.mov-action-warn { border-left-color: var(--warning); }
.mov-action-buttons { display: flex; gap: .5rem; flex-shrink: 0; flex-wrap: wrap; }
.mov-action-buttons form { display: inline; }

.mov-pagar-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    flex: 1 1 100%;
    margin-bottom: .25rem;
}
.mov-pagar-fields .fmf-field { margin: 0; }
.mov-pagar-fields input, .mov-pagar-fields select {
    width: 100%; padding: .5rem .625rem; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: .875rem; background: #fff;
    min-height: 38px;
}

/* Cards de detalhes — grid responsivo que só ocupa o que precisa */
.mov-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}
.mov-cards .info-block { margin: 0; }
.mov-cards .mov-card-full { grid-column: 1 / -1; }
.info-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.info-block-head h3 { margin: 0; }
.info-block-head p { margin: 0; }

/* Form inline de pagamento por parcela */
.parcela-pag-form {
    display: flex; gap: .375rem; align-items: center; flex-wrap: wrap;
}
.parcela-pag-form input[type=date] { width: 140px; min-height: 32px; padding: 0 .5rem; font-size: .8125rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.parcela-pag-form input[type=text] { width: 120px; min-height: 32px; padding: 0 .5rem; font-size: .8125rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }

@media (max-width: 640px) {
    .mov-head-main { flex-direction: column; }
    .mov-head-value { text-align: left; }
    .mov-valor { font-size: 1.5rem; }
    .mov-head-actions .btn { flex: 1 1 auto; }
    .mov-action-panel { flex-direction: column; align-items: stretch; }
    .mov-action-buttons { justify-content: stretch; }
    .mov-action-buttons .btn { flex: 1; }
}

/* =====================================================================
   Módulo Férias
   ===================================================================== */

.badge-historico { background: #e9d5ff; color: #6b21a8; }
.badge-antecipado {
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
    font-size: .65rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    margin-left: .25rem;
}

/* Aviso de antecipação dentro do formulário */
.ferias-antecipacao-wrap {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}
.ferias-antecipacao-wrap .check { cursor: pointer; }


.ferias-acoes { margin-top: 1rem; }
.ferias-acoes summary {
    list-style: none;
    display: inline-block;
}
.ferias-acoes summary::-webkit-details-marker { display: none; }
.ferias-acoes[open] summary { margin-bottom: 1rem; }
.ferias-form-evento {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-top: .5rem;
}

/* =====================================================================
   Tom Select — overrides. Objetivo: parecer um <select> nativo do tema,
   com altura fixa de 38px (igual aos outros inputs), sem "crescer" quando
   há item selecionado. Single-choice apenas.
   ===================================================================== */

/* Wrapper não participa do layout com padding extra */
.ts-wrapper { font-family: inherit; font-size: .875rem; }
.ts-wrapper.single { width: 100%; }

/* Caixa principal — altura fixa, padding compacto, sem flex-wrap */
.ts-wrapper.single .ts-control {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 38px;
    min-height: 38px;
    padding: 0 2.25rem 0 .75rem;    /* espaço pra chevron à direita */
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--fg);
    font-size: .875rem;
    line-height: 1.2;
    box-shadow: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Item selecionado ocupa a linha inteira, sem quebrar */
.ts-wrapper.single .ts-control > .item {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

/* Input interno de busca — começa invisível (largura 0) e sem caret.
   Só cresce quando o usuário clica e começa a digitar (.input-active). */
.ts-wrapper.single .ts-control > input {
    flex: 0 1 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font-size: .875rem;
    color: transparent;
    caret-color: transparent;   /* esconde o caret piscando em cima do item */
    box-shadow: none !important;
    outline: 0;
}
/* Quando o usuário digita (classe .is-typing, gerenciada via JS):
   - o item selecionado é escondido
   - o input cresce e fica colorido com caret visível */
.ts-wrapper.single.is-typing .ts-control > .item { display: none; }
.ts-wrapper.single.is-typing .ts-control > input {
    max-width: 100%;
    flex: 1 1 auto;
    color: var(--fg);
    caret-color: var(--accent);
}

/* .input-active (dropdown aberto) NÃO controla mais visibilidade do .item
   nem tamanho do input — isso agora é feito via .is-typing (JS). Assim:
     - clique no campo → dropdown abre com .item visível intacto
     - tecla digitada  → .is-typing liga → input cresce, .item some  */

/* Chevron (setinha) à direita — usamos pseudo-elemento */
.ts-wrapper.single .ts-control::after {
    content: '';
    position: absolute;
    right: .75rem;
    top: 50%;
    width: 10px; height: 10px;
    border-right: 2px solid var(--fg-muted);
    border-bottom: 2px solid var(--fg-muted);
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}
.ts-wrapper.single.dropdown-active .ts-control::after {
    transform: translateY(-25%) rotate(-135deg);
}

/* Placeholder */
.ts-wrapper.single .ts-control > input::placeholder { color: var(--fg-muted); opacity: 1; }

/* Foco */
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.single.dropdown-active .ts-control {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}

/* Versão desabilitada */
.ts-wrapper.single.disabled .ts-control {
    background: var(--bg);
    color: var(--fg-muted);
    cursor: not-allowed;
}

/* Dropdown */
.ts-dropdown {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    margin-top: .25rem;
    font-size: .875rem;
    background: #fff;
    color: var(--fg);
    overflow: hidden;
}
.ts-dropdown .option {
    padding: .5rem .75rem;
    color: var(--fg);
    cursor: pointer;
}
.ts-dropdown .option:hover,
.ts-dropdown .active {
    background: rgba(37, 99, 235, .08);
    color: var(--fg);
}
.ts-dropdown .option.selected {
    background: rgba(37, 99, 235, .12);
    color: var(--fg);
    font-weight: 600;
}
.ts-dropdown .option.selected.active {
    background: rgba(37, 99, 235, .18);
}
.ts-dropdown .optgroup-header {
    background: var(--bg);
    color: var(--fg-muted);
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .45rem .75rem .35rem;
    border-top: 1px solid var(--border);
    cursor: default;
}
.ts-dropdown .optgroup:first-child .optgroup-header { border-top: 0; }
.ts-dropdown .no-results {
    padding: .5rem .75rem;
    color: var(--fg-muted);
    font-size: .875rem;
    font-style: italic;
}
.ts-dropdown-content { max-height: 320px; }

/* Dentro do filter-panel, herdar a grid */
.filter-panel .ts-wrapper.single .ts-control { min-height: 38px; }

/* Campo composto Envolvido = [tipo][nome] lado a lado ======================== */
.envolvido-combo {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}
.envolvido-combo .envolvido-tipo {
    flex: 0 0 170px;
    width: 170px;
    border: 1px solid var(--border-strong);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--bg);
    font-size: .875rem;
    padding: 0 .75rem;
    height: 38px;
    color: var(--fg);
    font-weight: 500;
    appearance: auto;          /* mantém visual nativo do select */
}
.envolvido-combo .envolvido-tipo:focus {
    outline: 2px solid rgba(37, 99, 235, .15);
    outline-offset: -1px;
    border-color: var(--accent);
    z-index: 1;
    position: relative;
}
/* O Tom Select original usa <div class="ts-wrapper">. Forçamos ele a flexivel
   ocupar o resto. min-width: 0 evita "estourar" do flex. */
.envolvido-combo .ts-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.envolvido-combo .ts-wrapper .ts-control {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left: 0;
}
.envolvido-combo .ts-wrapper.focus .ts-control,
.envolvido-combo .ts-wrapper.dropdown-active .ts-control {
    border-left: 1px solid var(--accent);
}
@media (max-width: 480px) {
    .envolvido-combo { flex-direction: column; gap: .375rem; }
    .envolvido-combo .envolvido-tipo {
        flex: 0 0 auto;
        width: 100%;
        border-right: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
    }
    .envolvido-combo .ts-wrapper .ts-control {
        border-radius: var(--radius-sm);
        border-left: 1px solid var(--border-strong);
    }
}

/* Input de month picker (Flatpickr monthSelect) — aparência alinhada ao tema */
input[data-month-picker] {
    cursor: pointer;
    background: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .625rem center;
    padding-right: 2rem !important;
}

/* Override do calendário do Flatpickr pra casar com a paleta ================ */
.flatpickr-calendar {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-family: inherit;
}
.flatpickr-months { padding: .25rem 0; }
.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 600;
    color: var(--fg);
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: var(--fg-muted); }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: var(--fg-muted); }
.flatpickr-prev-month, .flatpickr-next-month { color: var(--fg); fill: var(--fg); }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: var(--accent); fill: var(--accent); }

/* Plugin monthSelect — 12 botões em grade 3×4.
   O plugin usa flexbox nativo; mantemos isso e só ajustamos cores e tamanho
   dos botões. NÃO forçamos grid (quebra o layout interno dele). */
.flatpickr-monthSelect-months {
    padding: .5rem;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flatpickr-monthSelect-month {
    flex: 0 0 calc(33.333% - .375rem) !important;
    max-width: calc(33.333% - .375rem) !important;
    box-sizing: border-box;
    margin: .1875rem 0 !important;
    padding: .625rem .25rem !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: .875rem;
    color: var(--fg);
    background: var(--bg-elev);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.flatpickr-monthSelect-month:hover {
    background: rgba(37, 99, 235, .08);
    border-color: var(--accent);
    color: var(--fg);
}
.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.startRange,
.flatpickr-monthSelect-month.endRange {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 600;
}
.flatpickr-monthSelect-month.today:not(.selected) {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.file-list { list-style: none; padding: 0; margin: 0; }
.file-list li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.file-list li:last-child { border-bottom: 0; }
.file-list a { display: inline-flex; align-items: center; gap: .35rem; }
.file-list .small { margin-left: auto; }

.colab-head { align-items: center; }
.colab-identity { display: flex; gap: 1rem; align-items: center; }
.colab-identity h1 { margin: 0; }

.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; }
.tab { padding: .75rem 1.25rem; color: var(--fg-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.tab:hover { color: var(--fg); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-panel { padding: .5rem 0; }

.info-block { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.info-block h3 { margin: 0 0 .75rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); }
.defs { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; margin: 0; }
.defs dt { color: var(--fg-muted); font-size: .8125rem; }
.defs dd { margin: 0; font-size: .875rem; }

.form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.form-card fieldset { border: 0; padding: 0 0 1.25rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--border); }
.form-card fieldset:last-of-type { border-bottom: 0; }
.form-card legend { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); padding: 0 0 .5rem; font-weight: 600; }
.form-card input[type=text], .form-card input[type=email], .form-card input[type=date], .form-card input[type=password], .form-card input[type=file], .form-card select, .form-card textarea {
    width: 100%; padding: .5rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: .875rem; font-family: inherit;
}
.form-card textarea { min-height: 80px; resize: vertical; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.grid-span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.check { display: flex; align-items: center; gap: .5rem; font-weight: normal; }

.pager { display: flex; gap: .25rem; margin-top: 1rem; justify-content: center; }
.page-link { padding: .375rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--fg); font-size: .875rem; }
.page-link.is-current { background: var(--accent); color: #fff; border-color: var(--accent); }

.btn-sm { padding: .25rem .625rem; font-size: .75rem; }

/* =====================================================================
   MOBILE — pacote unificado de ajustes responsivos. Aplicado em todo
   o sistema (formulários, headers, tabelas etc.).
   Critérios em planejamento.md §10 e docs/decisoes.md (2026-04-21).
   ===================================================================== */
@media (max-width: 768px) {
    /* Header compacta */
    .app-header { padding: 0 .75rem; gap: .5rem; }
    .header-user { display: none; }      /* nome do usuário some no mobile (acessível via /perfil) */
    .header-title { font-size: .9rem; }

    /* Page head empilha */
    .page-head { flex-direction: column; align-items: stretch; gap: .75rem; }
    .page-head .btn { width: 100%; }
    .page-head > div + div { display: flex; flex-wrap: wrap; gap: .5rem; }
    .page-head > div + div .btn { flex: 1 1 auto; }

    /* Colaborador: identidade vira centralizada */
    .colab-identity { flex-direction: column; text-align: center; }

    /* Forms: grids viram 1 coluna */
    .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
    .grid-span-2 { grid-column: auto; }

    /* Form-card mais compacto */
    .form-card { padding: 1rem; }
    .form-card fieldset { padding-bottom: .75rem; margin-bottom: .75rem; }
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; }

    /* Inputs com tamanho de toque adequado */
    .form-card input[type=text],
    .form-card input[type=email],
    .form-card input[type=date],
    .form-card input[type=password],
    .form-card input[type=file],
    .form-card input[type=number],
    .form-card select,
    .form-card textarea,
    .filter-panel input,
    .filter-panel select,
    .filter-search input { font-size: 16px; }   /* evita zoom no iOS Safari */

    /* Abas de detalhe com scroll horizontal */
    .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab { flex: 0 0 auto; }

    /* Pager compacto */
    .pager { flex-wrap: wrap; }

    /* Reduz padding do conteúdo principal */
    .app-content { padding: .75rem; }
}

/* Toques mais leves só em telas muito estreitas */
@media (max-width: 480px) {
    .page-head h1 { font-size: 1.25rem; }
    .info-block { padding: 1rem; }
    .form-card legend { font-size: .75rem; }
}

/* #############################################################
   #############################################################
   ##                                                         ##
   ##    DESIGN SYSTEM FMF v2 — PRIMITIVAS                    ##
   ##                                                         ##
   ##    Introduzido em 21/04/2026 (Fase 3).                  ##
   ##    Convive com componentes legacy acima até Fase 5.     ##
   ##    Todas as primitivas usam prefixo permanente .fmf-.   ##
   ##    Comentários de seção marcados com v2:: pra grep.     ##
   ##    Referência canônica: docs/samples/v2/*.html          ##
   ##                                                         ##
   ############################################################# */

/* =============================================================
   v2::list-row — linha de lista/tabela

   Estrutura: <div class="fmf-list"> contém várias .fmf-list-row.
   Cada row é um <div>, não <a> — o anchor stretched (.fmf-list-row__link)
   fica no DOM envolvendo o título e expande pra linha inteira via
   pseudo-elemento ::after posicionado absoluto. HTML válido, botões
   são siblings do <a> com z-index maior e capturam próprios clicks.

   Grid configurável por contexto via --fmf-list-cols (variável no token).
   Mobile (< 640px) reorganiza em 2 linhas: título/valor em cima, metarow
   em baixo, .fmf-list-row__sub escondida.

   Tradeoff conhecido do stretched link: texto fora do título
   (.fmf-list-row__sub, .fmf-list-row__meta) não é selecionável via
   drag do mouse porque o ::after do anchor intercepta pointer events.
   Decisão consciente — trocamos seleção de texto livre por clique
   universal na linha (Fitts), acessibilidade (Enter/middle-click nativos)
   e HTML válido. Se seleção virar requisito forte em algum contexto,
   a ficha de detalhe cobre o caso.
   ============================================================= */

.fmf-list {
    background: var(--fmf-bg-elev);
    border: 1px solid var(--fmf-border);
    border-radius: var(--fmf-radius);
    overflow: hidden;
}

.fmf-list-head {
    display: grid;
    grid-template-columns: var(--fmf-list-cols);
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    min-height: 36px;
    background: var(--fmf-bg);
    border-bottom: 1px solid var(--fmf-border);
    font-size: var(--fmf-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fmf-fg-muted);
}
.fmf-list-head__col--right { text-align: right; }

.fmf-list-row {
    display: grid;
    grid-template-columns: var(--fmf-list-cols);
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    min-height: 56px;
    border-bottom: 1px solid var(--fmf-border-subtle);
    position: relative;           /* âncora pro stretched link ::after */
    transition: background .12s ease;
}
.fmf-list-row:last-child { border-bottom: 0; }
.fmf-list-row:hover { background: var(--fmf-bg-muted); }

/* Anchor stretched — invisível, envolve só o título (texto do link = título
   da entidade, bom pra screen reader). O ::after expande pra linha inteira. */
.fmf-list-row__link {
    position: static;             /* reset; só o ::after é posicionado */
    color: inherit;
    text-decoration: none;
    z-index: 0;
}
.fmf-list-row__link:hover { text-decoration: none; }
.fmf-list-row__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: pointer;
}

/* Focus ring na linha inteira quando o anchor recebe foco por teclado. */
.fmf-list-row:has(.fmf-list-row__link:focus-visible) {
    outline: 2px solid var(--fmf-accent);
    outline-offset: -2px;
    background: var(--fmf-bg-muted);
}

/* Botões ficam acima do anchor — clicks neles não navegam, sem stopPropagation. */
.fmf-list-row__actions,
.fmf-list-row__menu {
    position: relative;
    z-index: 1;
}

/* Conteúdo da row */
.fmf-list-row__main { min-width: 0; }
.fmf-list-row__title {
    font-size: var(--fmf-text-md);
    font-weight: 500;
    color: var(--fmf-fg);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fmf-list-row__sub {
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg-muted);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fmf-list-row__sub .dot { margin: 0 6px; color: var(--fmf-border-strong); }

.fmf-list-row__meta {
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg-muted);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
.fmf-list-row__meta.is-danger { color: var(--fmf-danger); }

.fmf-list-row__value {
    font-family: var(--fmf-font-mono);
    font-size: var(--fmf-text-base);
    font-weight: 500;
    color: var(--fmf-fg);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
.fmf-list-row__value.is-positive { color: var(--fmf-success); }
.fmf-list-row__value.is-negative { color: var(--fmf-danger); }

.fmf-list-row__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg-muted);
    white-space: nowrap;
}

/* Metarow — wrapper que só "existe" em mobile.
   Desktop: display: contents faz o wrapper sumir e cada filho
   (.fmf-list-row__meta, .sep, .fmf-list-row__status) vai pro seu slot
   próprio no grid da row. O separador .sep fica oculto.
   Mobile: wrapper vira inline-flex e agrupa os 3 elementos numa
   única célula do grid (grid-area: metarow). */
.fmf-list-row__metarow { display: contents; }
.fmf-list-row__metarow .sep { display: none; }

/* Ações inline — desktop: hover reveal; mobile: escondido, usa .fmf-list-row__menu */
.fmf-list-row__actions {
    display: inline-flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
    justify-content: flex-end;
}
.fmf-list-row:hover .fmf-list-row__actions,
.fmf-list-row:focus-within .fmf-list-row__actions { opacity: 1; }

@media (hover: none) {
    .fmf-list-row__actions { opacity: 1; }
}

.fmf-list-row__action {
    width: 30px; height: 30px;
    border-radius: var(--fmf-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fmf-fg-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.fmf-list-row__action:hover {
    background: var(--fmf-bg-elev);
    color: var(--fmf-fg);
    box-shadow: 0 0 0 1px var(--fmf-border);
}
.fmf-list-row__action--danger:hover {
    color: var(--fmf-danger);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, .25);
}
.fmf-list-row__action:focus-visible {
    outline: 2px solid var(--fmf-accent);
    outline-offset: 1px;
}

.fmf-list-row__menu {
    display: none;                /* só mobile via @media abaixo */
    width: 32px; height: 32px;
    border-radius: var(--fmf-radius-sm);
    align-items: center;
    justify-content: center;
    color: var(--fmf-fg-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    margin-left: auto;
}
.fmf-list-row__menu:hover { background: var(--fmf-bg-elev); color: var(--fmf-fg); box-shadow: 0 0 0 1px var(--fmf-border); }
.fmf-list-row__menu:focus-visible { outline: 2px solid var(--fmf-accent); outline-offset: 1px; }

/* Mobile < 640px — reorganiza grid em 2 linhas, metarow ativa. */
@media (max-width: 639.98px) {
    .fmf-list-head { display: none; }

    .fmf-list-row {
        grid-template-columns: 32px minmax(0,1fr) auto;
        grid-template-areas:
            "icon  title    value"
            "icon  metarow  menu";
        gap: 2px 12px;
        padding: 10px 14px;
        min-height: auto;
        align-items: start;
    }

    .fmf-list-row__main { grid-area: title; min-width: 0; }
    .fmf-list-row__title {
        font-size: var(--fmf-text-base);
        white-space: normal;
        overflow: visible;
    }
    .fmf-list-row__sub { display: none; }

    .fmf-list-row__value {
        grid-area: value;
        align-self: start;
        font-size: var(--fmf-text-base);
        font-weight: 600;
    }

    .fmf-list-row__metarow {
        grid-area: metarow;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        align-self: end;
        flex-wrap: wrap;
        font-size: var(--fmf-text-sm);
        color: var(--fmf-fg-muted);
    }
    .fmf-list-row__metarow .sep {
        display: inline;
        color: var(--fmf-border-strong);
    }

    .fmf-list-row__actions { display: none; }
    .fmf-list-row__menu    { display: inline-flex; grid-area: menu; justify-self: end; align-self: end; }
}

/* =============================================================
   v2::list-row-ornaments — ícone, avatar, status-dot

   Ornamentos usados dentro de .fmf-list-row. Separados em seção
   própria pra deixar claro que são decoração visual vs. estrutura.

   Ícone vs avatar — regra canônica, nunca misturar:
   - .fmf-list-row__icon → categoria da entidade (tipo de movimentação,
     tipo de documento). Fundo fixo --fmf-accent-soft, cor --fmf-accent-text.
     Glifo variável (SVG dentro muda conforme categoria).
   - .fmf-list-row__avatar → pessoa. Cor variável por hash do nome
     (.fmf-avatar--c1 até --c8), iniciais do nome no conteúdo.

   Status-dot: indicador passivo de status em lista densa. Em contextos
   ativos (page-head, alertas) usar badge legacy em vez de dot.
   ============================================================= */

.fmf-list-row__icon {
    width: 32px; height: 32px;
    border-radius: var(--fmf-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fmf-accent-soft);
    color: var(--fmf-accent-text);
    flex-shrink: 0;
}

.fmf-list-row__avatar {
    width: 32px; height: 32px;
    border-radius: var(--fmf-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    flex-shrink: 0;
}

/* Paleta determinística — consumidor escolhe via hash(nome) % 8 */
.fmf-avatar--c1 { background: #fef3c7; color: #92400e; }
.fmf-avatar--c2 { background: #dcfce7; color: #166534; }
.fmf-avatar--c3 { background: #dbeafe; color: #1e40af; }
.fmf-avatar--c4 { background: #fce7f3; color: #9d174d; }
.fmf-avatar--c5 { background: #ede9fe; color: #5b21b6; }
.fmf-avatar--c6 { background: #ccfbf1; color: #115e59; }
.fmf-avatar--c7 { background: #ffedd5; color: #9a3412; }
.fmf-avatar--c8 { background: #e0e7ff; color: #3730a3; }

/* Mobile — icon/avatar vão pra grid-area="icon" definida em .fmf-list-row */
@media (max-width: 639.98px) {
    .fmf-list-row__icon,
    .fmf-list-row__avatar { grid-area: icon; margin-top: 2px; }
}

.fmf-status-dot {
    width: 8px; height: 8px;
    border-radius: var(--fmf-radius-pill);
    flex-shrink: 0;
    display: inline-block;
}
.fmf-status-dot--success { background: var(--fmf-success); }
.fmf-status-dot--warning { background: var(--fmf-warning); }
.fmf-status-dot--danger  { background: var(--fmf-danger); }
.fmf-status-dot--info    { background: var(--fmf-info); }
.fmf-status-dot--muted   { background: var(--fmf-border-strong); }

/* =============================================================
   v2::field — campo de formulário

   Estrutura:
   <label class="fmf-field">
     <span class="fmf-field__label">Título <span class="fmf-field__required">*</span></span>
     <div class="fmf-field__input-wrap">
       <span class="fmf-field__affix fmf-field__prefix">R$</span>      (opcional)
       <span class="fmf-field__icon">...svg...</span>                   (opcional, em vez de affix)
       <input class="fmf-field__input num" ...>
       <span class="fmf-field__affix fmf-field__suffix">/mês</span>     (opcional)
     </div>
     <span class="fmf-field__help">Texto auxiliar</span>
   </label>

   Seletor global input[type=...] no app.css aplica borda/padding default
   pra inputs fora do wrap (.envolvido-combo, .parcela-pag-form). Dentro de
   .fmf-field__input-wrap essas propriedades são derrotadas por especificidade
   combinada (.fmf-field__input-wrap > .fmf-field__input).
   ============================================================= */

.fmf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.fmf-field__label {
    font-size: var(--fmf-text-sm);
    font-weight: 500;
    color: var(--fmf-fg);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 4px;
}
.fmf-field__required {
    color: var(--fmf-danger);
    font-weight: 600;
}
.fmf-field__optional {
    margin-left: auto;
    font-weight: 400;
    color: var(--fmf-fg-muted);
    font-size: var(--fmf-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fmf-field__input-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--fmf-border-strong);
    border-radius: var(--fmf-radius-sm);
    background: var(--fmf-bg-elev);
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}
/* Quando o wrap contém Tom Select, o dropdown precisa escapar do overflow:hidden.
   Sem isto o dropdown fica clipado e parece vazio. O Tom Select já tem sua
   própria borda no .ts-control, então não precisamos da borda do wrap. */
.fmf-field__input-wrap:has(> .ts-wrapper) {
    overflow: visible;
    border: 0;
    background: transparent;
}
.fmf-field__input-wrap:has(> .ts-wrapper):focus-within {
    box-shadow: none;
}
.fmf-field__input-wrap:focus-within {
    border-color: var(--fmf-accent);
    box-shadow: 0 0 0 3px rgba(55, 48, 163, .12);
}

/* Reset explícito vs. regra global input[type=...] legacy.
   Seletor filho-direto ganha especificidade necessária pra derrotar o legacy. */
.fmf-field__input-wrap > .fmf-field__input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0 12px;
    height: 38px;
    background: transparent;
    font: inherit;
    font-size: var(--fmf-text-base);
    color: var(--fmf-fg);
    outline: 0;
    box-shadow: none;
    border-radius: 0;
}
.fmf-field__input-wrap > .fmf-field__input:focus {
    border: 0;
    box-shadow: none;
    outline: 0;
}
.fmf-field__input.num,
.fmf-field__input[type="number"] {
    font-family: var(--fmf-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: right;
}
.fmf-field__input::placeholder { color: var(--fmf-fg-muted); }

.fmf-field__affix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--fmf-bg-muted);
    color: var(--fmf-fg-muted);
    font-size: var(--fmf-text-sm);
    font-weight: 500;
    flex-shrink: 0;
    user-select: none;
}
.fmf-field__prefix { border-right: 1px solid var(--fmf-border-subtle); }
.fmf-field__suffix { border-left: 1px solid var(--fmf-border-subtle); }

.fmf-field__help {
    font-size: var(--fmf-text-xs);
    color: var(--fmf-fg-muted);
    line-height: 1.4;
}
.fmf-field__help svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }

/* Campo com ícone prefix (search, calendar) em vez de texto */
.fmf-field__input-wrap > .fmf-field__icon:first-child {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: var(--fmf-fg-muted);
}
.fmf-field__icon svg {
    width: 14px; height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Estados */
.fmf-field--error .fmf-field__input-wrap { border-color: var(--fmf-danger); }
.fmf-field--error .fmf-field__input-wrap:focus-within { box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.fmf-field--error .fmf-field__help { color: var(--fmf-danger); }
.fmf-field--error .fmf-field__help svg { stroke: var(--fmf-danger); }

/* Textarea dentro do wrap: height livre, padding completo (ignora regra height:38px do input base). */
.fmf-field__input-wrap > textarea.fmf-field__input {
    height: auto;
    min-height: 72px;
    padding: 10px 12px;
    resize: vertical;
}

/* =============================================================
   v2::stat-tile — cartão de métrica (dashboard, headers de página)

   Uso: <div class="fmf-stat-tile">
            <div class="fmf-stat-tile__label">Saldo a pagar</div>
            <div class="fmf-stat-tile__value">R$ 42.380,00</div>
            <div class="fmf-stat-tile__delta is-negative">−R$ 1.240 vs mês passado</div>
          </div>
   ============================================================= */

.fmf-stat-tile {
    background: var(--fmf-bg-elev);
    border: 1px solid var(--fmf-border);
    border-radius: var(--fmf-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fmf-stat-tile__label {
    font-size: var(--fmf-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fmf-fg-muted);
    font-weight: 600;
}
.fmf-stat-tile__value {
    font-family: var(--fmf-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: 22px;
    font-weight: 600;
    color: var(--fmf-fg);
    line-height: 1.1;
    margin-top: 2px;
}
.fmf-stat-tile__delta {
    font-size: var(--fmf-text-xs);
    color: var(--fmf-fg-muted);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.fmf-stat-tile__delta.is-positive { color: var(--fmf-success); }
.fmf-stat-tile__delta.is-negative { color: var(--fmf-danger); }

/* =============================================================
   v2::empty-state — placeholder pra lista vazia

   Uso: <div class="fmf-empty-state">
            <div class="fmf-empty-state__icon"><svg .../></div>
            <h3 class="fmf-empty-state__title">Nenhum registro</h3>
            <p class="fmf-empty-state__body">Texto explicativo com CTA.</p>
          </div>
   Coexiste com .empty-state legacy (seletores .fmf-* não colidem).
   ============================================================= */

.fmf-empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--fmf-fg-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.fmf-empty-state__icon {
    width: 48px; height: 48px;
    border-radius: var(--fmf-radius-pill);
    background: var(--fmf-bg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fmf-fg-muted);
    margin-bottom: 4px;
}
.fmf-empty-state__icon svg { width: 22px; height: 22px; }
.fmf-empty-state__title {
    margin: 0;
    font-size: var(--fmf-text-md);
    font-weight: 600;
    color: var(--fmf-fg);
}
.fmf-empty-state__body {
    margin: 0;
    font-size: var(--fmf-text-sm);
    max-width: 42ch;
    line-height: 1.5;
}

/* =============================================================
   v2::skeleton — placeholder de loading
   ============================================================= */

.fmf-skeleton {
    display: inline-block;
    background: linear-gradient(90deg, var(--fmf-bg-muted) 0%, var(--fmf-border) 50%, var(--fmf-bg-muted) 100%);
    background-size: 200% 100%;
    border-radius: var(--fmf-radius-sm);
    animation: fmf-skeleton-pulse 1.6s ease-in-out infinite;
    color: transparent;
    user-select: none;
}
.fmf-skeleton--text { height: 1em; width: 100%; }
.fmf-skeleton--line { height: 10px; width: 100%; display: block; }
.fmf-skeleton--avatar { width: 32px; height: 32px; border-radius: var(--fmf-radius-pill); }
.fmf-skeleton--tile { height: 72px; width: 100%; display: block; }

@keyframes fmf-skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Respeita preferência do usuário por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .fmf-skeleton { animation: none; background: var(--fmf-border); }
}

/* =============================================================
   v2::toast — notificação transitória

   Uso: container <div class="fmf-toast-region" aria-live="polite"></div>
   fica no final do body. JS insere:
   <div class="fmf-toast fmf-toast--success" role="status">
     <svg class="fmf-toast__icon">...</svg>
     <div class="fmf-toast__body">Salvo com sucesso.</div>
     <button class="fmf-toast__close" aria-label="Fechar">×</button>
   </div>
   ============================================================= */

.fmf-toast-region {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
.fmf-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--fmf-bg-elev);
    border: 1px solid var(--fmf-border);
    border-left: 3px solid var(--fmf-fg-muted);
    border-radius: var(--fmf-radius-sm);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .12);
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg);
    pointer-events: auto;
    min-width: 280px;
    max-width: 420px;
    animation: fmf-toast-in .18s ease-out;
}
.fmf-toast--success { border-left-color: var(--fmf-success); }
.fmf-toast--warning { border-left-color: var(--fmf-warning); }
.fmf-toast--danger  { border-left-color: var(--fmf-danger); }
.fmf-toast--info    { border-left-color: var(--fmf-info); }
.fmf-toast__icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.fmf-toast--success .fmf-toast__icon { color: var(--fmf-success); }
.fmf-toast--warning .fmf-toast__icon { color: var(--fmf-warning); }
.fmf-toast--danger  .fmf-toast__icon { color: var(--fmf-danger); }
.fmf-toast--info    .fmf-toast__icon { color: var(--fmf-info); }
.fmf-toast__body { flex: 1; line-height: 1.4; }
.fmf-toast__close {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--fmf-fg-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 16px;
    line-height: 1;
    border-radius: var(--fmf-radius-sm);
}
.fmf-toast__close:hover { color: var(--fmf-fg); background: var(--fmf-bg-muted); }

@keyframes fmf-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .fmf-toast { animation: none; }
}

/* =============================================================
   v2::segmented — controle segmentado (tabs compactos, toggle)

   Uso: <div class="fmf-segmented" role="tablist">
            <button class="fmf-segmented__item is-active" role="tab">Todos</button>
            <button class="fmf-segmented__item" role="tab">Pendentes</button>
            <button class="fmf-segmented__item" role="tab">Pagos</button>
          </div>
   ============================================================= */

.fmf-segmented {
    display: inline-flex;
    align-items: stretch;
    background: var(--fmf-bg-muted);
    border: 1px solid var(--fmf-border);
    border-radius: var(--fmf-radius-sm);
    padding: 2px;
    gap: 0;
}
.fmf-segmented__item {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 5px 12px;
    font: inherit;
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: background .12s ease, color .12s ease;
    white-space: nowrap;
}
.fmf-segmented__item:hover { color: var(--fmf-fg); }
.fmf-segmented__item.is-active {
    background: var(--fmf-bg-elev);
    color: var(--fmf-fg);
    box-shadow: 0 0 0 1px var(--fmf-border);
}
.fmf-segmented__item:focus-visible { outline: 2px solid var(--fmf-accent); outline-offset: 2px; }

/* =============================================================
   v2::filter-chip — chip removível (facetas ativas num filtro)

   Uso: <button class="fmf-filter-chip">
            Status: Pago
            <span class="fmf-filter-chip__remove" aria-label="Remover">×</span>
          </button>
   ============================================================= */

.fmf-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: var(--fmf-accent-soft);
    color: var(--fmf-accent-text);
    border: 0;
    border-radius: var(--fmf-radius-pill);
    font: inherit;
    font-size: var(--fmf-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background .12s ease;
}
.fmf-filter-chip:hover { background: #e0e7ff; }
.fmf-filter-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: var(--fmf-radius-pill);
    font-size: 14px;
    line-height: 1;
    color: inherit;
    opacity: .7;
}
.fmf-filter-chip:hover .fmf-filter-chip__remove { opacity: 1; }
.fmf-filter-chip:focus-visible { outline: 2px solid var(--fmf-accent); outline-offset: 2px; }

/* =============================================================
   v2::kbd — tecla de atalho (documentação e hints inline)

   Uso: Aperte <kbd class="fmf-kbd">Ctrl</kbd> + <kbd class="fmf-kbd">K</kbd>
   ============================================================= */

.fmf-kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: var(--fmf-font-mono);
    font-size: var(--fmf-text-xs);
    line-height: 1.4;
    color: var(--fmf-fg-muted);
    background: var(--fmf-bg-muted);
    border: 1px solid var(--fmf-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    vertical-align: 1px;
}

/* =============================================================
   v2::ferias-detalhe — construções específicas da tela
   /ferias/colaborador/{id}. Scoped via classes próprias (prefixo
   .fmf-fd-*) porque são padrões visuais únicos dessa tela que
   não viram primitiva canônica.
   ============================================================= */

/* Card de período */
.fmf-fd-periodo {
    background: var(--fmf-bg-elev);
    border: 1px solid var(--fmf-border);
    border-left: 3px solid var(--fmf-border-strong);
    border-radius: var(--fmf-radius);
    padding: 14px 16px;
}
.fmf-fd-periodo + .fmf-fd-periodo { margin-top: 12px; }
.fmf-fd-periodo--em_aquisicao       { border-left-color: var(--fmf-border-strong); }
.fmf-fd-periodo--disponivel         { border-left-color: var(--fmf-success); }
.fmf-fd-periodo--em_gozo            { border-left-color: var(--fmf-info); }
.fmf-fd-periodo--quitado            { border-left-color: var(--fmf-border-strong); opacity: .75; }
.fmf-fd-periodo--vencido            { border-left-color: var(--fmf-danger); background: #fffafa; }
.fmf-fd-periodo--historico_faltante { border-left-color: #a855f7; background: #faf5ff; }

/* Cabeçalho do período: uma linha só no desktop, título + intervalo + limite + badge. */
.fmf-fd-periodo__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.fmf-fd-periodo__title {
    margin: 0;
    font-size: var(--fmf-text-md);
    font-weight: 600;
    color: var(--fmf-fg);
}
.fmf-fd-periodo__range {
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg-muted);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.fmf-fd-periodo__range .sep { margin: 0 4px; color: var(--fmf-border-strong); }
.fmf-fd-periodo__limite {
    font-size: var(--fmf-text-xs);
    color: var(--fmf-fg-muted);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.fmf-fd-periodo__limite strong { color: var(--fmf-fg); font-weight: 500; }
.fmf-fd-periodo__badge { margin-left: auto; }

/* Alerta "em aquisição" — linha fina com ícone info. */
.fmf-fd-aquisicao-nota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg-muted);
    padding: 6px 0;
    line-height: 1.45;
}
.fmf-fd-aquisicao-nota [data-icon] {
    flex-shrink: 0;
    color: var(--fmf-fg-muted);
    margin-top: 1px;
}
.fmf-fd-aquisicao-nota strong { color: var(--fmf-fg); font-weight: 500; }

/* Barra de saldo segmentada: 3 segmentos (gozados=verde, vendidos=info, saldo/projeção=muted).
   Altura 10px, cantos arredondados. Legenda inline embaixo com .fmf-status-dot reutilizado. */
.fmf-fd-saldo {
    margin: 8px 0 12px;
}
.fmf-fd-saldo__bar {
    display: flex;
    height: 10px;
    background: var(--fmf-border-subtle);
    border-radius: var(--fmf-radius-pill);
    overflow: hidden;
}
.fmf-fd-saldo__seg {
    height: 100%;
    transition: flex-basis .18s ease;
}
.fmf-fd-saldo__seg--gozados  { background: var(--fmf-success); }
.fmf-fd-saldo__seg--vendidos { background: var(--fmf-info); }
.fmf-fd-saldo__seg--saldo    { background: var(--fmf-border-strong); }
.fmf-fd-saldo--projecao .fmf-fd-saldo__seg--saldo { background: var(--fmf-border-strong); opacity: .7; }

.fmf-fd-saldo__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 8px;
    font-size: var(--fmf-text-xs);
    color: var(--fmf-fg-muted);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.fmf-fd-saldo__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.fmf-fd-saldo__legend-item strong {
    color: var(--fmf-fg);
    font-weight: 500;
}

/* Lista de eventos dentro do período — .fmf-list mais compacto (sem borda externa,
   apenas separador interno) porque já está dentro do card do período. */
.fmf-fd-eventos.fmf-list {
    border: 0;
    border-top: 1px solid var(--fmf-border);
    border-radius: 0;
    margin-top: 8px;
}
.fmf-fd-eventos .fmf-list-row {
    padding: 8px 0;
    min-height: 44px;
    grid-template-columns: 32px minmax(0,1fr) auto auto;
    gap: 12px;
}
.fmf-fd-eventos .fmf-list-row__value {
    font-size: var(--fmf-text-sm);
}

/* Rodapé do período — botão "Registrar gozo ou venda" e ações de quitação. */
.fmf-fd-periodo__footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--fmf-border-subtle);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Header alerta global compactado — mesmo markup nas 3 variantes.
   Ícone inline, sem padding excessivo, mas mantém border-left colorido. */
.fmf-fd-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--fmf-border);
    border-left: 3px solid var(--fmf-fg-muted);
    border-radius: var(--fmf-radius-sm);
    background: var(--fmf-bg-elev);
    font-size: var(--fmf-text-sm);
    line-height: 1.45;
    color: var(--fmf-fg);
}
.fmf-fd-alert__icon { flex-shrink: 0; margin-top: 1px; color: var(--fmf-fg-muted); }
.fmf-fd-alert__body { flex: 1; }
.fmf-fd-alert__body strong { font-weight: 600; }
.fmf-fd-alert--critico  { border-left-color: var(--fmf-danger);  background: #fef2f2; }
.fmf-fd-alert--critico  .fmf-fd-alert__icon { color: var(--fmf-danger); }
.fmf-fd-alert--vermelho { border-left-color: var(--fmf-danger);  background: #fef2f2; }
.fmf-fd-alert--vermelho .fmf-fd-alert__icon { color: var(--fmf-danger); }
.fmf-fd-alert--amarelo  { border-left-color: var(--fmf-warning); background: #fffbeb; }
.fmf-fd-alert--amarelo  .fmf-fd-alert__icon { color: var(--fmf-warning); }

/* Mobile: tighten even further */
@media (max-width: 639.98px) {
    .fmf-fd-periodo { padding: 12px; }
    .fmf-fd-periodo__head { gap: 6px 10px; }
    .fmf-fd-periodo__badge { margin-left: 0; }
    .fmf-fd-saldo__legend { gap: 3px 10px; }
}

/* =============================================================
   v2::folha-detalhe — construções específicas da tela
   /folha/{id}. Scoped via prefixo .fmf-fp-*.
   ============================================================= */

/* Barra segmentada crédito vs débito — análoga à .fmf-fd-saldo mas
   com semântica binária (só 2 segmentos, sem distinção por tipo interno). */
.fmf-fp-barra {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: var(--fmf-bg-elev);
    border: 1px solid var(--fmf-border);
    border-radius: var(--fmf-radius);
}
.fmf-fp-barra__track {
    display: flex;
    height: 14px;
    background: var(--fmf-border-subtle);
    border-radius: var(--fmf-radius-pill);
    overflow: hidden;
}
.fmf-fp-barra__seg {
    height: 100%;
    transition: flex-basis .18s ease;
}
.fmf-fp-barra__seg--c { background: var(--fmf-success); }
.fmf-fp-barra__seg--d { background: var(--fmf-danger); }
.fmf-fp-barra__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg-muted);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.fmf-fp-barra__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fmf-fp-barra__legend-item strong {
    color: var(--fmf-fg);
    font-weight: 500;
}

/* Blocos de créditos/débitos detalhados */
.fmf-fp-detalhe__titulo {
    font-size: var(--fmf-text-md);
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--fmf-fg);
}
.fmf-fp-detalhe__vazio {
    padding: 20px;
    background: var(--fmf-bg-muted);
    border: 1px dashed var(--fmf-border);
    border-radius: var(--fmf-radius-sm);
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg-muted);
    text-align: center;
}

/* Linha de subtotal dentro de .fmf-list */
.fmf-list-row.fmf-fp-subtotal {
    background: var(--fmf-bg-muted);
    border-top: 2px solid var(--fmf-border-strong);
}
.fmf-list-row.fmf-fp-subtotal:hover { background: var(--fmf-bg-muted); }

/* Metadados de auditoria no rodapé */
.fmf-fp-meta {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--fmf-bg-muted);
    border: 1px solid var(--fmf-border);
    border-radius: var(--fmf-radius-sm);
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fmf-fp-meta strong { color: var(--fmf-fg); font-weight: 500; }
.fmf-fp-meta:empty { display: none; }

/* Painel do colaborador pra dar de acordo */
.fmf-fp-aceite {
    margin-top: 20px;
    padding: 20px;
    background: var(--fmf-accent-soft);
    border: 1px solid var(--fmf-accent);
    border-left: 4px solid var(--fmf-accent);
    border-radius: var(--fmf-radius);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.fmf-fp-aceite__text {
    flex: 1;
    min-width: 240px;
    font-size: var(--fmf-text-base);
    color: var(--fmf-fg);
    line-height: 1.5;
}
.fmf-fp-aceite__text strong { color: var(--fmf-accent-text); }

/* Linha com os 2 botões (Dar de acordo + Contestar) lado a lado */
.fmf-fp-aceite__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.fmf-fp-aceite__actions > form,
.fmf-fp-aceite__actions > button { margin: 0; }

/* ==========================================================================
   Ações do admin (botões Reabrir / Marcar paga / Cancelar etc.)
   Layout em linha horizontal, alinhado verticalmente pelo centro.
   ========================================================================== */
div.fmf-fp-actions {
    margin-top: 20px;
    padding: 16px;
    border-top: 1px solid var(--fmf-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}
/* Cada form dentro das ações vira flex-item alinhado horizontalmente com
   seus próprios filhos (input+botão do "marcar paga"). Usa alta
   especificidade pra vencer o default block do browser. */
div.fmf-fp-actions > form,
div.fmf-fp-actions > details,
div.fmf-fp-actions > a.btn,
div.fmf-fp-actions .fmf-fp-actions__form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    vertical-align: middle;
}
div.fmf-fp-actions .fmf-fp-actions__date {
    padding: 8px 10px;
    border: 1px solid var(--fmf-border-strong);
    border-radius: var(--fmf-radius-sm);
    font: inherit;
    min-height: 38px;
    box-sizing: border-box;
    line-height: 1.2;
}
div.fmf-fp-actions .btn {
    min-height: 38px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
/* <details> do cancelar: remove marcador e alinha como botão comum */
div.fmf-fp-actions .fmf-fp-actions__cancel { position: relative; }
div.fmf-fp-actions .fmf-fp-actions__cancel > summary { list-style: none; cursor: pointer; }
div.fmf-fp-actions .fmf-fp-actions__cancel > summary::-webkit-details-marker { display: none; }
div.fmf-fp-actions .fmf-fp-actions__cancel[open] > summary { margin-bottom: 8px; }

/* Form de cancelamento dentro do <details> */
.fmf-fp-cancel-form {
    margin-top: 10px;
    padding: 12px;
    background: var(--fmf-bg-muted);
    border: 1px solid var(--fmf-border);
    border-radius: var(--fmf-radius-sm);
    max-width: 520px;
}

@media (max-width: 639.98px) {
    .fmf-fp-aceite { flex-direction: column; align-items: stretch; }
    .fmf-fp-aceite__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .fmf-fp-aceite__actions > form,
    .fmf-fp-aceite__actions > button { width: 100%; }
    .fmf-fp-aceite form { width: 100%; }
    .fmf-fp-aceite button { width: 100%; }
    .fmf-fp-actions { flex-direction: column; align-items: stretch; }
    .fmf-fp-actions form { width: 100%; }
    .fmf-fp-actions .btn { width: 100%; }
}

/* =============================================================
   v2::modal — primitiva scoped (só Folha usa por enquanto, mas
   mantida aqui pra estar disponível em qualquer contexto sem CSS
   inline). Se um segundo módulo pegar, promove pra .fmf-modal canônica.
   ============================================================= */

.fmf-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fmf-modal[hidden] { display: none; }
.fmf-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}
.fmf-modal__panel {
    position: relative;
    background: var(--fmf-bg-elev);
    padding: 20px;
    border-radius: var(--fmf-radius);
    max-width: 720px;
    width: 92vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
}
.fmf-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.fmf-modal__close {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px;
    color: var(--fmf-fg-muted);
}
.fmf-modal__close:hover { color: var(--fmf-fg); }
.fmf-modal__footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--fmf-border);
}
@media (max-width: 639.98px) {
    .fmf-modal__panel { padding: 14px; width: 96vw; max-height: 95vh; }
    .fmf-modal__footer { flex-direction: column-reverse; }
    .fmf-modal__footer .btn { width: 100%; }
}

/* =============================================================
   v2::folha-contestacao — card de contestação da folha.
   Aberta = amarelo (ação pendente). Aceita = verde. Recusada = vermelho.
   ============================================================= */

.fmf-fp-contestacao {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--fmf-border);
    border-left-width: 4px;
    border-radius: var(--fmf-radius);
    background: var(--fmf-bg-elev);
}
.fmf-fp-contestacao + .fmf-fp-contestacao { margin-top: 12px; }

.fmf-fp-contestacao--aberta {
    border-color: var(--fmf-warning);
    background: #fffbeb;
}
.fmf-fp-contestacao--aceita {
    border-color: var(--fmf-success);
    background: #f0fdf4;
}
.fmf-fp-contestacao--recusada {
    border-color: var(--fmf-danger);
    background: #fef2f2;
}

.fmf-fp-contestacao__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.fmf-fp-contestacao__head svg {
    width: 20px; height: 20px;
    flex-shrink: 0;
}
.fmf-fp-contestacao--aberta   .fmf-fp-contestacao__head svg { color: var(--fmf-warning); }
.fmf-fp-contestacao--aceita   .fmf-fp-contestacao__head svg { color: var(--fmf-success); }
.fmf-fp-contestacao--recusada .fmf-fp-contestacao__head svg { color: var(--fmf-danger); }

.fmf-fp-contestacao__body {
    font-size: var(--fmf-text-base);
    color: var(--fmf-fg);
    line-height: 1.5;
    margin-bottom: 12px;
}
.fmf-fp-contestacao__body p { margin: 0; }

.fmf-fp-contestacao__form {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--fmf-border);
}

.fmf-fp-contestacao__cta {
    margin-top: 20px;
}
.fmf-fp-contestacao__cta > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fmf-fp-contestacao__cta > summary::-webkit-details-marker { display: none; }

.fmf-fp-contestacao__historico {
    margin-top: 20px;
}
.fmf-fp-contestacao__historico > summary {
    cursor: pointer;
    font-size: var(--fmf-text-sm);
    color: var(--fmf-fg-muted);
    padding: 8px 0;
}
.fmf-fp-contestacao__historico[open] > summary {
    margin-bottom: 8px;
}

@media (max-width: 639.98px) {
    .fmf-fp-contestacao__cta > summary.btn { width: 100%; justify-content: center; }
    .fmf-fp-contestacao__form button { width: 100%; }
}

/* =============================================================
   v2::impersonate — banner fixo no topo durante impersonação.
   Vermelho pra ser impossível ignorar. Empurra o app-shell pra baixo
   automaticamente via padding-top no body.has-impersonate-banner.
   ============================================================= */

.fmf-impersonate-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--fmf-danger);
    color: #fff;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: var(--fmf-text-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.fmf-impersonate-banner__body {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.fmf-impersonate-banner__body svg {
    flex-shrink: 0;
    width: 16px; height: 16px;
}
.fmf-impersonate-banner__action { margin: 0; }
.fmf-impersonate-banner__action .btn {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}
.fmf-impersonate-banner__action .btn:hover {
    background: rgba(255, 255, 255, .25);
}

/* Empurra o conteúdo pra baixo do banner. Altura ~38px com padding/borda. */
body.has-impersonate-banner { padding-top: 40px; }

@media (max-width: 639.98px) {
    .fmf-impersonate-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 12px;
    }
    .fmf-impersonate-banner__action .btn { width: 100%; }
    body.has-impersonate-banner { padding-top: 88px; }
}

/* =============================================================
   v2::folha-conferencia — tabela de comparação PDF × Folha interna.
   Totais (Total de Vencimentos, Total de Descontos, Valor Líquido)
   aparecem separados das rubricas normais, com fundo destacado e
   tipografia reforçada. Separador visual divide as duas seções.
   ============================================================= */

.fmf-conf-list__totais-sep {
    grid-column: 1 / -1;
    border-top: 2px solid var(--fmf-border-strong);
    margin: 4px 0 0;
}

.fmf-conf-list__total {
    background: var(--fmf-bg-muted);
}
.fmf-conf-list__total:hover { background: var(--fmf-bg-muted); }
.fmf-conf-list__total .fmf-list-row__title {
    font-weight: 600;
    color: var(--fmf-fg);
}
.fmf-conf-list__total .fmf-list-row__value {
    font-weight: 600;
}