/* =============================================================================================
   Empregados (VB6 emprega_ago.frm) — the whole screen in the window on desktop: the list on the left
   (own scroll), the card on the right (identity strip, tabs, side column with holidays and the
   automatic justification). Each tab is laid out to fit without scrolling; only the list, the
   justification table and, on narrow windows, the yearly roster scroll inside their boxes.
   ============================================================================================= */
.empregados {
    --e-contorno: rgba(15, 36, 64, 0.38);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    font-size: .92rem;
}

.emp-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem 1rem;
}

    .emp-cabecalho .rotulo-modulo {
        margin: 0;
    }

.emp-alerta {
    flex: 1 1 20rem;
    font-size: .88rem;
}

.empregados .painel {
    padding: .7rem .85rem;
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--cr-line);
}

.empregados .painel-titulo {
    margin-bottom: .6rem;
    font-size: .88rem;
}

.empregados .form-control-sm,
.empregados .form-select-sm {
    min-height: 1.85rem;
    padding-top: .16rem;
    padding-bottom: .16rem;
    font-size: .86rem;
    color: var(--cr-text);
    border-color: var(--e-contorno);
}

    .empregados .form-control-sm:disabled,
    .empregados .form-select-sm:disabled,
    .empregados .form-control-sm[readonly] {
        background: #f3f6fb;
        color: var(--cr-text-2);
    }

.empregados .campo {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
    margin: 0;
}

/* Mandatory field: "*" after the label (legend in the card's footer); red border when a save left it empty. */
.obrigatorio {
    margin-left: .2rem;
    color: var(--cr-danger);
    font-weight: 700;
}

.campo.em-falta .form-control,
.campo.em-falta .form-select {
    border-color: var(--cr-danger);
    box-shadow: 0 0 0 2px rgba(200, 40, 60, .15);
}

.emp-legenda-obrigatorio {
    color: var(--cr-text-2);
    font-size: .84rem;
}

