/* =============================================================================================
   Atualização de movimentos de ponto (VB6 movinB.frm). Same frame as Empregados (empregados.css: the
   list on the left with its own scroll); on the right, in the VB6 order: the employee, the punches of the
   day and of the next one, the classification of the day, then codes | month | actions, and the history.
   On desktop the right column scrolls inside the window (the list stays where it is).
   ============================================================================================= */
/* ---- The card: identity as in Empregados (empregados.css), then the day; only the day scrolls ---- */
/* Nome gets the room; Grupo horário is short (code + a word or two). */
.movimentos .emp-identidade {
    grid-template-columns: 3.6rem minmax(18rem, 1.5fr) minmax(21rem, 1.55fr) minmax(9rem, .6fr) max-content;
}

/* Row 1: Nome | Secção | Grupo horário | Mais; row 2: the options under Nome, Tolerância under Secção, Horas Extras
   under Grupo horário. */
.movimentos .emp-numero { grid-row: 1; grid-column: 1; }
.movimentos .emp-nome { grid-row: 1; grid-column: 2; }
.movimentos .mov-seccao { grid-row: 1; grid-column: 3; }
.movimentos .mov-grupo { grid-row: 1; grid-column: 4; }
.movimentos .emp-linha-1 .emp-acoes { grid-row: 1; grid-column: 5; }
.movimentos .emp-linha-2 { grid-row: 2; grid-column: 2; align-self: start; }   /* right under Nome */
.movimentos .mov-tolerancia { grid-row: 2; grid-column: 3; }
.movimentos .mov-extras { grid-row: 2; grid-column: 4; }

/* Nome as wide for every employee (the number has a fixed column); Tolerância and Horas Extras only as wide as a value. */
.movimentos .mov-tolerancia,
.movimentos .mov-extras {
    justify-self: start;
    width: 5.5rem;
}

/* Horas Extras: the value as wide as its title "Horas Extras 2026" (user's request 2026-10-20). */
.movimentos .mov-extras {
    width: max-content;
    min-width: 5.5rem;
}

    .movimentos .mov-tolerancia .campo-rotulo,
    .movimentos .mov-extras .campo-rotulo {
        overflow: visible;
        white-space: nowrap;
    }

/* The first row level with the top of the photo, as in Empregados (user's request 2026-10-20). */
.movimentos .emp-topo {
    align-items: start;
}


/* Read-only values in the look of the Empregados fields. */
.mov-valor {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #fff;
    color: var(--cr-strong);
}

.movimentos .emp-nome .mov-valor {
    font-size: .95rem;
}

.mov-corpo {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 0;
}

    /* Each block keeps its height: the card scrolls instead of squeezing them. */
    .mov-corpo > * {
        flex: none;
    }

/* A block inside the card: a frame, not another card. */
.mov-bloco {
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius-sm);
    background: #fff;
    overflow: hidden;
}

