/* ---------- 0. Tipografia (Inter, hospedada localmente) ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                   U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   MultiGestor — folha de estilo base
   Tokens de design + componentes. Carregada em todas as telas pelo header.
   A cor de destaque (--accent) e a cor da barra lateral vêm das
   Configurações da empresa e são injetadas inline pelo header.php.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* superfícies e texto (modo claro) */
    --bg:            #f6f7f9;
    --surface:       #ffffff;
    --surface-2:     #f8fafc;
    --surface-3:     #f1f5f9;
    --border:        #e6e9ee;
    --border-strong: #d4dae3;
    --text:          #0f172a;
    --text-muted:    #64748b;
    --text-faint:    #94a3b8;

    /* destaque (sobrescrito pelo tema da empresa) */
    --accent:        #0ea5e9;
    --accent-text:   #ffffff;
    --accent-soft:   color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-ring:   color-mix(in srgb, var(--accent) 22%, transparent);

    /* semânticas */
    --ok:      #16a34a;
    --warn:    #d97706;
    --danger:  #dc2626;

    /* barra lateral */
    --side:        #0f172a;
    --side-text:   #cbd5e1;
    --side-muted:  #64748b;
    --side-hover:  rgba(255,255,255,.06);
    --side-border: rgba(255,255,255,.08);

    /* forma e profundidade */
    --r-sm: 6px;
    --r:    8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --sh:    0 2px 4px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.07);
    --sh-lg: 0 8px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);
    --sh-pop:0 12px 32px rgba(15,23,42,.14);

    --t: .15s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Base ---------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text);
}
/* números alinhados em tabelas/valores */
.tabular, .table-z td, .money { font-variant-numeric: tabular-nums; }

h1 { letter-spacing: -.02em; }
h2, h3 { letter-spacing: -.01em; }

::selection { background: var(--accent-ring); }

/* barra de rolagem discreta */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. Ícones (sprite Lucide) ---------- */
.ic {
    width: 1.15em; height: 1.15em;
    display: inline-block; vertical-align: -.18em;
    flex: 0 0 auto; stroke-width: 2;
}
.ic-sm { width: 1em;    height: 1em; }
.ic-lg { width: 1.4em;  height: 1.4em; }
.ic-xl { width: 1.75em; height: 1.75em; }

/* ---------- 4. Barra lateral ---------- */
aside { background: var(--side); }