.empregados .campo-rotulo {
    font-family: var(--cr-font-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
    color: var(--cr-blue-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campo-escondido .form-control {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: #f3f6fb;
    color: var(--cr-text-3);
}

.distintivo-perigo { background: rgba(196, 43, 59, 0.12); color: var(--cr-danger); }

.emp-nota {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--cr-text-2);
}

/* ---- Two columns: list | card ---- */
.emp-grelha {
    display: grid;
    grid-template-columns: 21rem minmax(0, 1fr);
    gap: .6rem;
    min-height: 0;
}

/* ---- List of the unit ---- */
.emp-lista {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-height: 0;
}

.emp-lista-filtros {
    display: flex;
    gap: .3rem;
}

.emp-filtro {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 1;
    justify-content: center;
    padding: .3rem .5rem;
    border: 1px solid var(--cr-line-strong);
    border-radius: 7px;
    color: var(--cr-text-2);
    font-size: .86rem;
    text-decoration: none;
    white-space: nowrap;
}

    .emp-filtro .icone {
        width: .9rem;
        height: .9rem;
    }

    .emp-filtro.ativo {
        background: var(--cr-blue-100);
        border-color: rgba(42, 91, 234, 0.35);
        color: var(--cr-blue-600);
        font-weight: 600;
    }

.emp-lista-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    font-size: .84rem;
    color: var(--cr-text-2);
}

.emp-lista-nomes {
    flex: 1 1 auto;
    min-height: 8rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 -.3rem;
    padding: 0 .3rem;
}

.emp-lista-grupo {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .45rem .4rem .2rem;
    background: #fff;
    color: var(--cr-blue-600);
    font-family: var(--cr-font-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Number column just wide enough for 5 digits (the usual maximum; METAL's longer numbers widen their own row), so
   the names get the room. */
.emp-lista-opcao {
    display: grid;
    grid-template-columns: minmax(2.6rem, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: .4rem;
    padding: .32rem .45rem .32rem .3rem;
    border-radius: 6px;
    color: var(--cr-text);
    text-decoration: none;
    font-size: .9rem;
}

    .emp-lista-opcao .mono {
        color: var(--cr-text-2);
        font-size: .84rem;
        text-align: right;
    }

    .emp-lista-opcao:hover {
        background: var(--cr-blue-100);
    }

    .emp-lista-opcao.ativa {
        background: rgba(42, 91, 234, 0.12);
        box-shadow: inset 3px 0 0 var(--cr-blue-600);
        color: var(--cr-blue-600);
        font-weight: 600;
    }

    .emp-lista-opcao.demitido .emp-lista-nome,
    .emp-lista-opcao.transferido .emp-lista-nome {
        color: var(--cr-text-3);
    }

/* Employees: the short name (Nome abreviado); the full name stays in the tooltip and in the search. */
.emp-lista-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .86rem;
}

.emp-marca {
    padding: 0 .3rem;
    border-radius: 4px;
    background: rgba(196, 43, 59, 0.1);
    color: var(--cr-danger);
    font-size: .68rem;
    font-weight: 700;
}

.emp-lista-opcao.transferido .emp-marca {
    background: rgba(184, 110, 0, 0.12);
    color: var(--cr-warning);
}

.emp-novo {
    display: flex;
    gap: .3rem;
    padding-top: .4rem;
    border-top: 1px solid var(--cr-line);
}

    .emp-novo input {
        width: 6.5rem;
    }

    .emp-novo .btn {
        flex: 1;
    }

/* ---- The card ---- */
.emp-ficha {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
    min-height: 0;
}

/* Top of the employee card (identity, options, Mais), over the tabs. */
.emp-topo {
    position: relative;
    z-index: 5;
    margin-bottom: .7rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--cr-line);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .5rem 1rem;
}

/* The face terminals keep a square photo (300×300): a square frame, so no face is cut. */
.emp-foto {
    position: relative;
    display: grid;
    place-items: center;
    width: 5.4rem;
    aspect-ratio: 1;
    border-radius: var(--cr-radius-sm);
    overflow: hidden;
    background: linear-gradient(160deg, var(--cr-ink-700), var(--cr-ink-900));
    color: #fff;
    font-family: var(--cr-font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

    .emp-foto img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Number | Nome | Nome abreviado on the first row; the badges and options below start where Nome starts. */
.emp-identidade {
    display: grid;
    grid-template-columns: auto minmax(14rem, 30rem) minmax(11rem, 17rem) max-content minmax(max-content, 1fr);
    align-items: end;
    gap: .35rem .6rem;
    min-width: 0;
}

.emp-linha-1 {
    display: contents;
}

.emp-numero {
    padding-bottom: .3rem;
    color: var(--cr-text-2);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
}

/* The names lead the card. */
.empregados .emp-nome .form-control,
.empregados .emp-nome-curto .form-control {
    font-size: .95rem;
    font-weight: 400;
    color: var(--cr-strong);
}

.emp-linha-2 {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .9rem;
    min-height: 1.4rem;
}

.emp-opcao {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--cr-text);
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
}

    .emp-opcao .form-check-input {
        width: 1rem;
        height: 1rem;
        margin: 0;
    }

/* Overtime of the year: a read-only field like Nome (title above, value below). */
/* Overtime: just as wide as its title. */
.empregados .campo.emp-extras {
    min-width: max-content;
}

    .empregados .emp-extras .campo-rotulo {
        overflow: visible;
    }

    .emp-extras .rotulo-curto {
        display: none;
    }

.emp-extras-valor {
    min-width: 0;
    background: var(--cr-surface-2);
    color: var(--cr-strong);
    font-weight: 600;
    text-align: right;
}

.emp-acoes {
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
}

.emp-navegar {
    display: inline-flex;
    gap: 2px;
}

    .emp-navegar .btn {
        padding: .28rem .45rem;
        line-height: 1;
    }

        .emp-navegar .btn .icone {
            width: 1rem;
            height: 1rem;
        }

    .emp-navegar .btn[aria-disabled="true"] {
        opacity: .35;
        pointer-events: none;
    }

.emp-mais {
    position: relative;
}

    .emp-mais > summary {
        list-style: none;
        white-space: nowrap;
    }

        .emp-mais > summary::-webkit-details-marker {
            display: none;
        }

.emp-mais-lista {
    position: absolute;
    right: 0;
    top: calc(100% + .3rem);
    z-index: 60;
    display: flex;
    flex-direction: column;
    min-width: 15rem;
    padding: .35rem;
    background: var(--cr-surface-solid);
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius-sm);
    box-shadow: var(--cr-shadow-lg);
}

.emp-mais-opcao {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .6rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--cr-text);
    font-size: .86rem;
    text-align: left;
    text-decoration: none;
}

    .emp-mais-opcao:hover {
        background: var(--cr-blue-100);
    }

    .emp-mais-perigo {
        margin-top: .3rem;
        padding-top: .5rem;
        border-top: 1px solid var(--cr-line);
        border-radius: 0 0 6px 6px;
        color: var(--cr-danger);
    }

        .emp-mais-perigo:hover {
            background: rgba(200, 40, 60, .08);
        }

    .emp-mais-opcao.sem-acesso {
        color: rgba(16, 36, 69, 0.42);
        cursor: not-allowed;
    }

        .emp-mais-opcao.sem-acesso:hover {
            background: none;
        }

    .emp-mais-opcao .icone {
        width: .85rem;
        height: .85rem;
        flex: none;
    }

/* ---- Body: tabs | side column ---- */
.emp-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: .6rem;
    min-height: 0;
}

.emp-abas {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.emp-aba-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Fixed footer of the card: Suprimir on the left, the "unsaved" notice and Guardar on the right. */
.emp-rodape {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--cr-line);
}

    .emp-rodape .espaco {
        flex: 1;
    }

.emp-por-guardar {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #7a4a00;
    font-size: .84rem;
    font-weight: 600;
}

    .emp-por-guardar[hidden] {
        display: none;
    }

    .emp-por-guardar .icone {
        width: .95rem;
        height: .95rem;
    }

.emp-abas-titulos {
    display: flex;
    gap: .2rem;
    margin: -.2rem 0 .6rem;
    border-bottom: 1px solid var(--cr-line);
}

.emp-aba-titulo {
    padding: .35rem .8rem;
    border-radius: 7px 7px 0 0;
    color: var(--cr-text-2);
    font-family: var(--cr-font-display);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .emp-aba-titulo:hover {
        color: var(--cr-text);
        background: rgba(42, 91, 234, 0.06);
    }

    .emp-aba-titulo.inativa {
        color: rgba(16, 36, 69, 0.35);
        cursor: not-allowed;
    }

.emp-aba {
    display: none;
    min-height: 0;
}

/* The checked radio shows its panel and lights its title (no script: works before chronos.js). */
#aba-gerais:checked ~ .emp-aba-gerais,
#aba-pessoais:checked ~ .emp-aba-pessoais,
#aba-producao:checked ~ .emp-aba-producao,
#aba-formacao:checked ~ .emp-aba-formacao {
    display: grid;
}

#aba-escala:checked ~ .emp-aba-escala {
    display: flex;
}