/* Side: the holiday balance as in Empregados, the saldo in green / red as the VB6. */
.emp-ferias dd.positivo { color: #126a3a; }
.emp-ferias dd.negativo { color: var(--cr-danger); }

.mov-justif tr.ativa td {
    background: var(--cr-blue-100);
    font-weight: 700;
}

/* ---- The punches: the day (wider) and the next one; the VB6 grid, as wide as the pairs it has ---- */
/* The day and the next one side by side, the same width — until one needs more than its half for its punches: it then
   takes what it needs from the other (min-content), and the pair scrolls only when both no longer fit. */
.mov-dias {
    display: grid;
    grid-template-columns: repeat(2, minmax(min-content, 1fr));
    overflow-x: auto;
    gap: .6rem;
}

.mov-dia-cabecalho {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .7rem;
    background: #f5f6f8;
    border-bottom: 1px solid var(--cr-line);
    color: var(--cr-strong);
}

.mov-dia.seguinte .mov-dia-cabecalho {
    background: #fafbfc;
}

.mov-dia-horario {
    text-decoration: none;
    min-width: 2.2rem;
    padding: .05rem .4rem;
    border-radius: 4px;
    background: var(--cr-blue-100);
    color: var(--cr-blue-600);
    text-align: center;
    font-weight: 700;
}

.mov-dia-horario-desc {
    /* width 0: a long description never widens its day (see .mov-dias). */
    flex: 1 1 0;
    width: 0;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mov-dia-data {
    flex: none;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.mov-dia.seguinte .mov-dia-data,
.mov-dia.seguinte .mov-dia-horario-desc {
    color: var(--cr-text-2);
}

/* The horário colours of the VB6 (Pinta_Horario) on the code. */
.mov-dia-cabecalho.horario-sa .mov-dia-horario { background: #dff1ff; color: var(--cr-ink-800); }
.mov-dia-cabecalho.horario-do .mov-dia-horario { background: #bfe3ff; color: var(--cr-ink-800); }
.mov-dia-cabecalho.horario-fr .mov-dia-horario { background: #d8f5d8; color: #126a3a; }
.mov-dia-cabecalho.horario-fe .mov-dia-horario { background: #2e9b4c; color: #fff; }
.mov-dia-cabecalho.horario-fo .mov-dia-horario { background: #d9d5ff; color: var(--cr-ink-800); }
.mov-dia-cabecalho.horario-ds .mov-dia-horario { background: #e6d4ff; color: var(--cr-ink-800); }
.mov-dia-cabecalho.horario-cp .mov-dia-horario,
.mov-dia-cabecalho.horario-ob .mov-dia-horario { background: #fff3bf; color: var(--cr-ink-800); }

.mov-picagens-rolagem {
    overflow-x: auto;
    padding: .45rem .6rem .55rem;
}

.mov-picagens {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .86rem;
}

    /* Entry green, exit red (as the marks of the timeline), on the header cell of each column. */
    .mov-picagens th {
        width: 4.6rem;
        min-width: 4.6rem;
        padding: .2rem .3rem;
        font-size: .74rem;
        font-weight: 600;
        text-align: center;
        border: 1px solid rgba(15, 36, 64, .45);
        border-left-width: 0;
        border-bottom-width: 0;
    }

        .mov-picagens th:first-child {
            border-left-width: 1px;
            border-top-left-radius: 6px;
        }

        .mov-picagens th:last-child {
            border-top-right-radius: 6px;
        }

        .mov-picagens th.entrada {
            background: #dcf3e3;
            color: #116236;
        }

        .mov-picagens th.saida {
            background: #fde3e6;
            color: #a3192c;
        }

    .mov-picagens td {
        height: 1.7rem;
        padding: 0 .3rem;
        text-align: center;
        background: #fff;
        border: 1px solid rgba(15, 36, 64, .45);
        border-left-width: 0;
    }

    .mov-picagens tr:last-child td:first-child { border-bottom-left-radius: 6px; }
    .mov-picagens tr:last-child td:last-child { border-bottom-right-radius: 6px; }

        .mov-picagens td:first-child {
            border-left-width: 1px;
        }

    /* Each pair (entry + exit) is closed by a darker line. */
    .mov-picagens th:nth-child(2n),
    .mov-picagens td:nth-child(2n) {
        border-right: 2px solid rgba(15, 36, 64, .65);
    }

        .mov-picagens th:last-child,
        .mov-picagens td:last-child {
            border-right-width: 1px;
        }

    .mov-picagens .mov-horas td {
        border-bottom: 0;
        font-weight: 600;
        color: var(--cr-strong);
    }

    .mov-picagens .mov-obras td {
        height: 1.3rem;
        border-top: 1px dashed rgba(15, 36, 64, .38);
        background: #fafbfd;
        font-size: .72rem;
        color: var(--cr-text-2);
    }

    .mov-picagens td.repetida {
        color: var(--cr-danger);
        font-weight: 700;
    }

    .mov-picagens td.em-falta::before {
        content: "--:--";
        color: var(--cr-danger);
    }

/* ---- The classification of the day (VB6 fgj): one column per period, as wide as its content ---- */
.mov-classificacao-titulo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .8rem;
    padding: .4rem .7rem;
    background: #f5f6f8;
    border-bottom: 1px solid var(--cr-line);
    color: var(--cr-strong);
    font-size: 1rem;
    font-weight: 700;
}



/* Previous / next day, either side of the title. */
.mov-classificacao-titulo .btn-navegar {
    width: 1.55rem;
    height: 1.55rem;
}

.mov-tipo-dia {
    padding: .05rem .55rem;
    border-radius: 4px;
    font-size: .76rem;
    text-transform: uppercase;
    background: #fff;
    border: 1px solid var(--cr-line);
}

    .mov-tipo-dia.tipo-fr { background: #d8f5d8; }
    .mov-tipo-dia.tipo-fe { background: #2e9b4c; color: #fff; }
    .mov-tipo-dia.tipo-fo { background: #d9d5ff; }
    .mov-tipo-dia.tipo-cp, .mov-tipo-dia.tipo-ob { background: #fff3bf; }
    .mov-tipo-dia.tipo-ds { background: #e6d4ff; }
    .mov-tipo-dia.tipo-sa { background: #dff1ff; }
    .mov-tipo-dia.tipo-do { background: #bfe3ff; }
    .mov-tipo-dia.tipo-df { color: #126a3a; }

.mov-sem-registo {
    margin: 0;
    padding: .8rem;
    color: var(--cr-text-2);
    text-align: center;
}

/* An error of the day (a refused justification, a horário that no longer exists) right over the periods. */
.mov-erro-dia {
    margin: .4rem .9rem 0;
    font-weight: 600;
}

.mov-periodos {
    display: grid;
    justify-content: start;
    width: fit-content;
    max-width: calc(100% - 1.8rem);
    overflow-x: auto;
    margin: .4rem .9rem .5rem;
    border: 1px solid rgba(15, 36, 64, .45);
    border-radius: 6px;
    /* The rows belong to the whole table (each period is a subgrid), so every row has the same height in all the
       periods, even when one description or justification takes two lines. */
    grid-template-rows: auto auto auto minmax(2.6rem, auto) minmax(2.2rem, auto) minmax(2rem, auto);
}

    .mov-periodos.sem-justificacoes {
        grid-template-rows: auto auto auto minmax(2.6rem, auto);
    }

    .mov-periodos.sem-justificacoes .mov-p-justif,
    .mov-periodos.sem-justificacoes .mov-p-justif-desc {
        display: none;
    }

    .mov-periodos.sem-justificacoes .mov-periodo {
        grid-row: span 4;
    }

.mov-periodo {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    border-right: 1px solid rgba(15, 36, 64, .45);
    text-align: center;
    font-size: .8rem;
    min-width: 0;
}

    .mov-periodo:last-child {
        border-right: 0;
    }

    .mov-periodo > div {
        padding: .3rem .45rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid var(--cr-line);
        overflow-wrap: anywhere;
    }

/* The hours of each period: the header row of the table, easy to read. */
.mov-p-horas {
    padding: .4rem .45rem !important;
    border-top: 0 !important;
    background: #f5f6f8;
    color: var(--cr-strong);
    font-size: .9rem;
    font-weight: 700;
    /* Start and end side by side; one over the other when the column is narrow. */
    flex-wrap: wrap;
    gap: 0 .5em;
}
    .mov-p-horas > span { white-space: nowrap; }

/* Many periods in the day (up to 16): the columns share the card's width with no scroll, in smaller type. */
.mov-periodos.muitos .mov-periodo { font-size: .72rem; }
.mov-periodos.muitos .mov-periodo > div { padding: .25rem .2rem; }
.mov-periodos.muitos .mov-p-horas { font-size: .76rem; padding: .3rem .2rem !important; }
.mov-periodos.muitos .mov-p-descricao,
.mov-periodos.muitos .mov-p-justif-desc { font-size: .72rem; hyphens: auto; }
.mov-periodos.muitos .mov-justif-escolha { padding-left: .2rem; padding-right: .2rem; font-size: .72rem; }
.mov-p-duracao { font-weight: 700; }
.mov-p-codigo { font-weight: 700; }
/* The description under the code: readable, not a footnote. */
.mov-p-descricao {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .84rem;
    font-weight: 500;
    color: var(--cr-strong);
    line-height: 1.25;
}
.mov-p-justif { font-weight: 700; }
.mov-p-justif-desc { font-size: .84rem; font-weight: 500; line-height: 1.25; }

/* The VB6 colours of fgj: absences light red, break light green, overtime pink. */
.mov-periodo.classe-falta .mov-p-codigo,
.mov-periodo.classe-falta .mov-p-descricao { background: #ffd9d9; }
.mov-periodo.classe-pausa .mov-p-codigo,
.mov-periodo.classe-pausa .mov-p-descricao { background: #e3f6e3; }
.mov-periodo.classe-extra .mov-p-codigo,
.mov-periodo.classe-extra .mov-p-descricao { background: #fbe3f1; }
.mov-periodo.classe-normal .mov-p-codigo,
.mov-periodo.classe-normal .mov-p-descricao { background: #eaf5ee; }

.mov-comentario {
    padding: .35rem .7rem;
    border-top: 1px solid var(--cr-line);
    background: #fffbe6;
    font-size: .86rem;
}


.empregados .mov-classificacao .dia-totais {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1.2rem;
    padding: .35rem .7rem .45rem;
    border-top: 1px solid var(--cr-line);
    font-size: .84rem;
}

/* "Última gravação": the button (label of #ver-alteracoes) that swaps the periods for the day's changes (VB6 mv1_log). */
.mov-alterado {
    margin-left: auto;
    padding: .1rem .5rem;
    font-size: .74rem;
}

.mov-alteracoes,
#ver-alteracoes:checked ~ .mov-periodos {
    display: none;
}

#ver-alteracoes:checked ~ .mov-alteracoes {
    display: block;
    border-top: 1px solid var(--cr-line);
}

    /* As tall as the periods it replaces: the card does not grow. */
    .mov-alteracoes .tabela-rolagem {
        max-height: 13rem;
        overflow: auto;
    }

    .mov-alteracoes .btn {
        padding: 0 .4rem;
        font-size: .78rem;
    }

/* ---- Month (VB6 mth1) ---- */
.calendario-cabecalho {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .45rem;
}

    /* The month gets the room; both selects keep their arrow clear of the text. */
    .calendario-cabecalho .form-select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding-right: 1.7rem;
        background-position: right .45rem center;
    }

        .calendario-cabecalho .form-select[name="ano"] {
            flex: 0 0 5.4rem;
        }

.calendario-rodape {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
}

    .calendario-rodape .btn {
        flex: none;
    }

.btn-navegar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 6px;
    border: 1px solid var(--cr-line);
    background: var(--cr-surface-solid);
    color: var(--cr-text);
}

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

.calendario-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
}

.calendario-semana {
    text-align: center;
    font-family: var(--cr-font-mono);
    font-size: .64rem;
    color: var(--cr-text-2);
}

.calendario-dias .dia {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .08rem 0;
    border-radius: 6px;
    border: 1px solid var(--cr-line);
    background: var(--cr-surface-solid);
    color: var(--cr-text);
    text-decoration: none;
    line-height: 1.15;
}

    .calendario-dias .dia:hover {
        border-color: var(--cr-blue-500);
    }

    .calendario-dias .dia.escolhido {
        outline: 2px solid var(--cr-blue-600);
        outline-offset: 1px;
        font-weight: 700;
    }

    .calendario-dias .dia.hoje .dia-numero {
        color: var(--cr-danger);
        font-weight: 700;
    }

.dia-numero {
    font-size: .85rem;
}

.dia-horario {
    font-size: .62rem;
    color: var(--cr-text-2);
    min-height: .75rem;
}

.dia.sem-registo {
    opacity: .5;
}

/* Problems: incomplete punches (red), absences to justify (amber). */
.calendario-dias .dia.incompleto,
.calendario-legenda .dia.incompleto {
    background: #ffe3e6;
    border-color: #f2a3ad;
}

.calendario-dias .dia.faltas,
.calendario-legenda .dia.faltas {
    background: #fff2d6;
    border-color: #f0c674;
}

.calendario-dias .dia.extras::after,
.calendario-legenda .dia.extras::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cr-blue-600);
}

.calendario-dias .dia.horario-sa { background-color: #dff1ff; }
.calendario-dias .dia.horario-do { background-color: #bfe3ff; }
.calendario-dias .dia.horario-fr { background-color: #d8f5d8; }
.calendario-dias .dia.horario-fe { background-color: #2e9b4c; color: #fff; }
.calendario-dias .dia.horario-fe .dia-horario { color: #fff; }
.calendario-dias .dia.horario-fo { background-color: #d9d5ff; }
.calendario-dias .dia.horario-ds { background-color: #e6d4ff; }
.calendario-dias .dia.horario-cp,
.calendario-dias .dia.horario-ob { background-color: #fff3bf; }

.calendario-legenda {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .8rem;
    margin: .45rem 0 0;
    padding: 0;
    font-size: .74rem;
    color: var(--cr-text-2);
}

    .calendario-legenda li {
        display: flex;
        align-items: center;
        gap: .35rem;
    }

    .calendario-legenda .dia {
        display: inline-block;
        position: relative;
        width: .95rem;
        height: .95rem;
        border-radius: 3px;
        border: 1px solid var(--cr-line);
        background: var(--cr-surface-solid);
    }

.historico-conta {
    letter-spacing: 0;
}

/* ---- Editing (phase 1): the grids, the horário, the justifications and the comment; Recalcular / Repor ---- */
.mov-form {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

    .mov-form > * {
        flex: none;
    }

.mov-picagens.editavel td {
    padding: 0;
}

.mov-hora {
    width: 100%;
    height: 1.7rem;
    padding: 0 .2rem;
    border: 0;
    background: transparent;
    color: var(--cr-strong);
    font-weight: 600;
    text-align: center;
}

    .mov-hora::placeholder {
        color: rgba(15, 36, 64, .25);
        font-weight: 400;
    }

    .mov-hora:focus {
        outline: 2px solid var(--cr-blue-600);
        outline-offset: -2px;
        background: #fff;
    }

    .mov-hora[readonly] {
        cursor: default;
    }

    .mov-hora[draggable="true"] {
        cursor: grab;
    }

    .mov-hora.a-arrastar {
        opacity: .4;
    }

    /* The cell a time is about to be dropped on. */
    .mov-hora.alvo {
        background: var(--cr-blue-100);
        outline: 2px dashed var(--cr-blue-600);
        outline-offset: -2px;
    }

.mov-recalcular[hidden] {
    display: none !important;
}

/* The drag image (built by chronos.js, off screen): the time and, under it, its obra. */
.mov-arrasto {
    position: fixed;
    top: -100px;
    left: -100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .2rem .5rem;
    border: 2px solid var(--cr-blue-600);
    border-radius: 6px;
    background: #fff;
    color: var(--cr-strong);
    font-size: .85rem;
    line-height: 1.25;
}

    .mov-arrasto span {
        font-size: .75rem;
        color: var(--cr-text-2);
    }

    .mov-hora.repetida {
        color: var(--cr-danger);
    }

.mov-horario {
    width: 2.6rem;
    border: 1px solid rgba(15, 36, 64, .35);
    text-transform: uppercase;
}

.mov-edicao-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .7rem;
    padding: .45rem .6rem;
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius-sm);
    background: #fff;
}

    /* Nothing to show until a punch or the horário changes (Recalcular is hidden by chronos.js). */
    .mov-edicao-barra:not(.previsao):has(.mov-recalcular[hidden]) {
        display: none;
    }

    .mov-edicao-barra.previsao {
        border-color: #e3c02b;
        background: #fff8db;
    }

.mov-edicao-nota {
    color: var(--cr-text-2);
    font-size: .84rem;
}

.mov-so-leitura {
    margin: 0;
}

/* The justification of a period: a box to type in with its list (datalist: the browser searches the code and the
   name), compact to fit the cell; the code's colours (inline on the cell) show through. */
.mov-justif-escolha {
    width: 100%;
    max-width: 100%;
    min-height: 1.75rem;
    padding: .15rem .45rem;
    background-color: rgba(255, 255, 255, .7);
    color: inherit;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}

    .mov-justif-escolha:hover,
    .mov-justif-escolha:focus {
        border-color: var(--cr-blue-500);
        background-color: #fff;
    }

/* A lista das justificações (chronos.js): o menu da aplicação, uma linha por código — CÓDIGO - descrição. */
.mov-justif-lista {
    position: fixed;
    /* app.css .menu-lista prende o topo: aqui o script escolhe por cima ou por baixo. */
    top: auto;
    left: auto;
    z-index: 200;
    min-width: 16rem;
    max-width: min(30rem, calc(100vw - 8px));
    padding: .3rem;
}

    .mov-justif-lista .menu-opcao {
        display: block;
        width: 100%;
        padding: .28rem .55rem;
        border: 0;
        background: none;
        color: var(--cr-text);
        font-size: .86rem;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .mov-justif-lista .menu-opcao:hover,
        .mov-justif-lista .menu-opcao.ativa {
            background: var(--cr-blue-100);
        }

    .mov-justif-lista .mono {
        color: var(--cr-blue-600);
        font-weight: 700;
    }

/* ---- Desktop: the page is the window; the list, the card's day and the side column scroll each on its own ---- */
@media (min-width: 1101px) {
    main > .content > .movimentos {
        flex: 1 1 0;
        min-height: 0;
    }

    .movimentos > .emp-grelha {
        flex: 1 1 0;
        min-height: 0;
    }

    .mov-ficha > .mov-corpo {
        flex: 1 1 0;
        overflow-y: auto;
        padding-right: .2rem;
    }

    /* Alterações à vista: a tabela fica com a altura que sobra na ficha e rola sozinha; a ficha só rola se nem uma linha couber. */
    .mov-corpo:has(#ver-alteracoes:checked) > .mov-form,
    .mov-corpo:has(#ver-alteracoes:checked) .mov-classificacao,
    .mov-corpo:has(#ver-alteracoes:checked) .mov-alteracoes {
        display: flex;
        flex-direction: column;
        flex: 0 1 auto;
        min-height: 0;
    }

        .mov-corpo:has(#ver-alteracoes:checked) .mov-alteracoes .tabela-rolagem {
            flex: 0 1 auto;
            min-height: 4rem;
            max-height: none;
        }
}

/* Narrower: Nome | Mais, the options right under Nome, then Secção | Grupo horário, then Tolerância | Horas Extras under them. */
@media (max-width: 1750px) {
    .movimentos .emp-identidade {
        grid-template-columns: 3.6rem minmax(0, 1.2fr) minmax(0, 1fr) max-content;
    }

    .movimentos .emp-nome { grid-row: 1; grid-column: 2 / 4; }
    .movimentos .emp-linha-1 .emp-acoes { grid-row: 1; grid-column: 4; }
    .movimentos .mov-seccao { grid-row: 3; grid-column: 2; }
    .movimentos .mov-grupo { grid-row: 3; grid-column: 3 / 5; }
    .movimentos .mov-tolerancia { grid-row: 4; grid-column: 2; }
    .movimentos .mov-extras { grid-row: 4; grid-column: 3 / 5; }
    .movimentos .emp-linha-2 { grid-row: 2; grid-column: 2 / -1; }
}

/* The two days one under the other only when they no longer fit side by side (each grid scrolls on its own before that). */
@media (max-width: 1300px) {
    .mov-dias {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1100px) {
    .movimentos .emp-identidade {
        grid-template-columns: 3.6rem minmax(0, 1fr);
    }

        .movimentos .emp-linha-1 > .campo,
        .movimentos .emp-linha-1 .emp-acoes,
        .movimentos .emp-linha-2 {
            grid-column: 2 / -1;
            grid-row: auto;
        }
}

@media print {
    .emp-lista, .emp-acoes, .barra-topo, .barra-estado {
        display: none !important;
    }

    .emp-grelha, .emp-corpo {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mov-ficha > .mov-corpo {
        overflow: visible !important;
    }
}


/* Grupo horário opens its group (Turnos / grupos horários): the field reads as a link only on hover. */
.mov-valor-link {
    text-decoration: none;
    cursor: pointer;
}

    .mov-valor-link:hover,
    .mov-valor-link:focus-visible {
        border-color: var(--cr-blue-500);
        color: var(--cr-blue-600);
    }