.nav-link {
    display: flex; align-items: center; gap: .625rem;
    padding: .45rem .625rem; margin: 1px 0;
    border-radius: var(--r);
    color: var(--side-text); font-size: .8125rem; font-weight: 450;
    position: relative; transition: background var(--t), color var(--t);
}
.nav-link .ic { width: 16px; height: 16px; opacity: .75; transition: opacity var(--t); }
.nav-link:hover { background: var(--side-hover); color: #fff; }
.nav-link:hover .ic { opacity: 1; }
.nav-link.active {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: #fff; font-weight: 550;
}
.nav-link.active .ic { opacity: 1; color: color-mix(in srgb, var(--accent) 65%, #fff); }
.nav-link.active::before {
    content: ''; position: absolute; left: -.625rem; top: 20%; bottom: 20%;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}

.nav-group { padding: .375rem 0; }
.nav-group-title {
    padding: .25rem .75rem; font-size: .6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--side-muted);
}

/* grupos recolhíveis */
.nav-sec { margin-bottom: 1px; }
.nav-sec > summary {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .625rem; font-size: .6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--side-muted); cursor: pointer; list-style: none;
    border-radius: var(--r); user-select: none; transition: color var(--t), background var(--t);
}
.nav-sec > summary::-webkit-details-marker { display: none; }
.nav-sec > summary::marker { content: ''; }
.nav-sec > summary:hover { background: var(--side-hover); color: #e2e8f0; }
.nav-sec > summary .chev { margin-left: auto; transition: transform .2s ease; opacity: .5; }
.nav-sec > summary .chev.ic { width: 14px; height: 14px; }
.nav-sec[open] > summary { color: #e2e8f0; }
.nav-sec[open] > summary .chev { transform: rotate(90deg); }
.nav-sec.has-active > summary { color: #e2e8f0; }
.nav-sec.has-active > summary .dot {
    width: .375rem; height: .375rem; border-radius: 99px; background: var(--accent);
    display: inline-block; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nav-sec-body {
    padding: .125rem 0 .375rem .375rem; margin-left: .625rem;
    border-left: 1px solid var(--side-border);
}
/* sub-grupo dentro de um grupo (ex.: Orçamentos) */
.nav-sec .nav-sec > summary { text-transform: none; font-size: .78125rem; letter-spacing: 0; font-weight: 500; color: var(--side-text); }
.nav-sec .nav-sec > summary .ic:first-child { width: 16px; height: 16px; opacity: .75; }

/* seletor de empresa */
.emp-btn {
    display: flex; align-items: center; gap: .5rem;
    padding: .625rem .75rem; border-radius: var(--r-lg);
    background: rgba(255,255,255,.05); border: 1px solid var(--side-border);
    color: #f1f5f9; font-weight: 550; font-size: .8125rem;
    cursor: pointer; list-style: none; transition: background var(--t), border-color var(--t);
}
.emp-btn::-webkit-details-marker { display: none; }
.emp-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.emp-pop {
    margin-top: .375rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: .375rem; box-shadow: var(--sh-pop);
}

/* ---------- 5. Botões ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .875rem; border-radius: var(--r);
    font-size: .8125rem; font-weight: 550; line-height: 1.25rem;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: background var(--t), border-color var(--t), box-shadow var(--t), color var(--t);
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn:active { transform: translateY(.5px); }
.btn .ic { width: 15px; height: 15px; }

.btn-primary   { background: var(--accent); color: var(--accent-text); box-shadow: var(--sh-sm); }
.btn-primary:hover   { filter: brightness(.93); }
.btn-success   { background: var(--ok); color: #fff; box-shadow: var(--sh-sm); }
.btn-success:hover   { filter: brightness(.93); }
.btn-danger    { background: var(--danger); color: #fff; box-shadow: var(--sh-sm); }
.btn-danger:hover    { filter: brightness(.93); }
.btn-warning   { background: var(--warn); color: #fff; box-shadow: var(--sh-sm); }
.btn-warning:hover   { filter: brightness(.93); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--sh-sm); }
.btn-secondary:hover { background: var(--surface-3); }
.btn-ghost     { background: transparent; color: var(--text-muted); }
.btn-ghost:hover     { background: var(--surface-3); color: var(--text); }
.btn-sm { padding: .3125rem .625rem; font-size: .78125rem; }
.btn-lg { padding: .625rem 1.125rem; font-size: .875rem; }
.btn[disabled], .btn:disabled { opacity: .55; pointer-events: none; }

/* botões-ícone de lista */
.iaction {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--r-sm);
    color: #fff; font-size: .85rem; cursor: pointer; text-decoration: none; border: 0;
    transition: filter var(--t), box-shadow var(--t);
}
.iaction:hover { filter: brightness(.92); }
.iaction .ic { width: 15px; height: 15px; }

/* ---------- 6. Menus suspensos ---------- */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu .pop {
    position: absolute; z-index: 30; margin-top: .375rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-pop);
    min-width: 210px; overflow: hidden; padding: .25rem;
    animation: popIn .12s ease-out;
}
.menu .pop.right { right: 0; }
.menu .pop a, .menu .pop button {
    display: flex; align-items: center; gap: .5rem;
    width: 100%; text-align: left; padding: .4375rem .625rem;
    font-size: .8125rem; color: var(--text); background: none; border: 0;
    cursor: pointer; border-radius: var(--r-sm);
}
.menu .pop a:hover, .menu .pop button:hover { background: var(--surface-3); }
.menu .pop .ic { width: 15px; height: 15px; color: var(--text-muted); }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- 7. Formulários ---------- */
.input, input[type=text], input[type=number], input[type=date], input[type=time],
input[type=email], input[type=password], input[type=search], select, textarea {
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.input {
    width: 100%; border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--text); padding: .4375rem .625rem;
    border-radius: var(--r); font-size: .8125rem; line-height: 1.35rem;
}
.input::placeholder { color: var(--text-faint); }
.input:hover { border-color: var(--text-faint); }
.input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.input:disabled, .input[readonly] { background: var(--surface-3); color: var(--text-muted); }
.input.is-error { border-color: var(--danger); }
.input.is-error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }

.label {
    display: block; font-size: .6875rem; font-weight: 600; color: var(--text-muted);
    margin-bottom: .3125rem; text-transform: uppercase; letter-spacing: .04em;
}
.help { font-size: .75rem; color: var(--text-faint); margin-top: .25rem; }

/* ---------- 8. Cartões ---------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 1.125rem;
}
.card-hover { transition: box-shadow var(--t), border-color var(--t), transform var(--t); }
.card-hover:hover { box-shadow: var(--sh); border-color: var(--border-strong); }
.card-title {
    font-size: .875rem; font-weight: 650; color: var(--text);
    display: flex; align-items: center; gap: .5rem;
}

/* cartão de indicador (KPI) */
.stat { display: block; }
.stat .stat-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.stat .stat-label {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted);
}
.stat .stat-ic {
    width: 30px; height: 30px; border-radius: var(--r); display: flex;
    align-items: center; justify-content: center;
    background: var(--surface-3); color: var(--text-muted);
}
.stat .stat-ic .ic { width: 16px; height: 16px; }
.stat .stat-value {
    font-size: 1.5rem; font-weight: 680; letter-spacing: -.02em;
    margin-top: .625rem; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.stat .stat-foot { font-size: .75rem; color: var(--text-faint); margin-top: .25rem; }
.stat-accent .stat-ic { background: var(--accent-soft); color: var(--accent); }
.stat-ok      .stat-ic { background: color-mix(in srgb, var(--ok) 12%, transparent);     color: var(--ok); }
.stat-warn    .stat-ic { background: color-mix(in srgb, var(--warn) 14%, transparent);   color: var(--warn); }
.stat-danger  .stat-ic { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.txt-ok { color: var(--ok); } .txt-warn { color: var(--warn); } .txt-danger { color: var(--danger); }

/* etiquetas de status */
.chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .1875rem .5rem; border-radius: 99px;
    font-size: .6875rem; font-weight: 600; line-height: 1rem;
    background: var(--surface-3); color: var(--text-muted);
    border: 1px solid var(--border);
}
.chip .ic { width: 12px; height: 12px; }
.chip-ok     { background: color-mix(in srgb, var(--ok) 10%, transparent);     color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.chip-warn   { background: color-mix(in srgb, var(--warn) 12%, transparent);   color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.chip-danger { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.chip-accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }

/* ---------- 9. Tabelas ---------- */
.table-z { width: 100%; border-collapse: collapse; }
.table-z th {
    background: var(--surface-2); padding: .5rem .75rem; text-align: left;
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); font-weight: 600; white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.table-z th:first-child { border-top-left-radius: var(--r); }
.table-z th:last-child  { border-top-right-radius: var(--r); }
.table-z td {
    padding: .5625rem .75rem; border-top: 1px solid var(--border);
    font-size: .8125rem; color: var(--text);
}
.table-z tbody tr { transition: background var(--t); }
.table-z tbody tr:hover td { background: var(--surface-2); }
.table-z .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* estado vazio */
.empty {
    text-align: center; padding: 2.5rem 1rem; color: var(--text-faint);
}
.empty .ic { width: 32px; height: 32px; opacity: .5; margin-bottom: .5rem; }
.empty-title { font-size: .875rem; font-weight: 600; color: var(--text-muted); }

/* ---------- 10. Barra superior móvel ---------- */
.topbar-mobile { display: none; }
.sb-backdrop   { display: none; }

@media (max-width: 767px) {
    aside {
        transform: translateX(-100%); transition: transform .22s ease;
        z-index: 60; width: 82vw; max-width: 20rem;
        box-shadow: 0 0 40px rgba(0,0,0,.5);
    }
    body.sb-open aside { transform: translateX(0); }
    body.sb-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; }
    main { margin-left: 0 !important; padding: .85rem !important; padding-top: 4rem !important; }

    .topbar-mobile {
        display: flex; align-items: center; gap: .6rem;
        position: fixed; top: 0; left: 0; right: 0; height: 3.25rem; z-index: 50;
        background: var(--side); color: #fff; padding: 0 .75rem;
        border-bottom: 1px solid var(--side-border); box-shadow: 0 1px 8px rgba(0,0,0,.18);
    }
    .topbar-mobile .mb-burger { background: none; border: 0; color: #fff; padding: .25rem .4rem; cursor: pointer; display: flex; }
    .topbar-mobile .mb-burger .ic { width: 22px; height: 22px; }
    .topbar-mobile .mb-title { font-weight: 600; font-size: .9375rem; }

    /* evita zoom automático do iOS ao focar campo (precisa de >=16px) */
    .input, input, select, textarea { font-size: 16px !important; }
    /* alvos de toque maiores */
    .btn { padding: .625rem 1rem; }
    .btn-sm { padding: .4375rem .8rem; font-size: .8125rem; }
    .iaction { width: 38px; height: 38px; }
    .card { padding: 1rem; }
    .table-z th, .table-z td { padding: .5rem .55rem; }
    .menu .pop { min-width: 200px; }
    .sino-wrap { top: auto !important; bottom: 16px !important; right: 16px !important; transform: none !important; }
    .sino-pop  { right: 0 !important; left: auto !important; top: auto !important; bottom: 54px !important; transform: none !important; width: min(330px,92vw) !important; }
}

/* ---------- 11. Impressão ---------- */
@media print {
    aside, .topbar-mobile, .sb-backdrop, .sino-wrap { display: none !important; }
    main { margin-left: 0 !important; padding: 0 !important; }
    .btn, .no-print { display: none !important; }
    .card { box-shadow: none !important; border-color: #ddd !important; }
}

/* ---------- 12. Modo escuro (tokens) ---------- */
body.tema-escuro {
    --bg:            #0b1220;
    --surface:       #151f31;
    --surface-2:     #1b273c;
    --surface-3:     #24324a;
    --border:        #2a3850;
    --border-strong: #3a4a66;
    --text:          #e6edf7;
    --text-muted:    #94a3b8;
    --text-faint:    #6b7d95;
    --side-border:   rgba(255,255,255,.07);
    --sh-sm: 0 1px 2px rgba(0,0,0,.35);
    --sh:    0 4px 14px rgba(0,0,0,.4);
    --sh-lg: 0 10px 28px rgba(0,0,0,.5);
    --sh-pop:0 14px 34px rgba(0,0,0,.55);
    background: var(--bg) !important;
    color: var(--text);
}

/* Compatibilidade: os módulos ainda usam utilitários Tailwind fixos
   (bg-white, text-slate-700…). Enquanto não são migrados, mapeamos
   esses utilitários para os tokens no modo escuro. */
body.tema-escuro .bg-white { background: var(--surface) !important; }
body.tema-escuro .bg-slate-50, body.tema-escuro .bg-slate-100 { background: var(--bg) !important; }
body.tema-escuro .text-slate-800, body.tema-escuro .text-slate-700, body.tema-escuro .text-slate-600 { color: var(--text) !important; }
body.tema-escuro .text-slate-500, body.tema-escuro .text-slate-400 { color: var(--text-muted) !important; }
body.tema-escuro .border, body.tema-escuro .border-slate-200, body.tema-escuro .border-slate-300,
body.tema-escuro .border-b, body.tema-escuro .border-t { border-color: var(--border) !important; }
body.tema-escuro .divide-y > * + * { border-color: var(--border) !important; }
/* cartões de aviso coloridos -> tons escuros legíveis */
body.tema-escuro .bg-amber-50,  body.tema-escuro .bg-yellow-50  { background: #3a2e12 !important; }
body.tema-escuro .bg-green-50,  body.tema-escuro .bg-emerald-50 { background: #10301d !important; }
body.tema-escuro .bg-red-50,    body.tema-escuro .bg-rose-50    { background: #3a1718 !important; }
body.tema-escuro .bg-sky-50,    body.tema-escuro .bg-blue-50    { background: #0c2a3a !important; }
body.tema-escuro .border-amber-200, body.tema-escuro .border-amber-300, body.tema-escuro .border-amber-400 { border-color: #5b4a1f !important; }
body.tema-escuro .border-green-200, body.tema-escuro .border-green-300, body.tema-escuro .border-green-400 { border-color: #225c38 !important; }
body.tema-escuro .border-red-200,   body.tema-escuro .border-red-300,   body.tema-escuro .border-red-400   { border-color: #7f2a2b !important; }
body.tema-escuro .border-sky-200,   body.tema-escuro .border-blue-200 { border-color: #1e4a63 !important; }
body.tema-escuro .text-amber-600, body.tema-escuro .text-amber-700, body.tema-escuro .text-amber-800 { color: #fcd34d !important; }
body.tema-escuro .text-green-600, body.tema-escuro .text-green-700, body.tema-escuro .text-green-800 { color: #86efac !important; }
body.tema-escuro .text-red-600,   body.tema-escuro .text-red-700,   body.tema-escuro .text-red-800   { color: #fca5a5 !important; }
body.tema-escuro .text-yellow-600, body.tema-escuro .text-yellow-700 { color: #fde047 !important; }
body.tema-escuro .shadow, body.tema-escuro .shadow-sm, body.tema-escuro .shadow-md { box-shadow: var(--sh-sm) !important; }

/* ---------- 13. Utilitários próprios ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-title { font-size: 1.375rem; font-weight: 680; letter-spacing: -.02em; color: var(--text); }
.page-sub { font-size: .8125rem; color: var(--text-muted); margin-top: .125rem; }
.divider { height: 1px; background: var(--border); border: 0; margin: 1rem 0; }
.skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- 14. Sininho de avisos ---------- */
.sino-wrap { position: fixed; top: 50%; right: 14px; transform: translateY(-50%); z-index: 50; }
.sino-wrap > summary {
    list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 99px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh);
    display: flex; align-items: center; justify-content: center; position: relative;
    color: var(--text-muted); transition: box-shadow var(--t), color var(--t);
}
.sino-wrap > summary:hover { color: var(--accent); box-shadow: var(--sh-lg); }
.sino-wrap > summary::-webkit-details-marker { display: none; }
.sino-wrap > summary .ic { width: 19px; height: 19px; }
.sino-ic { display: inline-flex; transform-origin: 50% 15%; }
.sino-wrap > summary.tem-aviso .sino-ic { animation: sinoVibra 3s ease-in-out infinite; }
@keyframes sinoVibra {
    0%, 88%, 100% { transform: rotate(0); }
    90% { transform: rotate(-13deg); } 92% { transform: rotate(11deg); }
    94% { transform: rotate(-8deg); }  96% { transform: rotate(6deg); } 98% { transform: rotate(-3deg); }
}
.sino-badge {
    position: absolute; top: -3px; right: -3px; background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
    box-shadow: 0 0 0 2px var(--surface);
}
.sino-pop {
    position: absolute; right: 52px; top: 50%; transform: translateY(-50%);
    width: 340px; max-height: 80vh; overflow: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-pop); animation: popIn .12s ease-out;
}
.sino-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .625rem .875rem; border-bottom: 1px solid var(--border); background: var(--surface-2);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.sino-item { display: flex; gap: .625rem; align-items: flex-start; padding: .625rem .875rem; border-bottom: 1px solid var(--border); }
.sino-item:last-child { border-bottom: 0; }
.sino-item .sino-item-ic { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sino-item .sino-item-ic .ic { width: 15px; height: 15px; }
@media print { .sino-wrap { display: none; } }

/* ---------- 15. Marca e seletor de empresa na barra lateral ---------- */
.sb-brand {
    display: flex; align-items: center; gap: .625rem;
    padding: .875rem 1rem; border-bottom: 1px solid var(--side-border);
}
.sb-mark {
    width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.sb-mark .ic { width: 18px; height: 18px; }
.sb-brand-name { font-weight: 650; font-size: .9375rem; letter-spacing: -.01em; color: #fff; line-height: 1.2; }
.sb-brand-sub  { font-size: .6875rem; color: var(--side-muted); margin-top: .0625rem; }

.emp-logo { max-height: 26px; max-width: 74px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px 4px; flex: 0 0 auto; }
.emp-ic { width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.emp-ic .ic { width: 15px; height: 15px; }
.emp-btn .ic { opacity: .6; }
.emp-pop-title { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); padding: .375rem .5rem .25rem; }
.emp-item {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
    padding: .4375rem .5rem; font-size: .8125rem; color: var(--text);
    border: 0; background: none; cursor: pointer; border-radius: var(--r-sm);
}
.emp-item:hover { background: var(--surface-3); }
.emp-item.is-on { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
.emp-item-add { color: var(--accent); border-top: 1px solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: .25rem; padding-top: .5rem; }

/* KPI que exige atenção: contorno sutil no tom do cartão */
.stat-destaque { box-shadow: var(--sh-sm), 0 0 0 2px var(--accent-ring); }
.stat-danger.stat-destaque { box-shadow: var(--sh-sm), 0 0 0 2px color-mix(in srgb, var(--danger) 22%, transparent); }
.stat-warn.stat-destaque   { box-shadow: var(--sh-sm), 0 0 0 2px color-mix(in srgb, var(--warn) 24%, transparent); }

/* ==========================================================================
   FASE 2 — componentes globais
   ========================================================================== */

/* ---------- 16. Etiqueta extra ---------- */
.chip-info { background: color-mix(in srgb, #8b5cf6 12%, transparent); color: #7c3aed; border-color: color-mix(in srgb, #8b5cf6 28%, transparent); }
body.tema-escuro .chip-info { color: #c4b5fd; }

/* ---------- 17. Tabelas: cabeçalho fixo + rolagem ---------- */
/* O rodapé embrulha automaticamente toda tabela solta em um .table-wrap.
   A rolagem horizontal só é ligada no celular (media query da seção 10) —
   no desktop o wrapper não rola, o que permite o cabeçalho grudar na página. */
.table-wrap { max-width: 100%; }
@media (min-width: 768px) {
    .table-z thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--border); }
}
.table-z tbody tr:last-child td { border-bottom: 0; }
.table-z tr.linha-link { cursor: pointer; }
/* ---------- 18. Campos sem classe (módulos ainda não migrados) ---------- */
main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not(.input),
main select:not(.input), main textarea:not(.input) {
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    border-radius: var(--r); padding: .4375rem .625rem; font-size: .8125rem;
}
main input:not([type=checkbox]):not([type=radio]):not(.input):focus,
main select:not(.input):focus, main textarea:not(.input):focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
main input[type=checkbox], main input[type=radio] { accent-color: var(--accent); width: 15px; height: 15px; }
main input[type=file] { font-size: .8125rem; color: var(--text-muted); }
main input[type=file]::file-selector-button {
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    border-radius: var(--r-sm); padding: .3125rem .625rem; margin-right: .625rem;
    font: inherit; font-size: .78125rem; font-weight: 550; cursor: pointer;
}
main input[type=file]::file-selector-button:hover { background: var(--surface-3); }

/* agrupamento de formulário */
.form-sec { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.form-sec:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.form-sec-title {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-faint); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem;
}
/* barra de ações fixa no rodapé do formulário */
.form-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap;
    border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1.25rem;
}
.form-actions .esquerda { margin-right: auto; }

/* ---------- 19. Barra lateral recolhível ---------- */
aside { transition: width .18s ease; }
body.sb-mini:not(.sb-peek) aside { width: 4rem; }
body.sb-mini main  { margin-left: 4rem; }
body.sb-mini:not(.sb-peek) aside .nav-link span,
body.sb-mini:not(.sb-peek) aside .nav-sec > summary span:not(.dot),
body.sb-mini:not(.sb-peek) aside .sb-brand > div:not(.sb-mark),
body.sb-mini:not(.sb-peek) aside .emp-btn > *:not(.emp-ic):not(.emp-logo),
body.sb-mini:not(.sb-peek) aside .chev { display: none; }
body.sb-mini:not(.sb-peek) aside .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
body.sb-mini:not(.sb-peek) aside .nav-link.active::before { left: -.25rem; }
body.sb-mini:not(.sb-peek) aside .nav-sec > summary { justify-content: center; padding-left: 0; padding-right: 0; }
body.sb-mini:not(.sb-peek) aside .nav-sec-body { margin-left: 0; padding-left: 0; border-left: 0; }
body.sb-mini:not(.sb-peek) aside .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
body.sb-mini:not(.sb-peek) aside .emp-btn { justify-content: center; padding-left: 0; padding-right: 0; }
/* Recolhida: ao passar o mouse a barra abre sozinha, por cima do conteudo */
body.sb-mini.sb-peek aside { width: 16rem; z-index: 60; box-shadow: 0 0 32px rgba(2,6,23,.45); }
.sb-toggle {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; padding: .5rem; margin-top: .25rem;
    background: none; border: 0; border-top: 1px solid var(--side-border);
    color: var(--side-muted); cursor: pointer; font-size: .75rem;
}
.sb-toggle:hover { color: #e2e8f0; background: var(--side-hover); }
.sb-toggle .ic { width: 16px; height: 16px; transition: transform .18s ease; }
body.sb-mini .sb-toggle .ic { transform: rotate(180deg); }
/* o rotulo do botao mostra sempre o estado fixado, mesmo com a barra aberta pelo mouse */
.sb-toggle .t-mini { display: none; }
body.sb-mini .sb-toggle .t-mini { display: inline; }
body.sb-mini .sb-toggle .t-full { display: none; }
body.sb-mini:not(.sb-peek) .sb-toggle span { display: none; }
@media (max-width: 767px) { .sb-toggle { display: none; } body.sb-mini aside { width: 82vw; } body.sb-mini main { margin-left: 0 !important; } }

/* ---------- 20. Busca de módulos (Ctrl+K) ---------- */
.cmdk-back {
    position: fixed; inset: 0; z-index: 90; background: rgba(2,6,23,.55);
    backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 1rem 1rem;
}
.cmdk {
    width: 100%; max-width: 540px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(2,6,23,.45); overflow: hidden;
    animation: popIn .12s ease-out;
}
.cmdk-in { display: flex; align-items: center; gap: .625rem; padding: .875rem 1rem; border-bottom: 1px solid var(--border); }
.cmdk-in .ic { color: var(--text-faint); width: 17px; height: 17px; }
.cmdk-in input { flex: 1; border: 0; outline: 0; background: none; font-size: .9375rem; color: var(--text); }
.cmdk-in input::placeholder { color: var(--text-faint); }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: .375rem; }
.cmdk-item {
    display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem;
    border-radius: var(--r-sm); font-size: .8125rem; color: var(--text);
    text-decoration: none; cursor: pointer;
}
.cmdk-item .ic { width: 16px; height: 16px; color: var(--text-muted); }
.cmdk-item .cmdk-sec { margin-left: auto; font-size: .6875rem; color: var(--text-faint); }
.cmdk-item.on, .cmdk-item:hover { background: var(--accent-soft); color: var(--accent); }
.cmdk-item.on .ic, .cmdk-item:hover .ic { color: var(--accent); }
.cmdk-vazio { padding: 1.75rem; text-align: center; color: var(--text-faint); font-size: .8125rem; }
.cmdk-pe {
    display: flex; gap: 1rem; padding: .5rem .875rem; border-top: 1px solid var(--border);
    background: var(--surface-2); font-size: .6875rem; color: var(--text-faint);
}
kbd {
    font: inherit; font-size: .6875rem; border: 1px solid var(--border-strong); border-bottom-width: 2px;
    border-radius: 4px; padding: .0625rem .3125rem; background: var(--surface); color: var(--text-muted);
}

/* ---------- 21. Busca e rodapé da barra lateral ---------- */
.sb-busca {
    display: flex; align-items: center; gap: .5rem; width: calc(100% - 1rem);
    margin: .625rem .5rem 0; padding: .4375rem .625rem;
    background: rgba(255,255,255,.05); border: 1px solid var(--side-border);
    border-radius: var(--r); color: var(--side-muted); font-size: .8125rem; cursor: pointer;
    transition: background var(--t), color var(--t);
}
.sb-busca:hover { background: rgba(255,255,255,.09); color: #e2e8f0; }
.sb-busca .ic { width: 15px; height: 15px; }
.sb-kbd {
    font-size: .625rem; border: 1px solid var(--side-border); border-radius: 4px;
    padding: .0625rem .25rem; color: var(--side-muted); background: rgba(255,255,255,.04);
}
body.sb-mini:not(.sb-peek) .sb-busca { width: calc(100% - 1rem); justify-content: center; }
body.sb-mini:not(.sb-peek) .sb-busca span, body.sb-mini:not(.sb-peek) .sb-kbd { display: none; }

.sb-rodape { border-top: 1px solid var(--side-border); margin-top: .5rem; }
.sb-user {
    display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem;
    font-size: .75rem; color: var(--side-text); min-width: 0;
}
.sb-avatar {
    width: 24px; height: 24px; border-radius: 99px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); font-size: .6875rem; font-weight: 650; color: #fff;
}
body.sb-mini:not(.sb-peek) .sb-user { justify-content: center; padding-left: 0; padding-right: 0; }
body.sb-mini:not(.sb-peek) .sb-user .truncate { display: none; }

/* ---------- 22. Avisos (flash) ---------- */
.aviso {
    display: flex; align-items: flex-start; gap: .625rem;
    padding: .75rem .875rem; margin-bottom: 1rem;
    border: 1px solid var(--border); border-left-width: 3px;
    border-radius: var(--r); font-size: .8125rem;
    background: var(--surface); color: var(--text); box-shadow: var(--sh-sm);
}
.aviso .ic { width: 17px; height: 17px; margin-top: .0625rem; }
.aviso-ok     { border-left-color: var(--ok);     background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.aviso-ok     .ic { color: var(--ok); }
.aviso-danger { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.aviso-danger .ic { color: var(--danger); }
.aviso-warn   { border-left-color: var(--warn);   background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.aviso-warn   .ic { color: var(--warn); }
.aviso-accent { border-left-color: var(--accent); background: var(--accent-soft); }
.aviso-accent .ic { color: var(--accent); }

/* ==========================================================================
   FASE 3 — páginas públicas (cliente / colaborador, sem login)
   ========================================================================== */
.pub-body {
    background:
        radial-gradient(900px 400px at 50% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
        var(--bg);
    min-height: 100vh; padding: 2rem 1rem 3rem; margin: 0;
}
.pub { max-width: 46rem; margin: 0 auto; }
.pub-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; }
.pub-topo {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;
    padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.pub-emp-nome { font-weight: 680; font-size: 1.0625rem; letter-spacing: -.01em; }
.pub-emp-info { font-size: .75rem; color: var(--text-muted); line-height: 1.5; margin-top: .25rem; }
.pub-logo { max-height: 52px; max-width: 200px; object-fit: contain; margin-bottom: .625rem; display: block; }
.pub-doc-tipo { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); }
.pub-doc-num { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pub-corpo { padding: 1.5rem 1.75rem; }
.pub-sec { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 1.5rem 0 .5rem; }
.pub-sec:first-child { margin-top: 0; }
.pub-total { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.pub-total table { min-width: 16rem; }
.pub-total td { padding: .3125rem .5rem; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.pub-total tr:last-child td { border-top: 1px solid var(--border); padding-top: .625rem; font-size: 1.0625rem; font-weight: 700; }
.pub-rodape { text-align: center; font-size: .75rem; color: var(--text-faint); margin-top: 1.5rem; }
.pub-acoes { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.pub-aceite { display: flex; align-items: flex-start; gap: .625rem; font-size: .8125rem; line-height: 1.5; margin: 1rem 0 1.25rem; }
.pub-aceite input { margin-top: .1875rem; }
@media print {
    .pub-body { background: #fff; padding: 0; }
    .pub-doc { box-shadow: none; border: 0; border-radius: 0; }
    .pub-topo { background: #fff; }
    .noprint, .no-print { display: none !important; }
}

/* ---------- 23. Janelas modais ---------- */
/* Os módulos criam o modal como uma <div> com display:none/flex no atributo
   style. O rodapé marca essas divs com .modal-shim e cuida de Esc, clique
   no fundo, trava de rolagem e foco — sem precisar alterar cada módulo. */
.modal-shim { background: rgba(2,6,23,.55) !important; backdrop-filter: blur(2px); padding: 1rem; }
.modal-shim > * { animation: modalEntra .16s cubic-bezier(.2,.8,.3,1); max-height: 92vh; overflow-y: auto; }
@keyframes modalEntra { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
body.modal-aberto { overflow: hidden; }
/* cartão padrão para modais novos */
.modal-card {
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 1.25rem;
    width: 100%; max-width: 32rem;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .875rem; }

/* ---------- 24. Menu recolhido: ícones das seções ---------- */
/* Cada grupo tem um ícone próprio (.sec-ic), então a barra recolhida mostra
   um ícone por seção em vez de linhas vazias. */
.nav-sec > summary .sec-ic { width: 16px; height: 16px; opacity: .8; }
.nav-sec[open] > summary .sec-ic,
.nav-sec.has-active > summary .sec-ic { opacity: 1; }
.nav-sec.has-active > summary .sec-ic { color: var(--accent); }

body.sb-mini:not(.sb-peek) .nav-sec > summary { position: relative; padding: .5rem 0; }
body.sb-mini:not(.sb-peek) .nav-sec > summary .sec-ic { width: 18px; height: 18px; }
/* o pontinho de "seção ativa" vira um marcador no canto do ícone */
body.sb-mini:not(.sb-peek) .nav-sec > summary .dot {
    position: absolute; top: .375rem; right: .875rem;
    width: .3125rem; height: .3125rem; box-shadow: 0 0 0 2px var(--side);
}
/* recuo menor dentro dos grupos abertos, para o ícone ficar centralizado */
body.sb-mini:not(.sb-peek) .nav-sec-body { margin-left: 0; padding-left: 0; border-left: 0; }

/* ---------- 25. Dica do menu recolhido ---------- */
/* Fica fora da <aside> (que tem overflow e recortaria o balão): o rodapé
   posiciona este elemento em position:fixed ao lado do ícone. */
.sb-dica {
    position: fixed; z-index: 90; pointer-events: none;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: .3125rem .5rem; font-size: .75rem; font-weight: 500; white-space: nowrap;
    box-shadow: var(--sh-lg); opacity: 0; transition: opacity .12s ease;
}
.sb-dica.on { opacity: 1; }

/* rede de segurança: a lista de empresas nunca renderiza dentro da barra recolhida */
body.sb-mini:not(.sb-peek) .emp-pop { display: none; }

/* ---------- 26. Paginação de listas ---------- */
.paginacao {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-top: .875rem; padding-top: .875rem;
    border-top: 1px solid var(--border);
    font-size: .8125rem; color: var(--text-muted);
}
.pag-info { font-variant-numeric: tabular-nums; }
.pag-botoes { display: flex; align-items: center; gap: .25rem; margin: 0 auto; }
.pag-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 .5rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font-size: .8125rem; font-weight: 500;
    font-variant-numeric: tabular-nums; transition: background var(--t), border-color var(--t), color var(--t);
}
.pag-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.pag-btn .ic { width: 15px; height: 15px; }
.pag-btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.pag-btn.is-off { opacity: .35; pointer-events: none; }
.pag-sep { padding: 0 .125rem; color: var(--text-faint); }
.pag-pp { display: flex; align-items: center; gap: .375rem; white-space: nowrap; }
.pag-pp .input { width: auto; padding: .25rem 1.5rem .25rem .5rem; font-size: .78125rem; }
@media (max-width: 767px) {
    .paginacao { justify-content: center; }
    .pag-botoes { order: -1; width: 100%; justify-content: center; }
    .pag-pp { display: none; }
}

/* ---------- 27. Busca global (Ctrl+K): grupos e registros ---------- */
.cmdk-grupo {
    padding: .5rem .625rem .25rem; font-size: .625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint);
}
.cmdk-registros { border-top: 1px solid var(--border); margin-top: .25rem; padding-top: .25rem; }
.cmdk-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cmdk-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-s { font-size: .6875rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item.on .cmdk-s, .cmdk-item:hover .cmdk-s { color: color-mix(in srgb, var(--accent) 70%, var(--text-muted)); }
.cmdk-item { align-items: center; }
.cmdk-list { max-height: 60vh; }

/* ---------- 28. Botão de instalar o aplicativo (PWA) ---------- */
.sb-instalar {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: calc(100% - 1rem); margin: .5rem .5rem 0; padding: .5rem;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--r); color: #fff; font-size: .8125rem; font-weight: 550; cursor: pointer;
    transition: background var(--t);
}
.sb-instalar:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.sb-instalar .ic { width: 16px; height: 16px; }
.sb-instalar[hidden] { display: none; }
body.sb-mini:not(.sb-peek) .sb-instalar span { display: none; }

/* ---------- 29. Cabeçalho/rodapé de documentos impressos ---------- */
.doc-cab {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
    padding-bottom: .875rem; margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--accent);
}
.doc-logo { max-height: 60px; max-width: 220px; object-fit: contain; margin-bottom: .5rem; display: block; }
.doc-emp-nome { font-weight: 680; font-size: 1rem; letter-spacing: -.01em; color: var(--text); }
.doc-emp-info { font-size: .6875rem; line-height: 1.55; color: var(--text-muted); margin-top: .1875rem; }
.doc-tit { text-align: right; flex: 0 0 auto; }
.doc-tit h2 {
    font-size: 1.0625rem; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 .25rem;
}
.doc-tit p { font-size: .75rem; color: var(--text-muted); margin: 0 0 .125rem; }
.doc-rodape {
    margin-top: 1.5rem; padding-top: .625rem; border-top: 1px solid var(--border);
    text-align: center; font-size: .6875rem; color: var(--text-faint);
}
@media (max-width: 600px) {
    .doc-cab { flex-direction: column; gap: .75rem; }
    .doc-tit { text-align: left; }
}
@media print {
    /* na impressão o cabeçalho se repete no topo de cada página */
    .doc-cab { break-inside: avoid; }
    .doc-emp-info, .doc-tit p { color: #475569; }
    .doc-rodape { color: #64748b; }
}

/* faixa com os dados da pessoa/registro logo abaixo do cabeçalho do documento */
.doc-pessoa {
    display: flex; flex-wrap: wrap; gap: .75rem 2rem;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
    padding: .75rem .875rem; margin-bottom: 1rem;
}
.doc-pessoa > div { display: flex; flex-direction: column; gap: .0625rem; }
.doc-pessoa span { font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 600; }
.doc-pessoa b { font-size: .8125rem; font-weight: 600; }
@media print { .doc-pessoa { background: #f8fafc; break-inside: avoid; } }

/* o nome da empresa nunca é cortado: quebra em mais linhas se precisar */
.doc-emp-nome { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; word-break: break-word; }
.doc-emp { min-width: 0; flex: 1 1 auto; }
.doc-cab .doc-tit { max-width: 42%; }

/* ---------- 30. Documento de uma página só (espelho de ponto) ---------- */
/* Um mês tem até 31 linhas + cabeçalho + assinaturas. Na impressão tudo é
   comprimido para caber numa folha A4 sem esconder nenhuma informação. */
@media print {
    @page { size: A4 portrait; margin: 8mm; }

    .doc-1pag { font-size: 8pt; }
    .doc-1pag .doc-cab { padding-bottom: 5px; margin-bottom: 7px; }
    .doc-1pag .doc-logo { max-height: 34px; margin-bottom: 3px; }
    .doc-1pag .doc-emp-info { font-size: 6pt; line-height: 1.3; }
    .doc-1pag .doc-tit h2 { font-size: 11pt; margin-bottom: 1px; }
    .doc-1pag .doc-tit p { font-size: 7pt; }

    .doc-1pag .doc-pessoa { padding: 4px 6px; margin-bottom: 6px; gap: 2px 18px; }
    .doc-1pag .doc-pessoa span { font-size: 5.5pt; }
    .doc-1pag .doc-pessoa b { font-size: 7.5pt; }

    .doc-1pag .table-z th { padding: 2px 4px; font-size: 6pt; letter-spacing: 0; }
    .doc-1pag .table-z td { padding: 1px 4px; font-size: 7.5pt; line-height: 1.2; }
    .doc-1pag .table-z tfoot td { padding: 3px 4px; font-size: 8pt; }
    .doc-1pag table { page-break-inside: avoid; break-inside: avoid; }

    /* bloco de assinaturas: encosta no fim da tabela em vez dos 3rem da tela */
    .doc-1pag .doc-assinaturas { margin-top: 14px !important; }
    .doc-1pag .doc-assinaturas > div { margin-top: 0 !important; }
    .doc-1pag .doc-assinaturas .assina-linha { margin-top: 22px; }
    .doc-1pag .doc-assinaturas img { max-height: 34px; }
    .doc-1pag .doc-rodape { margin-top: 8px; padding-top: 4px; font-size: 6pt; }
    .doc-1pag .card, .doc-1pag { box-shadow: none; border: 0; padding: 0; }
}

/* ---------- 31. Seleção de vários colaboradores (ponto em lote) ---------- */
.lote-lista {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .25rem;
    max-height: 15rem; overflow-y: auto; padding: .5rem;
    border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2);
}
.lote-item {
    display: flex; align-items: center; gap: .5rem; padding: .3125rem .5rem;
    border-radius: var(--r-sm); font-size: .8125rem; cursor: pointer;
}
.lote-item:hover { background: var(--surface); }
.lote-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lote-ponto > summary::-webkit-details-marker { display: none; }
#lote-ponto > summary::marker { content: ''; }
#lote-ponto[open] > summary { margin-bottom: .25rem; }

/* quebra de página entre os espelhos na impressão em lote */
.quebra-pagina { break-after: page; page-break-after: always; }
@media screen { .quebra-pagina { margin-bottom: 1.5rem; } }

/* ==========================================================================
   32. Cartão Ponto — tela remodelada (edição direto na linha)
   ========================================================================== */
.pt-barra {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: .625rem .875rem; margin-bottom: .875rem; box-shadow: var(--sh-sm);
}
.pt-barra-esq { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pt-avatar {
    width: 32px; height: 32px; border-radius: 99px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
}
.pt-colab { max-width: 17rem; font-weight: 600; }
.pt-barra-dir { display: flex; align-items: center; gap: .5rem; }

.pt-mes { display: flex; align-items: center; gap: .25rem; }
.pt-mes-nome { font-weight: 650; font-size: .9375rem; min-width: 10.5rem; text-align: center; text-transform: capitalize; }
.pt-mes-nav {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-muted);
}
.pt-mes-nav:hover { background: var(--surface-3); color: var(--text); }

/* resumo em números */
.pt-resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: .875rem; }
.pt-num {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: .75rem .875rem; box-shadow: var(--sh-sm);
}
.pt-num-rot { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.pt-num-val { display: block; font-size: 1.5rem; font-weight: 680; letter-spacing: -.02em; margin-top: .125rem; font-variant-numeric: tabular-nums; }
.pt-num-pe { display: block; font-size: .6875rem; color: var(--text-faint); }
.pt-num-alerta { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
@media (max-width: 900px) { .pt-resumo { grid-template-columns: repeat(2, 1fr); } }

/* faixa de situação/assinatura */
.pt-assin {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r);
    padding: .625rem .875rem; margin-bottom: .875rem; background: var(--surface); font-size: .8125rem;
}
.pt-assin-txt { display: flex; align-items: center; gap: .5rem; }
.pt-assin-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pt-assin-aberto   { border-left-color: var(--accent); }
.pt-assin-aberto   .ic { color: var(--accent); }
.pt-assin-liberado { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.pt-assin-liberado .ic { color: var(--warn); }
.pt-assin-assinado { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.pt-assin-assinado .ic { color: var(--ok); }

/* tabela do espelho com campos na própria linha */
.pt-tabela td { padding: .25rem .5rem; vertical-align: middle; }
.pt-tabela .pt-dia { display: flex; align-items: center; gap: .375rem; white-space: nowrap; }
.pt-tabela .pt-dia span { font-size: .6875rem; color: var(--text-faint); text-transform: uppercase; }
.pt-input {
    width: 100%; border: 1px solid transparent; background: transparent; color: var(--text);
    border-radius: var(--r-sm); padding: .25rem .375rem; font-size: .8125rem;
    font-variant-numeric: tabular-nums; transition: border-color var(--t), background var(--t);
}
.pt-input:hover { border-color: var(--border); background: var(--surface); }
.pt-input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-ring); }
.pt-input-txt { font-variant-numeric: normal; }
.pt-hora { width: 6.5rem; }
.pt-hora .pt-marc { display: inline-flex; gap: .1875rem; margin-left: .125rem; }
.pt-hora .pt-marc a { color: var(--text-faint); }
.pt-hora .pt-marc a:hover { color: var(--accent); }
.pt-acoes { text-align: right; white-space: nowrap; }
.pt-just { margin-top: .25rem; border-color: var(--warn) !important; }

/* estados da linha */
.pt-tabela .pt-fds td { background: var(--surface-2); }
.pt-tabela .pt-hoje td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.pt-tabela .pt-falta td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.pt-tabela .pt-incompleto td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.pt-tabela .pt-editando td { background: var(--accent-soft) !important; }
.pt-tabela tfoot td { background: var(--surface-3); font-variant-numeric: tabular-nums; }

/* a barra precisa encolher em vez de empurrar a página */
.pt-barra-esq { flex: 1 1 14rem; min-width: 0; }
.pt-colab { min-width: 0; flex: 1 1 auto; }
.pt-barra > .pt-mes { flex: 0 0 auto; }
.pt-barra-dir { flex: 0 0 auto; }
.pt-mes-nome { min-width: 8.5rem; font-size: .875rem; }
@media (max-width: 900px) {
    .pt-barra { justify-content: center; }
    .pt-barra-esq { flex: 1 1 100%; }
    .pt-mes { flex: 1 1 auto; justify-content: center; }
}

/* Um item flex não encolhe abaixo do conteúdo (min-width:auto): sem isto, uma
   tabela larga empurra a página inteira e cria rolagem horizontal no site todo.
   Com min-width:0 no main + rolagem no próprio wrapper, só a tabela rola. */
main { min-width: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 33. Cartão Ponto — lista de colaboradores ---------- */
.pt-lista .pt-nome { font-weight: 600; color: var(--text); }
.pt-lista .pt-nome:hover { color: var(--accent); text-decoration: underline; }
.pt-lista .pt-cargo { font-size: .6875rem; color: var(--text-faint); margin-top: .0625rem; }
.pt-lista tr.linha-link:hover td { background: var(--accent-soft); }
.pt-lista tr.pt-sel td { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pt-lista input[type=checkbox] { width: 16px; height: 16px; }

/* barra de ações da seleção */
.pt-acoes-lote {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--accent-ring); border-left: 3px solid var(--accent);
    border-radius: var(--r); padding: .625rem .875rem; margin-bottom: .75rem; box-shadow: var(--sh-sm);
}
.pt-acoes-conta { font-size: .8125rem; color: var(--text-muted); margin-right: .25rem; }
.pt-acoes-sep { flex: 1 1 auto; }
.pt-acoes-lote[hidden] { display: none; }

/* voltar para a lista, na tela do espelho */
.pt-voltar {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-muted); flex: 0 0 auto;
}
.pt-voltar:hover { background: var(--surface-3); color: var(--text); }
@media (max-width: 700px) { .pt-acoes-sep { flex-basis: 100%; } }

/* ---------- 34. Cartões de hora extra por tipo (ponto) ---------- */
.pt-he-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; margin-bottom: .875rem; }
.pt-he {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: .75rem .875rem; box-shadow: var(--sh-sm);
}
.pt-he-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pt-he-rot { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.pt-he-ic {
    width: 26px; height: 26px; border-radius: var(--r-sm); flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-3); color: var(--text-muted);
}
.pt-he-ic .ic { width: 14px; height: 14px; }
.pt-he-horas { font-size: 1.375rem; font-weight: 680; letter-spacing: -.02em; margin-top: .375rem; font-variant-numeric: tabular-nums; }
.pt-he-valor { font-size: .875rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pt-he-valor-forte { font-size: 1.125rem; color: var(--ok); }
.pt-he-obs { font-size: .6875rem; font-weight: 400; color: var(--text-faint); }
.pt-he-accent .pt-he-ic { background: var(--accent-soft); color: var(--accent); }
.pt-he-warn .pt-he-ic { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.pt-he-total { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 5%, var(--surface)); }
.pt-he-total .pt-he-ic { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
/* no regime misto os cartões vêm em dois blocos rotulados (HE e banco) */
.pt-grupo-rot {
    display: flex; align-items: center; gap: .375rem;
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); font-weight: 700; margin: .25rem 0 .5rem;
}
.pt-grupo-rot svg { width: 14px; height: 14px; }
.pt-he-cards-4 { grid-template-columns: repeat(4, 1fr); }
/* banco de horas: azul, para não confundir com o verde do dinheiro */
.pt-he-banco { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.pt-he-banco .pt-he-ic { background: var(--accent-soft); color: var(--accent); }
/* horas a menos: o único cartão que tira dinheiro, por isso o tom de alerta */
.pt-he-neg { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.pt-he-neg .pt-he-ic { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.pt-he-neg .pt-he-horas, .pt-he-neg .pt-he-valor { color: var(--danger); }
/* saldo negativo: o cartão de total troca de verde para vermelho */
.pt-he-total-neg { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.pt-he-total-neg .pt-he-ic { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.pt-he-total-neg .pt-he-valor-forte { color: var(--danger); }
/* saldo no rodapé da tabela do espelho */
.pt-saldo-rod { text-align: right; font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.pt-saldo-rod b { font-size: .9375rem; margin-left: .375rem; letter-spacing: 0; }
@media (max-width: 1400px) { .pt-he-cards, .pt-he-cards-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .pt-he-cards, .pt-he-cards-4 { grid-template-columns: repeat(2, 1fr); } }

/* resumo de horas extras abaixo da tabela do espelho impresso */
.doc-resumo-he {
    display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; align-items: center;
    margin-top: .75rem; padding: .625rem .875rem;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
}
.doc-resumo-he > div { display: flex; flex-direction: column; gap: .0625rem; }
.doc-resumo-he span { font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 600; }
.doc-resumo-he b { font-size: .9375rem; font-variant-numeric: tabular-nums; }
.doc-resumo-he .doc-resumo-total { margin-left: auto; text-align: right; }
.doc-resumo-he .doc-resumo-total b { font-size: 1.125rem; }
@media print {
    .doc-1pag .doc-resumo-he { margin-top: 5px; padding: 3px 6px; gap: 2px 14px; background: #f8fafc; break-inside: avoid; }
    .doc-1pag .doc-resumo-he span { font-size: 5.5pt; }
    .doc-1pag .doc-resumo-he b { font-size: 8pt; }
    .doc-1pag .doc-resumo-he .doc-resumo-total b { font-size: 9.5pt; }
}

/* coluna de hora extra na tela: valor + tipo (60% / 100%) */
.pt-extra { line-height: 1.1; }
/* seletor de destino das horas do dia (regime misto) */
.pt-input-sel { width: 100%; font-size: .75rem; padding: .25rem .375rem; }
.pt-destino { white-space: nowrap; }
/* o dia foi para o outro lado: a coluna fica marcada, não vazia */
.pt-fora { display: inline-block; font-size: .625rem; font-weight: 600; text-transform: uppercase;
           letter-spacing: .04em; color: var(--text-faint); }
.pt-saldo-bc { margin-left: .875rem; padding-left: .875rem; border-left: 1px solid var(--border); }
.pt-extra span { display: block; font-size: .625rem; color: var(--text-faint); font-weight: 600; }

/* ---------- 35. Alerta de vencimento do certificado digital ---------- */
.cert-alerta {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .75rem .875rem; margin-bottom: 1rem;
    border: 1px solid var(--border); border-left-width: 3px;
    border-radius: var(--r); font-size: .8125rem;
    background: var(--surface); color: var(--text); box-shadow: var(--sh-sm);
}
.cert-alerta .cert-ic { display: flex; flex: 0 0 auto; }
.cert-alerta .cert-ic .ic { width: 20px; height: 20px; }
.cert-txt { flex: 1 1 16rem; min-width: 0; }
.cert-sub { color: var(--text-muted); margin-top: .125rem; }
.cert-warn   { border-left-color: var(--warn);   background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.cert-warn   .cert-ic { color: var(--warn); }
.cert-danger { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.cert-danger .cert-ic { color: var(--danger); }
/* faixa grande: usada só quando faltam 3 dias ou menos (aparece em todas as telas) */
.cert-grande {
    padding: 1rem 1.125rem; border-left-width: 5px; font-size: .875rem;
    box-shadow: var(--sh), 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent);
}
.cert-grande .cert-ic .ic { width: 26px; height: 26px; }
.cert-grande .cert-txt b { font-size: 1rem; font-weight: 680; letter-spacing: -.01em; }
.cert-grande.cert-warn { box-shadow: var(--sh), 0 0 0 2px color-mix(in srgb, var(--warn) 20%, transparent); }
@media print { .cert-alerta { display: none; } }

/* ---------- 36. Campo de senha com olho (mostrar/ocultar) ---------- */
.campo-senha { position: relative; }
.campo-senha .input { padding-right: 2.5rem; }
.senha-olho {
    position: absolute; top: 0; right: 0; height: 100%; width: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--text-faint); border-radius: var(--r);
}
.senha-olho:hover { color: var(--text); }
.senha-olho .ic { width: 16px; height: 16px; }
.senha-olho .olho-off { display: none; }
.senha-olho.vendo .olho-on { display: none; }
.senha-olho.vendo .olho-off { display: block; }

/* ---------- 37. Barra fina de "carregando" (troca de página) ---------- */
.carregando-bar {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999;
    background: color-mix(in srgb, var(--accent) 18%, transparent); overflow: hidden; pointer-events: none;
}
.carregando-bar::after {
    content: ''; display: block; height: 100%; width: 30%;
    background: var(--accent); border-radius: 0 3px 3px 0;
    animation: carregandoDesliza 1s ease-in-out infinite;
}
@keyframes carregandoDesliza { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media print { .carregando-bar { display: none; } }

/* ---------- 38. Lote em andamento: tela de acompanhamento e indicador flutuante ---------- */
.pgv-trilho { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pgv-fita { height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .25s ease; }
.pgv-fita.indef { width: 35%; animation: pgvIndef 1.1s ease-in-out infinite alternate; }
@keyframes pgvIndef { from { margin-left: 0 } to { margin-left: 65% } }
.pgv-fita.pronto { background: var(--ok); }
.pgv-fita.erro   { background: var(--danger); }
.pgv-log { list-style: none; margin: 0; padding: .5rem .75rem; max-height: 18rem; overflow-y: auto;
           border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); font-size: .8125rem; }
.pgv-log:empty { display: none; }
.pgv-log li { padding: .25rem 0; border-bottom: 1px dashed var(--border); }
.pgv-log li:last-child { border-bottom: 0; }
.pgv-erro   { color: var(--danger); font-weight: 600; }
.pgv-pulado { color: var(--text-muted); }

/* Indicador que acompanha o usuário pelo sistema enquanto o lote roda */
.lote-flut {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 70; width: min(21rem, calc(100vw - 2rem));
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
    box-shadow: var(--sh-lg); padding: .75rem .875rem; font-size: .8125rem;
}
.lote-flut[hidden] { display: none; }
.lote-flut-topo { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.lote-flut-tit { font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-flut-x { background: none; border: 0; cursor: pointer; color: var(--text-faint); padding: 0 .125rem; line-height: 1; font-size: 1rem; }
.lote-flut-x:hover { color: var(--text); }
.lote-flut .pgv-trilho { height: 8px; }
.lote-flut-meta { display: flex; justify-content: space-between; gap: .5rem; margin-top: .375rem; color: var(--text-muted); font-size: .75rem; }
.lote-flut-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.lote-flut-atual { margin-top: .25rem; color: var(--text-muted); font-size: .75rem;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-flut-acoes { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.lote-flut-spin { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 99px;
                  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent);
                  animation: loteGira .8s linear infinite; }
@keyframes loteGira { to { transform: rotate(360deg); } }
.lote-flut.fim .lote-flut-spin { display: none; }
@media print { .lote-flut { display: none; } }