#aba-gerais:checked ~ .emp-abas-titulos label[for="aba-gerais"],
#aba-pessoais:checked ~ .emp-abas-titulos label[for="aba-pessoais"],
#aba-producao:checked ~ .emp-abas-titulos label[for="aba-producao"],
#aba-escala:checked ~ .emp-abas-titulos label[for="aba-escala"],
#aba-formacao:checked ~ .emp-abas-titulos label[for="aba-formacao"] {
    color: var(--cr-blue-600);
    box-shadow: inset 0 -2px 0 var(--cr-blue-600);
}

.emp-aba-radio:focus-visible ~ .emp-abas-titulos {
    outline: 2px solid rgba(30, 198, 227, 0.5);
    outline-offset: 2px;
}

.emp-aba-gerais,
.emp-aba-pessoais {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    align-items: start;
}

.emp-aba-producao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    align-items: start;
}

.emp-bloco {
    display: flex;
    flex-direction: column;
    gap: .42rem;
    min-width: 0;
    margin: 0;
    padding: .55rem .65rem .65rem;
    border: 1px solid var(--cr-line);
    border-radius: 9px;
    background: #fbfcff;
}

    .emp-bloco > legend {
        float: left;
        width: 100%;
        margin: 0 0 .1rem;
        padding: 0;
        color: var(--cr-text);
        font-family: var(--cr-font-display);
        font-size: .82rem;
        font-weight: 700;
    }

.emp-pares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem .5rem;
}

.emp-plano-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.6rem auto;
    gap: .3rem;
}

