/* =============================================================================================
   Mapas e listagens (VB6 list*.frm): the Logins frame (filter bar + table under a fixed header) with the
   selection criteria of the VB6 maps (.ped-rel-* in pedidos.css). Here: the columns of each map.
   ============================================================================================= */

/* ---- Anomalias de ponto (list3_Combi.frm) ---- */
.ano-tabela .ano-pica {
    width: 4.9rem;
    text-align: center;
    background: rgba(15, 36, 64, 0.05);
}

/* In the fixed header the shade must be solid: the see-through one let the rows scrolling under it show (2026-10-20). */
.tabela-dados.ano-tabela thead th.ano-pica {
    background: #e9ebef;
}

/* The other shaded columns too: their tint laid over the header's own grey, so nothing shows through. */
.tabela-dados thead th.ano-min { background: linear-gradient(rgba(196, 43, 59, 0.07), rgba(196, 43, 59, 0.07)), #f5f6f8; }
.tabela-dados thead th.aco-saldo { background: linear-gradient(rgba(29, 79, 184, 0.07), rgba(29, 79, 184, 0.07)), #f5f6f8; }
.tabela-dados thead th.man-fds { background: linear-gradient(rgba(29, 79, 184, .06), rgba(29, 79, 184, .06)), #f5f6f8; }

/* Entrada / Saída in the colours of the punches grid of Movimentos de ponto. */
.tabela-dados.ano-tabela thead th.entrada {
    background: #dcf3e3;
    color: #116236;
}

.tabela-dados.ano-tabela thead th.saida {
    background: #fde3e6;
    color: #a3192c;
}

/* A time opens its day, as the date does; it only looks like a link under the pointer. */
.ano-tabela .ano-pica a,
.ano-tabela .ano-emp a {
    color: inherit;
    text-decoration: none;
}

    .ano-tabela .ano-pica a:hover,
    .ano-tabela .ano-emp a:hover {
        color: var(--cr-blue-600);
        text-decoration: underline;
    }

/* Number and name: one cell for all the days of the employee, centred on them. */
/* The same number and name in every map with this layout (Marcações, Anomalias, Ficha mensal, Acontecimentos, Folha de
   ponto, Por justificação, Pontualidade, Exportação, Registo…): plain weight, a little larger than the rows (2026-10-20). */
.tabela-dados.ano-tabela tbody tr td.ano-emp {
    font-family: inherit;
    font-size: inherit;   /* the same letter and size as the other cells, on screen and on paper (2026-10-20) */
    font-weight: 400;
    vertical-align: middle;
    background: #fff;
    border-right: 1px solid var(--grelha);
}

/* The criteria strip (ChronosExtra filter-bar controls): compact ranges, so everything fits one line. */
.ano-barra .controlo {
    gap: .3rem;
}

.ano-barra .atalhos-teclado {
    margin-right: .4rem;
}

.ano-tabela .ano-min {
    width: 4.6rem;
    text-align: right;
    background: rgba(196, 43, 59, 0.07);
}

.ano-tabela tr.ano-primeiro td {
    border-top: 2px solid var(--cr-line);
}

/* Os totais (do empregado, da obra…): azul vivo, para se destacarem das linhas. */
.ano-tabela tr.ano-subtotal td {
    font-weight: 700;
    color: #0f3fe8;
}

/* ---- Mapas com grelha à vista (Anomalias, Marcações, Acontecimentos, Por justificação): células na cor base, sem
   riscas (as células fundidas do empregado desalinhavam-nas), linhas verticais e horizontais marcadas, um traço forte
   entre empregados. ---- */
.tabela-dados.ano-grelha th,
.tabela-dados.ano-grelha td {
    border-right: 1px solid var(--grelha);
    border-bottom: 1px solid var(--grelha);
}

.tabela-dados.ano-grelha tr > :last-child {
    border-right: 0;
}

.anomalias .tabela-dados.ano-grelha tbody td {
    background: #fff;
}

.anomalias .tabela-dados.ano-grelha tbody tr:hover td:not(.ano-emp) {
    background: #eef2f9;
}

.anomalias .tabela-dados.ano-grelha thead th.ano-min {
    background: #f5f6f8;
}

.anomalias .tabela-dados.ano-grelha tr.ano-primeiro td {
    border-top: 2px solid var(--grelha-forte);
}

.anomalias .tabela-dados.ano-grelha tbody tr.ano-subtotal td,
.anomalias .tabela-dados.ano-grelha tbody tr.ped-rel-grupo td {
    background: #fafbfc;
}

.anomalias .tabela-dados.ano-grelha tbody tr.ano-subtotal td {
    background: #e8effd;
}

/* Sábados e domingos das grelhas por dia (carga horária). */
.anomalias .tabela-dados.ano-grelha tbody td.esc-sa { background: #e6efff; }
.anomalias .tabela-dados.ano-grelha tbody td.esc-do { background: #cfdcfb; }

/* Observações: coluna mais estreita, o texto quebra. */
.ano-grelha .ano-obs {
    width: 14rem;
    min-width: 10rem;
    white-space: normal;
}

/* O total de cada empregado (e de cada grupo): à esquerda, em maiúsculas. */
.ano-grelha tr.ano-subtotal td:first-child {
    font-size: .84rem;
    font-weight: 600;
}

/* A rodinha das barras sem «Consultar» (chronos.js, form[data-auto-consulta]): só aparece se a página nova demorar, e
   sobre a tabela (que esbate), nunca dentro da barra, que não muda de tamanho. */
.painel.a-consultar > .tabela-rolagem {
    /* Smoothly (user's request 2026-10-20: no "glitch"), from .12s on: a quick answer hardly fades at all. */
    animation: consulta-esbater .25s ease-out .12s forwards;
}

/* A screen opened from the menu whose table is still to come (CarregamentoAdiado): no card at all (user's request
   2026-10-22) — never an empty table, its header or a "no records" notice — only the wheel, in the middle of the screen,
   as when the menu was clicked (.ecra-a-abrir). The bar of criteria stays. */
.painel[data-carregar-tabela] {
    visibility: hidden;
}

    .painel.a-consultar[data-carregar-tabela]::after {
        visibility: visible;
        position: fixed;
        top: calc(50% - 1.3rem);
        left: calc(50% - 1.3rem);
        width: 2.6rem;
        height: 2.6rem;
        animation: barra-espera .7s linear infinite, barra-espera-ver 0s linear 0s forwards;
    }

/* A consult started from the bar (chronos.js, data-consulta-js) only grows the card after the same .3s as the wheel: a
   quick answer (an empty month) never makes the card jump and flash white (user's report 2026-10-20). */
.painel.a-consultar[data-consulta-js] {
    animation: consulta-crescer 0s linear .3s forwards;
}

@keyframes consulta-crescer {
    to { min-height: 9rem; }
}

.painel.a-consultar::after {
    content: "";
    position: absolute;
    /* Always in the middle of the table (user's request 2026-10-22): chronos.js gives the table's centre in the card
       (--roda-x / --roda-y); without it, the middle of the card. */
    top: calc(var(--roda-y, 50%) - .95rem);
    left: calc(var(--roda-x, 50%) - .95rem);
    z-index: 5;
    width: 1.9rem;
    height: 1.9rem;
    border: 3px solid var(--cr-line-strong);
    border-top-color: var(--cr-blue-600);
    border-radius: 50%;
    opacity: 0;
    animation: barra-espera .7s linear infinite, barra-espera-ver 0s linear .3s forwards;
}

@keyframes barra-espera {
    to { transform: rotate(360deg); }
}

@keyframes barra-espera-ver {
    to { opacity: 1; }
}

@keyframes consulta-esbater {
    to { opacity: .45; }
}

/* The new data comes in (chronos.js, html.tabelas-entrar after a new page or an in-place update): the table fades in
   from where the consult left the old one, with a 3 px rise, so the swap reads as one movement. */
html.tabelas-entrar main :is(.tabela-rolagem, .esc-grelha-rolagem, .emp-escala) {
    animation: tabela-entrar .22s ease-out both;
}

@keyframes tabela-entrar {
    from { opacity: .45; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .painel.a-consultar > .tabela-rolagem { animation: consulta-esbater 0s linear .3s forwards; }
    html.tabelas-entrar main :is(.tabela-rolagem, .esc-grelha-rolagem, .emp-escala) { animation: none; }
}

/* Listas de caixas das barras (Shared/OpcoesFiltro.razor): mais estreitas que a das unidades. */
.opcoes-filtro .menu-lista {
    min-width: 17rem;
}

/* O saldo dos mapas de acontecimentos: só o negrito, a célula fica na cor base. */
.anomalias .tabela-dados.ano-grelha tbody td.aco-saldo {
    font-weight: 700;
}

/* As barras que ainda usam .ped-rel-campo: o rótulo como nas outras (.controlo-rotulo). */
.barra-filtros .ped-rel-campo {
    font-size: .86rem;
    font-weight: 500;
    color: var(--cr-text-2);
}

    .barra-filtros .ped-rel-campo .form-control:not(.mono),
    .barra-filtros .ped-rel-campo .form-select {
        font-family: var(--bs-body-font-family);
    }

@media print {
    .ano-barra {
        display: none;
    }
}

/* ---- Faltas a excluir (ass_exc.frm): uma caixa por código, em colunas que enchem a largura e a altura da janela
   (sem rolar: as linhas esticam; só rola se a janela for baixa demais). --l5…--l2 vêm da página. ---- */
.fecho.fex {
    max-width: none;
}

.fex-lista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: repeat(var(--linhas, 999), auto);
    align-content: start;
    --linhas: var(--l2);
    overflow: auto;
}

@media (min-width: 900px) { .fex-lista { --linhas: var(--l3); } }
@media (min-width: 1200px) { .fex-lista { --linhas: var(--l4); } }
@media (min-width: 1600px) { .fex-lista { --linhas: var(--l5); } }

/* The card ends after its rows; a short window: the list scrolls (generic rule at the end of chronos.css). */
@media (min-width: 641px) {
    main > .content > .fecho.fex {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        min-height: 0;
    }
}

.fex-cartao .tabela-rodape { justify-content: flex-start; }
.fex-cartao .tabela-rodape > .espaco { flex: 1 1 auto; }

/* Ecrã estreito: uma coluna, a página rola. */
@media (max-width: 640px) {
    .fex-lista {
        display: block;
    }
}

/* Redesign 2026-10-22 (was cramped): taller rows with a faint line between them, columns apart with air instead of
   hard rules, the excluded codes marked by a soft tint and the blue code — no bold band across the columns. */
.fex-lista {
    padding: .35rem .5rem;
    column-gap: 1.6rem;
}

.fex-codigo {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    padding: .5rem .7rem;
    border-bottom: 1px solid #eef1f6;
    border-radius: 6px;
    font-size: .9rem;
    line-height: 1.3;
    color: var(--cr-text-2);
    cursor: pointer;
    white-space: nowrap;
}

    .fex-codigo:hover {
        background: #f3f6fb;
    }

    .fex-codigo:has(input:checked) {
        background: #eef3fd;
        color: var(--cr-text);
    }

        .fex-codigo:has(input:checked) .mono {
            font-weight: 700;
        }

    .fex-codigo .form-check-input {
        flex: none;
        float: none;
        margin: 0;
    }

    .fex-codigo .mono {
        flex: none;
        width: 3.6rem;
        color: var(--cr-blue-600);
        font-weight: 500;
    }

/* One line per code: a long description ends in "…" (the whole of it in the tooltip). */
.fex-desc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Mapa de marcações de ponto (Pic_dia.frm) ---- */
.mar-semana {
    margin-left: .35rem;
    color: var(--cr-text-2);
    font-size: .78rem;
}

/* Ficha mensal: the weekday as large as the date (user's request 2026-10-20). */
.fm-tabela .mar-semana {
    font-size: .9rem;
}

/* The terminal of each punch (Incluir n.º de terminal): a small label beside the time, easy to see (2026-10-20). */
.mar-terminal {
    display: inline-block;
    margin-left: .35rem;
    padding: 0 .3rem;
    border: 1px solid var(--cr-blue-300);
    border-radius: 4px;
    background: var(--cr-blue-100);
    color: var(--cr-blue-600);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.35;
    vertical-align: 1px;
}

@media print {
    .anomalias .barra-filtros {
        display: none;
    }
}

/* =============================================================================================
   Horários (horarios.frm), read-only: the card of one schedule, its periods as a 00h–24h strip and a table.
   ============================================================================================= */
.hor-corpo {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2.2fr);
    gap: .6rem;
    align-content: start;
}

.hor-faixa {
    position: relative;
    height: 1.5rem;
    border: 1px solid var(--cr-line);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.hor-bloco {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--cr-blue-600);
    border-right: 1px solid #fff;
}

.hor-escala {
    display: flex;
    justify-content: space-between;
    margin: .1rem 0 .5rem;
    color: var(--cr-text-2);
    font-size: .74rem;
}

.hor-tabela {
    width: 100%;
}

    .hor-tabela th {
        font-size: .8rem;
        color: var(--cr-text-2);
        font-weight: 600;
    }

    .hor-tabela td {
        padding: 1px 4px 1px 0;
    }

        .hor-tabela td:first-child {
            display: flex;
            align-items: center;
        }

        .hor-tabela td:not(:first-child) {
            width: 6rem;
        }

.hor-marca {
    flex: none;
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin-right: .35rem;
    border-radius: 2px;
    background: var(--cr-blue-600);
}

.hor-marca.hor-tipo- { background: transparent; }

/* Period kinds: 01–05 normal, 06–11 extra, 12–14 flexible, 15 / 99 variable pause. */
.hor-tipo-02 { background: #1f3f8f; }
.hor-tipo-06, .hor-tipo-08, .hor-tipo-10 { background: #e08a1e; }
.hor-tipo-07, .hor-tipo-09, .hor-tipo-11 { background: #a85d0a; }
.hor-tipo-12, .hor-tipo-13, .hor-tipo-14 { background: #2e9b4c; }
.hor-tipo-15, .hor-tipo-99 { background: #9aa4b2; }

@media (max-width: 1100px) {
    .hor-corpo {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Mapa de férias (mapa_ferias.frm): one narrow column per day of the year; number and name stay in place ---- */
.mf-seccao {
    min-width: 14rem;
}

.mf-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    font-size: .82rem;
    color: var(--cr-text-2);
}

    .mf-legenda > span {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

    .mf-legenda .mf-c {
        display: inline-grid;
        place-items: center;
        width: 1.25rem;
        height: 1.25rem;
        border: 1px solid var(--cr-line);
        border-radius: 3px;
        font-size: .72rem;
        font-weight: 700;
    }

.tabela-dados.mf-tabela {
    font-size: .74rem;
    border-collapse: separate;
    border-spacing: 0;
}

    .tabela-dados.mf-tabela th,
    .tabela-dados.mf-tabela td {
        padding: .2rem .25rem;
    }

    .tabela-dados.mf-tabela .mf-fixa {
        position: sticky;
        z-index: 1;
        background: #fff;
    }

    .tabela-dados.mf-tabela thead .mf-fixa {
        z-index: 3;
        background: #f5f6f8;
    }

    .tabela-dados.mf-tabela .mf-num {
        left: 0;
        min-width: 4.2rem;
        text-align: right;
    }

    .tabela-dados.mf-tabela .mf-nome {
        left: 4.2rem;
        min-width: 11rem;
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        border-right: 2px solid var(--cr-line);
    }

    .tabela-dados.mf-tabela .mf-total {
        text-align: right;
        white-space: normal;
        min-width: 3.4rem;
    }

    .tabela-dados.mf-tabela .mf-mes {
        text-align: center;
        border-left: 2px solid #0f2440;
    }

    .tabela-dados.mf-tabela .mf-mes-atual {
        color: var(--cr-blue-600);
    }

    .tabela-dados.mf-tabela .mf-dia,
    .tabela-dados.mf-tabela td.mf-c {
        min-width: 1.15rem;
        width: 1.15rem;
        padding: .2rem 0;
        text-align: center;
        border-right: 1px solid var(--cr-line);
    }

    .tabela-dados.mf-tabela .mf-dia {
        font-weight: 500;
        font-size: .66rem;
    }

    .tabela-dados.mf-tabela .mf-hoje {
        outline: 2px solid var(--cr-blue-600);
        outline-offset: -2px;
        font-weight: 700;
    }

    .tabela-dados.mf-tabela .mf-soma {
        min-width: 2.4rem;
        text-align: right;
        font-weight: 700;
        border-right: 2px solid #0f2440;
        background: rgba(15, 36, 64, 0.05);
    }

    .tabela-dados.mf-tabela tr.mf-demitido .mf-nome,
    .tabela-dados.mf-tabela tr.mf-demitido .mf-num a {
        color: var(--cr-danger);
    }

    .tabela-dados.mf-tabela .mf-sem {
        color: var(--cr-text-3);
        font-style: italic;
        border-right: 2px solid #0f2440;
    }

    .tabela-dados.mf-tabela td a {
        color: inherit;
        font-weight: 700;
        text-decoration: none;
    }

/* Headers readable (user's request 2026-10-15) and the day row held under the month row while scrolling (both stuck
   at top 0 before, so the days slid over the months). Line heights in rem so the offset is exact. */
.tabela-dados.mf-tabela {
    font-size: .82rem;
}

    .tabela-dados.mf-tabela thead tr:first-child th {
        padding: .3rem .35rem;
        line-height: 1.5rem;
        font-size: .9rem;
    }

    .tabela-dados.mf-tabela thead tr:nth-child(2) th {
        top: calc(2.1rem + 1px);
        padding: .25rem 0;
        line-height: 1.3rem;
        font-size: .8rem;
    }

    .tabela-dados.mf-tabela .mf-dia,
    .tabela-dados.mf-tabela td.mf-c {
        min-width: 1.55rem;
        width: 1.55rem;
    }

    .tabela-dados.mf-tabela .mf-dia {
        font-weight: 600;
    }

    .tabela-dados.mf-tabela th.mf-soma {
        min-width: 3.9rem;
        padding: .25rem .35rem;
        white-space: nowrap;
        text-align: center;
        background: #e9ebef;   /* solid in the fixed header (the see-through shade let the rows show, 2026-10-20) */
    }

    /* Both header rows on the header's grey, with the line between them, so the days read as one band. */
    .tabela-dados.mf-tabela thead th {
        background: #f5f6f8;
        border-bottom: 1px solid var(--grelha);
    }


/* The legend in the table's foot, always in sight; the print button at its right. */
.tabela-rodape > .mf-legenda {
    flex: 1 1 auto;
    min-width: 0;
}

/* The cells keep their colour on striped and hovered rows (.tabela-dados paints the cells). */
.mf-c.mf-f, .tabela-dados.mf-tabela tbody tr td.mf-f { background: #2e9b4c; color: #fff; font-weight: 700; }
/* Half days: the cell split 50 / 50 on its diagonal, the "½" with a white halo (user's request 2026-10-20). */
.mf-c.mf-m, .tabela-dados.mf-tabela tbody tr td.mf-m { background: linear-gradient(135deg, #2e9b4c 0 50%, #fff 50%); color: #0b2e1f; font-weight: 800; text-shadow: 0 0 2px #fff, 0 0 3px #fff; }
.mf-c.mf-fa, .tabela-dados.mf-tabela tbody tr td.mf-fa { background: #1f6fd6; color: #fff; font-weight: 700; }
.mf-c.mf-ma, .tabela-dados.mf-tabela tbody tr td.mf-ma { background: linear-gradient(135deg, #1f6fd6 0 50%, #fff 50%); color: #0f2440; font-weight: 800; text-shadow: 0 0 2px #fff, 0 0 3px #fff; }
.mf-c.mf-fn, .tabela-dados.mf-tabela tbody tr td.mf-fn { background: #6e9b7b; color: #fff; }
/* A half day that does not count: the same split, in the pale green of the days that do not count. */
.tabela-dados.mf-tabela tbody tr td.mf-fn.mf-meio { background: linear-gradient(135deg, #6e9b7b 0 50%, #fff 50%); color: #0b2e1f; text-shadow: 0 0 2px #fff; }
.mf-c.mf-x, .tabela-dados.mf-tabela tbody tr td.mf-x { background: #d8f5d8; }
.mf-c.mf-fo, .tabela-dados.mf-tabela tbody tr td.mf-fo { background: #d9d5ff; }
.tabela-dados.mf-tabela tbody tr td.mf-cp, .tabela-dados.mf-tabela tbody tr td.mf-ob { background: #fff3bf; }
.tabela-dados.mf-tabela tbody tr td.mf-ds { background: #e6d4ff; }
.mf-c.mf-sa, .tabela-dados.mf-tabela .mf-sa { background: #ffe3ee; }
.mf-c.mf-do, .tabela-dados.mf-tabela .mf-do { background: #ffc9c9; }

@media print {
    .mf-legenda { font-size: .7rem; }
    .tabela-dados.mf-tabela { font-size: .55rem; }
    .tabela-dados.mf-tabela thead tr th { font-size: .6rem; line-height: normal; }
    .tabela-dados.mf-tabela .mf-dia, .tabela-dados.mf-tabela td.mf-c { min-width: 1.1rem; width: 1.1rem; }
}

/* ---- Mapa de presenças / ausências (presenca_glb.frm) ---- */
.ano-tabela .pres-a { color: var(--cr-danger); font-weight: 700; }
.ano-tabela .pres-p { color: #126a3a; font-weight: 700; }

/* ---- Mapa de alterações (Alteracoes.frm): punches before in red, after in green ---- */
.ano-tabela .alt-antes { color: #9b2c2c; }
.ano-tabela .alt-depois { color: #126a3a; }

/* ---- Análise de pontualidade (pontualidade.frm) ---- */
.ano-tabela .pon-nivel {
    font-weight: 700;
}

.ano-tabela tr.pon-total td {
    border-top: 2px solid #0f2440;
}

/* ---- Mapa de acontecimentos (List2.frm): the list of codes with their mark; the balance column stands out ---- */
/* Wide enough for the whole descriptions (user's request 2026-10-20; the unit selector's 22rem won over it before), and
   opening to the left of the button's right edge so it stays inside the window. */
.unidades-selector .menu-lista.aco-codigos {
    min-width: 0;
    width: max-content;   /* as wide as the longest description, no blank space after it (2026-10-20) */
    max-width: calc(100vw - 2rem);
    left: auto;
    right: 0;
}

/* The filters and roundings of a bar, in a list (the «Ignorar até» button of the maps): what it is on the left, its
   field on the right. */
.opcoes-lista {
    min-width: 27rem;
}

    .opcoes-lista > label {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 11.5rem;
        align-items: center;
        gap: .5rem;
        padding: .2rem .15rem;
        font-size: .84rem;
    }

/* One code per line: code in blue, description in black (cut with … when long), its mark as four small buttons. */
.aco-codigo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .15rem .3rem;
    font-size: .86rem;
    white-space: nowrap;
}

    .aco-codigo .opcao-desc {
        max-width: none;
    }

.aco-marca {
    padding: 2px;
}

    .aco-marca > label {
        min-width: 1.9rem;
        padding: .1rem .45rem;
        border-radius: 6px;
        color: var(--cr-text-2);
        font-weight: 600;
        text-align: center;
        cursor: pointer;
    }

        .aco-marca > label > input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .aco-marca > label:hover:not(:has(input:checked)) {
            background: var(--barra-hover);
        }

        .aco-marca > label:has(input:checked) {
            background: var(--barra-ativo-fundo);
            color: var(--barra-destaque);
            box-shadow: var(--barra-ativo-sombra), inset 0 0 0 1px var(--barra-ativo-borda);
        }

        .aco-marca > label:has(input:focus-visible) {
            box-shadow: var(--cr-glow);
        }

.ano-tabela .aco-saldo {
    font-weight: 700;
    background: rgba(29, 79, 184, 0.07);
}

.ano-tabela .aco-sem-tipo {
    display: none;
}

/* Contas correntes (/contas/...) */
.cc-tabela .num { text-align: right; }
.cc-tabela th.num { text-align: right; }
.cc-negativo { color: var(--cor-perigo, #b42318); }
.cc-total td { font-weight: 600; }
.cc-legenda { font-size: .85rem; color: var(--cor-texto-suave, #5b6770); }
.cc-manual td { padding: 2px 4px; }

/* Marcações de acessos / tempo real */
.acessos-avisos { padding: .5rem .9rem; }
.acessos-avisos > summary { cursor: pointer; font-weight: 600; }
.acessos-avisos ul { margin-top: .4rem; padding-left: 1.1rem; max-height: 9rem; overflow: auto; }
.acessos-visto { opacity: .55; }
.acessos-terminal { font-size: .75rem; color: var(--cor-texto-suave, #5b6770); margin-left: .2rem; }

/* Carga horária */
.carga-tabela .carga-dia { text-align: center; padding-left: 3px; padding-right: 3px; min-width: 2.4rem; }
.carga-tabela th.carga-dia { font-weight: 500; line-height: 1.15; }
/* Carga horária: rows as low as the roster tables (Escalas / grupo, ACT: 25px; user's request 2026-10-21). */
.cc-tabela.carga-tabela tbody td { padding-top: 2px; padding-bottom: 2px; font-size: .84rem; line-height: 1.5; }
.carga-tabela .carga-semana { background: var(--cr-blue-50, #eef5fb); font-weight: 600; }
.cc-tabela .cc-marca { margin: 0 .5rem 0 0; vertical-align: middle; }
.logins-painel > .fecho-rodape { padding-top: .6rem; }

/* Escalas de trabalho / ACT (impressão de escalas) */
.escimp-mes + .escimp-mes { margin-top: 1rem; }
.escimp-mes thead th:first-child { text-align: left; }
/* The legend is the table's appendix: the table ends with a line rounded at both ends, the legend under it, then the foot. */
.escimp-legenda { padding: .55rem .75rem .65rem; }
.tabela-rolagem:has(+ .escimp-legenda) { border-bottom: 1px solid var(--cr-line-strong) !important; border-radius: 0 0 10px 10px !important; }

/* Escalas / grupo: a grelha do mês com uma linha por empregado */
/* A grelha de Escalas (chronos.css .esc-grelha) com duas colunas à esquerda: N.º e nome. */
.escgrupo-tabela td { padding: 0; }
.escgrupo-tabela thead th:first-child { width: 4.2rem; }
.escgrupo-tabela thead th:nth-child(2) { width: 15rem; text-align: left; padding-left: 8px; }
.escgrupo-tabela td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
/* Letra das outras tabelas (nomes na do texto, números e códigos na mono); o dia da semana abreviado (SEG, TER…) cabe
   na mesma largura de célula sem o espaçamento dos cabeçalhos. */
.tabela-dados.escgrupo-tabela { font-family: inherit; }
.tabela-dados.escgrupo-tabela input:not([type=checkbox]), .escgrupo-tabela td.carga-dia { font-family: var(--cr-font-mono); }
.escgrupo-tabela th.carga-dia { letter-spacing: 0; font-size: .7rem; }
/* Printed (user's request 2026-10-21): the 31 days get the width — a narrow number and name, small type, no side padding. */
@media print {
    .escgrupo-tabela { table-layout: fixed; width: 100%; min-width: 0; }
    .escgrupo-tabela thead th:first-child { width: 2.4rem; }
    .escgrupo-tabela thead th:nth-child(2) { width: 9.5rem; padding-left: 3px; }
    .escgrupo-tabela th, .escgrupo-tabela td { padding-left: 0; padding-right: 0; font-size: 7.5pt; }
    .escgrupo-tabela th.carga-dia { font-size: 6.5pt; }
    .escgrupo-tabela td:nth-child(-n+2) { padding: 1px 3px; overflow: hidden; text-overflow: ellipsis; }
    .escgrupo-tabela input:not([type=checkbox]) { padding: 0; font-size: 7.5pt; text-overflow: clip; }   /* two letters whole, never "DC" for DO */
}
.escgrupo-tabela td:nth-child(-n+2) { padding: 2px 8px; white-space: nowrap; }

/* Todos / Nenhum por cima da procura do critério de / a. */
.intervalo-atalhos {
    flex: 1 1 100%;
    gap: 1rem;
    margin-bottom: 0;
    padding: 0 0 .4rem;
}

/* Inserção manual de horas (COMBI): one cell per employee and day — a tick box and the day's pairs, the terminal's in
   grey and the manual ones in blue. */
.man-form {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 0;
}

/* The criteria bar above the actions bar: its lists open over it. */
.man-criterios {
    position: relative;
    z-index: 20;
}

/* The search box of a one-choice list (EscolhaFiltro Procura). */
.escolha-procura {
    margin-bottom: .35rem;
}

.escolha-lista .menu-opcao[hidden] {
    display: none;
}

/* The obra list wide enough for the whole names. */
.man-obra-escolha .escolha-lista {
    width: max-content;
    max-width: min(48rem, 90vw);
}

.man-criterios .segmentado {
    align-items: center;
    gap: 3px;
}

/* The actions read as buttons: Dia Inteiro / Manhã / Tarde white, Marcar blue. */
.man-criterios .segmentado button {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--cr-line-strong);
    color: var(--cr-text);
}

    .man-criterios .segmentado button:hover {
        background: var(--cr-surface-2);
    }

.man-criterios .man-horas button {
    background: var(--cr-blue-600);
    box-shadow: none;
    color: #fff;
}

    .man-criterios .man-horas button:is(:hover, :focus, :active) {
        background: var(--cr-blue-700, #173f94);
        color: #fff;
    }

.man-hora {
    width: 4.4rem;
    height: 1.75rem;
    padding: 0 .4rem;
    border: 1px solid var(--cr-line-strong);
    border-radius: 6px;
    background: #fff;
    font-size: .86rem;
}

.man-tabela label {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    cursor: pointer;
}

.man-tabela th.man-dia {
    text-align: center;
    line-height: 1.15;
}

.man-tabela .man-fds {
    background: rgba(29, 79, 184, .06);
}

.man-pares {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: .8rem;
    white-space: nowrap;
}

/* Day columns as wide as their pairs; the rest of the width goes to Nome. */
.man-tabela th.man-dia,
.man-tabela td.man-celula {
    white-space: nowrap;
}

.man-tabela th.man-nome {
    width: 100%;
}

.man-par {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* The obra of a pair: a small tag ("Obra 115"), so the code does not read as part of the times. */
.man-obra-tag {
    padding: 0 .35rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.35;
    opacity: .85;
}

.man-real {
    color: var(--cr-text-2);
}

/* The day's totals under its pairs: normal hours, overtime after "+". */
.man-totais {
    display: block;
    margin-top: .15rem;
    padding-top: .1rem;
    border-top: 1px dashed var(--cr-line);
    font-size: .74rem;
    font-weight: 600;
    color: var(--cr-text-2);
}

.man-totais-extra {
    color: var(--cr-blue-600);
}

.man-manual {
    color: var(--cr-blue-600);
    font-weight: 700;
}

/* Exportação para vencimentos: os avisos do VB6, fechados até se abrirem. */
.exp-avisos > summary {
    cursor: pointer;
    font-weight: 600;
}

.exp-avisos[open] > summary {
    margin-bottom: .4rem;
}

.exp-avisos.painel {
    padding: .45rem .8rem;
}

/* Controlo de vencimentos da COMBI: uma coluna estreita por dia, com as cores do VB6 nas células. */
.cv-grelha .cv-dia {
    text-align: center;
    padding-inline: .25rem;
    white-space: nowrap;
    font-size: .78rem;
}

.cv-grelha th.cv-dia .cv-sem {
    display: block;
    font-size: .62rem;
    opacity: .75;
}

.cv-grelha th.cv-total {
    white-space: normal;
}

.cv-grelha td.cv-dia a {
    color: inherit;
}

/* Folha de ponto (colunas do VB6): colunas de horas estreitas e centradas, observações com as quebras de linha do VB6. */
.fp-grelha .fp-c {
    text-align: center;
    white-space: nowrap;
}

.fp-grelha .fp-obs {
    white-space: pre-line;
    min-width: 14rem;
}


.trf-data {
    width: 10rem;
}

.trf-novo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-right: auto;
}

.trf-novo input {
    width: 6rem;
}

/* Logins: Apagar beside Exportar Excel; the ticked count in a small badge (hidden with none). */
.logins-apagar .logins-apagar-n { min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: rgba(200, 40, 60, .12); font-size: .78rem; font-weight: 700; }
.logins-apagar:disabled .logins-apagar-n { display: none; }

/* Processos: the employee in the bar, a link with the look of the bar's buttons. */
.grelha-emp { text-decoration: none; }

/* TT ↔ Orgânico: one card, the employee as its title, Confirmar at its foot. */
.tt-cartao { flex: none; align-self: flex-start; width: max-content; max-width: 100%; }
.tt-emp { color: inherit; text-decoration: none; }
.tt-emp .mono { color: var(--cr-blue-600); margin-right: .35rem; }
.tt-cartao > .tabela-rodape { margin-top: 1rem; }
/* Notas: the textarea takes the card's height, the foot stays under it. */
.notas-cartao { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.notas-cartao > textarea { flex: 1 1 auto; min-height: 8rem; resize: none; }
.notas-cartao > .tabela-rodape { margin-top: .75rem; }

.trf-tt {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.trf-tt label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.trf-tt input[name=novo] {
    width: 8rem;
}

/* Mapas Excel dos empregados: critérios em linha. */
.exc-criterios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.1rem;
}

.exc-criterios label {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.exc-criterios input.mono:not([type=date]) {
    width: 6rem;
}

/* ---- Trabalho suplementar (val_HE.frm, List_HE.frm) ---- */
/* Valorização: the ticked codes on the left, the lines the valuation writes on the right. */
.he-val {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    gap: .75rem;
    min-height: 0;
}

    .he-val > .logins-painel {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

.he-codigos {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: .6rem .8rem;
}

.he-codigos-lista {
    overflow: auto;
    min-height: 0;
}

    .he-codigos-lista .menu-opcao {
        display: flex;
        gap: .45rem;
        align-items: baseline;
        padding: .15rem 0;
        white-space: nowrap;
    }

@media (min-width: 641px) {
    .logins > .he-val {
        flex: 0 1 auto;
    }
}

@media (max-width: 900px) {
    .he-val { grid-template-columns: 1fr; }
}

/* Registo: three header rows, as the legal register. */
.he-registo thead th {
    text-align: center;
    vertical-align: middle;
    white-space: normal;
}

/* Validação de horas extras (VAL_EXTR.FRM): employee / section rows across the table, the rubric box of each line. */
/* The employee row in the light blue of the "Total do empregado" rows (user's request 2026-10-20). */
.anomalias .tabela-dados.he-validacao tbody tr.he-val-emp td {
    background: #e8effd;
    font-weight: 600;
    border-top: 2px solid var(--grelha-forte);
}

.anomalias .tabela-dados.he-validacao tbody tr.he-val-grupo td {
    background: #fdeaea;
    font-weight: 600;
    text-align: center;
}

.he-val-ano {
    font-weight: 500;
    color: var(--cr-text);
}

    .he-val-ano-rotulo {
        text-transform: uppercase;
    }

.he-val-sep {
    margin: 0 .5rem;
    color: var(--cr-text-3);
}

    .he-val-ano b {
        font-weight: 700;
        color: var(--cr-blue-600);
    }

    .he-val-ano.excedido {
        color: var(--cr-danger);
        font-weight: 600;
    }

.anomalias .tabela-dados.he-validacao tbody tr.he-val-fechada td {
    background: #ecedea;
    color: var(--cr-text-3);
}

.anomalias .tabela-dados.he-validacao tbody td.he-val-apos24 {
    background: #ffeaff;
}

.he-validacao .he-val-marca {
    width: 2rem;
    text-align: center;
}

.he-validacao .he-val-rubrica input {
    width: 6.5rem;
}

/* Rubrica as wide as its box; what it gave up goes to Descrição. */
.he-validacao th.he-val-rubrica {
    width: 1%;
    white-space: nowrap;
}

.he-validacao th.he-val-desc {
    width: 22%;
}

.he-val-marcadas {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
    white-space: nowrap;
}

    .he-val-marcadas input {
        width: 6.5rem;
    }


/* Mapa de presenças / ausências: each day a heading row in the app's blue; Nome and Justificação get the room the
   Data column had (2026-10-20). */
.anomalias .tabela-dados.pres-tabela tbody tr.pres-dia td {
    background: #e8effd;
    color: var(--cr-blue-600);
    font-weight: 600;
    border-top: 2px solid var(--grelha-forte);
}

.pres-tabela .pres-nome {
    width: 22%;
}

.pres-tabela .pres-justif {
    width: 24%;
}

/* The employee's merged N.º / Nome while one of his rows is under the pointer (chronos.js), in the row hover's blue. */
.tabela-dados tbody tr td.emp-realce-cel,
.anomalias .tabela-dados.ano-grelha tbody tr td.emp-realce-cel,
.tabela-dados.ano-tabela tbody tr td.ano-emp.emp-realce-cel {
    background: #eef2f9;
}

/* Mapa de férias header (2026-10-20): the month's name stays in sight while its days scroll under it (it sticks right
   after the fixed N.º / Nome), the month row has its grid lines, and each month's count reads "Férias". */
/* The month's thick line on its right edge, the same edge as the "Férias" column below it (header row 2 and body);
   it was on the left edge of the next month before, 2px away from the one below (2026-10-20). */
/* Month names centred over their days (user's request 2026-10-23; before, stuck to the left while scrolling). */
.tabela-dados.mf-tabela thead th.mf-mes {
    text-align: center;
    border-left: 0;
    border-right: 2px solid #0f2440;
}

/* The row under the pointer: N.º / Nome and the month counts light up with the days (holiday / weekend colours stay). */
.tabela-dados.mf-tabela tbody tr:hover td:is(.mf-fixa, .mf-soma, .mf-sem) {
    background: #eef2f9;
}


/* Mapa de picagens da app: the map and the list share the card (the list wider than in the employee card: N.º and Nome
   too), both as tall as the window allows. */
.pic-app-painel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.emp-picagens.pic-app {
    grid-template-columns: minmax(0, 1fr) minmax(44rem, 52%);
    padding: .6rem;
    min-height: calc(100vh - 19rem);
}

    .emp-picagens.pic-app .emp-mapa {
        min-height: calc(100vh - 20rem);
    }

    .emp-picagens.pic-app > .tabela-rolagem {
        max-height: calc(100vh - 20rem);
    }

    /* Fixed columns (user's request 2026-10-20): another employee or period never reshuffles them; Nome takes the rest,
       whole names on one line. */
    .emp-picagens.pic-app .tabela-dados {
        table-layout: fixed;
        width: 100%;
    }

        .emp-picagens.pic-app .tabela-dados th:nth-child(1) { width: 4.6rem; }
        .emp-picagens.pic-app .tabela-dados th:nth-child(3) { width: 6.6rem; }
        .emp-picagens.pic-app .tabela-dados th:nth-child(4) { width: 4.2rem; }
        .emp-picagens.pic-app .tabela-dados th:nth-child(5) { width: 5.4rem; }
        .emp-picagens.pic-app .tabela-dados th:nth-child(6) { width: 14rem; }
        .emp-picagens.pic-app .tabela-dados th:nth-child(7) { width: 2.8rem; }

    /* The punch of the pin clicked on the map (chronos.js). */
    .emp-picagens tbody tr.ativa td {
        background: var(--cr-blue-100);
        box-shadow: inset 0 1px 0 var(--cr-blue-600), inset 0 -1px 0 var(--cr-blue-600);
        font-weight: 600;
    }

    /* Local is no longer the last column there: it still wraps; the last one is the icon that opens the day. */
    .emp-picagens.pic-app td:nth-last-child(2) {
        white-space: normal;
    }

    .emp-picagens.pic-app td.pic-app-abrir {
        width: 1%;
        padding: .1rem .3rem;
    }

    .pic-app-abrir .btn-navegar {
        width: 1.55rem;
        height: 1.55rem;
    }

/* The day's punches of the app in Movimentos de ponto: the last card, closed (only its title, like the day's card);
   opened, a map with the list beside it takes the card's free height and the classification folds to its title. */
.mov-pic-app > summary {
    cursor: pointer;
    list-style: none;
}

    .mov-pic-app > summary::-webkit-details-marker {
        display: none;
    }

    .mov-pic-app > summary .icone {
        width: 1rem;
        height: 1rem;
    }

    .mov-pic-app[open] > summary .icone {
        transform: rotate(90deg);
    }

.mov-pic-app:not([open]) > summary {
    border-bottom: 0;
}

.mov-pic-app[open] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 20rem;
}

    /* The browser wraps a details' content in its own block box: without this the map stops at its min-height. */
    .mov-pic-app[open]::details-content {
        display: contents;
    }

    .mov-pic-app .emp-picagens {
        flex: 1 1 auto;
        min-height: 16rem;
        padding: .5rem;
        grid-template-columns: minmax(0, 1fr) 27rem;
    }

    /* Fixed columns: going to another employee or day never reshuffles them; the place name gets the room. */
    .mov-pic-app .emp-picagens .tabela-dados {
        table-layout: fixed;
        width: 100%;
    }

        .mov-pic-app .emp-picagens .tabela-dados th:nth-child(1) { width: 4.2rem; }
        .mov-pic-app .emp-picagens .tabela-dados th:nth-child(2) { width: 5.4rem; }

.mov-corpo:has(> .mov-pic-app[open]) .mov-classificacao > :not(.mov-classificacao-titulo) {
    display: none !important;
}

.mov-corpo:has(> .mov-pic-app[open]) .mov-classificacao-titulo {
    border-bottom: 0;
}

/* Away from the place: the chip and the distance on one line, both centred on it; wrapping keeps them left aligned. */
.pic-fora {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .4rem;
}

    /* Pulled left by its own inner padding: the chip's text lines up with the place names of the other rows. */
    .emp-picagens td .pic-fora .emp-escala-aviso {
        margin-left: -.4rem;
    }

/* "Fora do local" in a list cell: a small chip that wraps under the place / coordinates instead of overlapping them. */
.emp-picagens td .emp-escala-aviso {
    padding: 0 .4rem;
    margin-left: .25rem;
    font-size: .74rem;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

    .mov-pic-app .emp-mapa {
        min-height: 16rem;
    }

/* The row under the pointer lights its own N.º / Nome too (a one-row employee; for several rows chronos.js lights them). */
.tabela-dados.ano-tabela tbody tr:hover td.ano-emp,
.anomalias .tabela-dados.ano-grelha tbody tr:hover td.ano-emp {
    background: #eef2f9;
}

/* Mão de obra de subempreiteiros: N.º and Nome stay in view while the days scroll sideways (the group titles too);
   Saturday / Sunday colour the whole day header. */
.tabela-dados.mos-tabela .mos-num,
.tabela-dados.mos-tabela .mos-nome {
    position: sticky;
    z-index: 1;
}

.tabela-dados.mos-tabela .mos-num {
    left: 0;
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
}

.tabela-dados.mos-tabela .mos-nome {
    left: 4.5rem;
    white-space: nowrap;
    box-shadow: inset -1px 0 0 var(--grelha-forte);
}

.tabela-dados.mos-tabela thead .mos-num,
.tabela-dados.mos-tabela thead .mos-nome {
    z-index: 3;
}

.mos-grupo {
    position: sticky;
    left: .8rem;
    display: inline-block;
}

.anomalias .tabela-dados.mos-tabela thead th.tipo-sa { background: #dff1ff; }
.anomalias .tabela-dados.mos-tabela thead th.tipo-do { background: #bfe3ff; }

/* Every day column the same width (room for "10:30"). */
.tabela-dados.mos-tabela .mos-dia {
    width: 3.6rem;
    min-width: 3.6rem;
    max-width: 3.6rem;
}

/* Horas trabalhadas por obra: the obra shortened (whole name in the tooltip) so the table fits without sideways scroll. */
.hpo-obra {
    max-width: 22rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Mapas Excel (export_ex.frm; redesign 2026-10-21): the dates beside their tick, the year a short box, the items in
   columns that fill the card (top to bottom, then the next column) and scroll inside it. */
.exc-datas { display: inline-flex; align-items: center; gap: .35rem; }
.exc-opcoes { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .6rem .75rem; min-width: 0; width: max-content; }
.exc-barra { flex-wrap: nowrap; }
.exc-datas .data-app-controlo .form-control, .exc-datas input[type=date] { width: 8.6rem; }
.exc-ano input { width: 4.5rem; }
.exc-itens > .exc-lista {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(14, auto);
    grid-auto-columns: minmax(12rem, 1fr);
    gap: .1rem 1rem;
    padding: .7rem 1.1rem;
    align-content: start;
}
.exc-lista .menu-opcao { white-space: nowrap; }
.exc-itens .tabela-rodape { justify-content: flex-start; }
.exc-itens .tabela-rodape > .espaco { flex: 1 1 auto; }
section.painel.exc-itens > .tabela-rolagem.exc-lista { padding: .7rem 1.1rem; }
.exc-lista .menu-opcao > .form-check-input { margin: 0 .5rem 0 0; }
.selecao-vazia { margin: 0; padding: .35rem .2rem; color: var(--cr-text-3); font-size: .85rem; white-space: nowrap; }
.exc-pilula { gap: .4rem; cursor: pointer; }
.exc-pilula .form-check-input { margin: 0; }
/* Horários: the access schedules' title in the list, and their repetition days. */
.hor-lista-grupo { display: block; padding: .6rem .5rem .2rem; color: var(--cr-text-3); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.hor-dias { display: grid; grid-template-columns: repeat(2, max-content); gap: .4rem 1.25rem; }
/* Dados da unidade: the logo's preview. */
.unidade-logotipo { min-height: 4rem; display: flex; align-items: center; }
.unidade-logotipo img { max-width: 14rem; max-height: 6rem; object-fit: contain; }
.fecho-rodape > .espaco { margin-right: auto; }

/* Folha de ponto › the schedules' legend (absentismo.frm Print_Legenda), right under the sheet. */
.fp-legenda {
    width: auto;
    min-width: 50%;
    margin-top: .8rem;
}

    .fp-legenda td:first-child {
        white-space: nowrap;
    }