.emp-vinculo {
    align-self: flex-start;
}

    .emp-vinculo label {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .18rem .65rem;
        border-radius: 7px;
        font-size: .84rem;
        cursor: pointer;
    }

        .emp-vinculo label:has(input:checked) {
            background: #fff;
            color: var(--cr-blue-600);
            font-weight: 600;
            box-shadow: 0 1px 2px rgba(10, 24, 48, 0.12);
        }

    .emp-vinculo input {
        position: absolute;
        opacity: 0;
    }

.emp-turno-valores {
    display: grid;
    grid-template-columns: 3.6rem auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem;
    color: var(--cr-text-2);
    font-size: .8rem;
}

/* Months with fixed shift allowance (VB6 fgt): twelve small toggles. */
.emp-meses-titulo {
    margin-top: .35rem;
    color: var(--cr-text);
    font-size: .84rem;
    font-weight: 600;
}

.emp-meses {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin-top: .2rem;
}


    .emp-meses label {
        position: relative;
        cursor: pointer;
    }

    .emp-meses input {
        position: absolute;
        opacity: 0;
    }

    .emp-meses span {
        display: block;
        padding: .32rem 0;
        border: 1px solid #9fb0c9;
        border-radius: 6px;
        background: #fff;
        color: var(--cr-strong);
        font-size: .86rem;
        font-weight: 500;
        text-align: center;
    }

    .emp-meses label:hover span {
        border-color: var(--cr-blue-600);
        background: var(--cr-blue-100);
    }

    .emp-meses input:checked + span {
        background: var(--cr-blue-600);
        border-color: var(--cr-blue-600);
        color: #fff;
        font-weight: 700;
    }

        .emp-meses input:checked + span::before {
            content: "✓ ";
        }

    .emp-meses input:focus-visible + span {
        box-shadow: var(--cr-glow);
    }

    .emp-meses input:disabled + span {
        opacity: .6;
        cursor: not-allowed;
    }

    .emp-meses .mes-atual span {
        border: 2px solid var(--cr-ink-900);
    }

.emp-morada {
    min-height: 4.2rem;
    resize: vertical;
}

/* ---- Yearly roster (VB6 fg2 / fg3) ---- */
/* The roster tab fits its room: the table takes what the bar and the legend leave and its rows share that height,
   so the table itself never scrolls (rows only shrink to a minimum on very small windows). */
.emp-aba-escala {
    flex-direction: column;
    gap: .45rem;
    min-height: 0;
}

    /* At least the 12 months at a readable height; on a window too short for that the tab scrolls, never the table. */
    .emp-aba-escala > .emp-escala-rolagem {
        flex: 1 1 0;
        min-height: 21rem;
        overflow: hidden;
    }

    .emp-aba-escala > .emp-escala-barra,
    .emp-aba-escala > .emp-legenda {
        flex: none;
    }

.emp-escala-aviso {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid #f5c2c8;
    border-radius: 7px;
    background: #fdecee;
    color: #8e1e2a;
    font-size: .88rem;
    font-weight: 600;
}

    .emp-escala-aviso .icone {
        width: 1rem;
        height: 1rem;
    }

.emp-escala-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .8rem;
}

    .emp-escala-barra .espaco {
        flex: 1;
    }

.emp-contagem {
    font-size: .82rem;
    color: var(--cr-text-2);
    white-space: nowrap;
}

    .emp-contagem b {
        color: var(--cr-strong);
        font-family: var(--cr-font-mono);
        font-weight: 600;
    }

    .emp-contagem.excedido b {
        color: var(--cr-danger);
    }

.emp-escala-rolagem {
    overflow-x: auto;
    border: 1px solid var(--cr-line-strong);
    border-radius: 8px;
    background: #fff;
}

.emp-escala {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: var(--cr-font-mono);
    font-size: .64rem;
}

    .emp-escala th {
        padding: .2rem 0;
        border: 1px solid #b4c4e2;
        background: #dce7ff;
        color: var(--cr-blue-600);
        font-weight: 700;
        text-align: center;
    }

    .emp-escala thead th:first-child,
    .emp-escala tbody th {
        width: 2.8rem;
    }

    .emp-escala tbody th {
        font-family: var(--cr-font-display);
        font-size: .74rem;
        border-right: 2px solid #8fa6d0;
    }

    .emp-escala thead th {
        border-bottom: 2px solid #8fa6d0;
    }

    .emp-escala td {
        height: 1.45rem;
        font-size: .72rem;
        min-width: 1.6rem;
        padding: 0 1px;
        /* Gridlines strong enough to follow a row or a column (also over the coloured days). */
        border: 1px solid #b9c4d6;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        color: var(--cr-text);
    }

/* The VB6 colours, in the tones of the new palette. Days already gone are a little darker. */
.d-sabado { background: #e6efff; }
.d-domingo { background: #cfdcfb; }
.d-feriado { background: #c9efd9; color: #0d5c3d !important; font-weight: 700; }
.d-folga { background: #d9d4fb; color: #3c2f8f !important; }
.d-compensacao { background: #fde9a8; color: #6b4b00 !important; }
.d-obrigatoria { background: #fbd78a; color: #6b4b00 !important; }
.d-descanso { background: #ead2f5; color: #5c2a77 !important; }
.d-ferias { background: #1f9a63; color: #fff !important; font-weight: 700; }
.d-feriasfimsemana { background: #63be93; color: #fff !important; }
/* Half a holiday: a dark-green corner (the half) on the light green, the text dark on the light part. */
.d-meiodiaferias {
    background: linear-gradient(135deg, #1f9a63 0 32%, #c9efd9 32%);
    color: #063d27 !important;
    font-weight: 800;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.d-falta { background: #fde2e5; color: #8e1e2a !important; font-weight: 600; }
.d-extra { background: #dbeafe; color: #1d4ed8 !important; font-weight: 600; }
.d-previsto { background: repeating-linear-gradient(135deg, #fff 0 4px, #fdecee 4px 8px); color: #8e1e2a !important; }
.d-inexistente { background: #26344d; }

.emp-escala td.passado { filter: brightness(.94); }

.emp-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    /* Room for the hover / focus outline of the samples (3px outside), so the last row is never clipped. */
    padding: 4px;
    font-size: .88rem;
}

/* Colour sample + name; the description shows in the tooltip (data-dica). */
.emp-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--cr-text);
    cursor: help;
    border-radius: 5px;
}

    .emp-legenda-item:hover .emp-legenda-cor,
    .emp-legenda-item:focus-visible .emp-legenda-cor {
        outline: 2px solid var(--cr-blue-500);
        outline-offset: 1px;
    }

    .emp-legenda-item:focus-visible {
        outline: none;
    }

.emp-legenda-cor {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    height: 1.45rem;
    padding: 0 .3rem;
    border: 1px solid #b9c4d6;
    border-radius: 4px;
    font-family: var(--cr-font-mono);
    font-size: .72rem;
    color: var(--cr-text);
}

/* ---- Side column ---- */
.emp-lado {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 0;
    overflow-y: auto;
}

.emp-ferias dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .3rem .6rem;
    margin: 0;
    font-size: .98rem;
}

.emp-ferias dt {
    font-weight: 400;
    color: var(--cr-text-2);
}

.emp-ferias dd {
    margin: 0;
    font-family: var(--cr-font-mono);
    color: var(--cr-strong);
    text-align: right;
}

.emp-ferias .total {
    padding-top: .12rem;
    border-top: 1px solid var(--cr-line);
    color: var(--cr-text);
    font-weight: 700;
}

.emp-ferias-aviso {
    margin: .45rem 0 0;
    padding: .25rem .5rem;
    border-radius: 6px;
    background: #fff5e3;
    color: #7a4a00;
    font-size: .9rem;
}

    .emp-ferias-aviso.perigo {
        background: #fdecee;
        color: #8e1e2a;
    }

.emp-justif {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.emp-justif-nova {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .45rem;
}

/* The period (one calendar, PeriodoSelector SoEscolher) and the add button. */
.emp-justif-datas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem;
}

    .emp-justif-datas .periodo {
        display: flex;
        width: 100%;
    }

    .emp-justif-datas .periodo-datas {
        flex: 1;
        font-size: .82rem;
    }

    /* The side column sits on the right of the window: the calendar opens towards the left. */
    .emp-justif-datas .periodo-popover {
        left: auto;
        right: 0;
    }

    .emp-justif-datas .btn {
        padding: .2rem .45rem;
    }

/* The table fits the panel's width (no scroll of its own): fixed columns, the date field fills its cell. With many
   rows it is the side column that scrolls. */
.emp-justif-tabela {
    flex: none;
    overflow: visible;
}

    .emp-justif-tabela .tabela-dados {
        table-layout: fixed;
        font-size: .8rem;
    }

        .emp-justif-tabela .tabela-dados th:nth-child(1) { width: 3.6rem; }
        .emp-justif-tabela .tabela-dados th:nth-child(2) { width: 5.3rem; }

        .emp-justif-tabela .tabela-dados th {
            letter-spacing: .03em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .emp-justif-tabela .tabela-dados th:nth-child(4) { width: 1.8rem; }

        .emp-justif-tabela .tabela-dados th,
        .emp-justif-tabela .tabela-dados td {
            padding: .25rem .4rem;
        }

    .emp-justif-tabela .form-control-sm {
        width: 100%;
        padding-right: .1rem !important;
        min-height: 1.6rem;
        padding: 0 .3rem;
        font-size: .8rem;
    }

.emp-justif-fim {
    margin: 0;
}

.btn-icone {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--cr-text-2);
}

    .btn-icone:hover {
        background: #fdecee;
        color: var(--cr-danger);
    }

    .btn-icone .icone {
        width: .9rem;
        height: .9rem;
    }

.emp-vazio {
    align-self: start;
}

/* ---- Desktop: the page is exactly the window (no page scroll) ---- */
@media (min-width: 1101px) {
    main > .content > .empregados {
        flex: 1 1 0;
        min-height: 0;
    }

    .empregados > .emp-grelha {
        flex: 1 1 0;
    }

    .emp-ficha > .emp-corpo {
        flex: 1 1 0;
    }

    .emp-abas > .emp-aba {
        flex: 1 1 0;
        overflow: auto;
    }
}

/* ---- Narrower windows: side column under the tabs, then everything stacks ---- */
@media (max-width: 1500px) {
    /* Narrower card: the overtime title in short ("Extras 2026"), so Nome keeps its room. */
    .empregados .campo.emp-extras {
        min-width: max-content;
    }

        .emp-extras .rotulo-longo {
            display: none;
        }

        .emp-extras .rotulo-curto {
            display: inline;
        }

    /* The card's buttons go down to the options row, on the right. */
    .emp-identidade {
        grid-template-columns: auto minmax(11rem, 1fr) minmax(10rem, 14rem) max-content;
    }

    .emp-linha-2 {
        grid-column: 2 / 3;
    }

    .emp-linha-1 .emp-acoes {
        grid-row: 2;
        grid-column: 3 / -1;
        align-self: start;
    }

    .emp-aba-gerais,
    .emp-aba-pessoais {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

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

    .emp-lista-nomes {
        max-height: 14rem;
    }

    .emp-identidade {
        grid-template-columns: auto minmax(0, 1fr);
    }

        .emp-linha-1 .emp-nome-curto,
        .emp-linha-1 .emp-extras,
        .emp-linha-1 .emp-acoes {
            grid-column: 2 / -1;
        }

        .emp-linha-1 .emp-acoes {
            grid-row: auto;
            justify-self: start;
        }

    .emp-linha-2 {
        grid-column: 2 / -1;
    }
}

@media (max-width: 640.98px) {
    .emp-topo {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .emp-aba-gerais,
    .emp-aba-pessoais,
    .emp-aba-producao {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Print (Imprimir ficha, the VB6 FichaEmp): the card only, every tab one after the other ---- */
@media print {
    .barra-topo, .barra-estado, .emp-lista, .emp-acoes, .emp-rodape, .emp-abas-titulos, .emp-justif-nova, .emp-alerta, .fundo-app > .mostrador {
        display: none !important;
    }

    .emp-grelha, .emp-corpo {
        display: block;
    }

    .emp-aba {
        display: grid !important;
        margin-bottom: .6rem;
    }

    .emp-aba-escala {
        display: flex !important;
    }

    .empregados .painel {
        box-shadow: none;
        backdrop-filter: none;
    }
}

.emp-sem-linhas {
    color: var(--cr-text-3) !important;
    font-style: italic;
    text-align: center;
}

/* Search box of the list: larger, like the names under it. */
.emp-lista input[type="search"] {
    height: auto;
    padding: .42rem .65rem;
    font-size: .98rem;
}