/* =============================================================================================
   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: auto minmax(16rem, 3fr) minmax(8rem, 1.6fr) minmax(6.5rem, 1.1fr) max-content max-content max-content;
}

/* 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;
}

/* Overtime of the year with the VB6 bar (green → red up to the yearly limit) along the bottom of the field. */
.mov-extras-valor {
    position: relative;
    overflow: hidden;
}

.mov-extras-barra {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #2e9b4c, #e3c02b 55%, #d9822b 75%, #c42b3b);
}

    /* From the employee's hours to the limit the bar is washed out. */
    .mov-extras-barra > span {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, .85);
    }

.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;
}

.mov-codigos,
.historico.mov-bloco {
    padding: .55rem .7rem;
}

/* 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, both the same width. */
.mov-dias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

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

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

.mov-dia-horario {
    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 {
    flex: 1 1 auto;
    min-width: 0;
    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: .7rem;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .03em;
        border: 1px solid rgba(15, 36, 64, .32);
        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, .32);
        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, .55);
    }

        .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, .25);
        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: #eef3ff;
    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; }

/* ---- Timeline of the day (new, not in the VB6): 00h–24h, periods as blocks, punches as marks ---- */
.mov-tempo {
    position: relative;
    padding: .55rem .9rem .2rem;
}

.mov-tempo-marcas {
    position: relative;
    height: .55rem;
}

/* Entry: green mark; exit: red mark. */
.mov-tempo-picagem {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    margin-left: -.32rem;
    border-left: .32rem solid transparent;
    border-right: .32rem solid transparent;
    border-top: .5rem solid #2e9b4c;
}

    .mov-tempo-picagem.saida {
        border-top-color: var(--cr-danger);
    }

/* Clear lines: a frame, a line every hour and a darker one every 2 hours (under the hour labels). */
.mov-tempo-barra {
    position: relative;
    height: 1.9rem;
    border: 1px solid rgba(15, 36, 64, .55);
    border-radius: 5px;
    background:
        repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 12 - 1px), rgba(15, 36, 64, .42) calc(100% / 12 - 1px), rgba(15, 36, 64, .42) calc(100% / 12)),
        repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 24 - 1px), rgba(15, 36, 64, .16) calc(100% / 24 - 1px), rgba(15, 36, 64, .16) calc(100% / 24)),
        #f7f9fc;
    overflow: hidden;
}

.mov-tempo-periodo {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(15, 36, 64, .6);
    border-right: 1px solid rgba(15, 36, 64, .6);
    overflow: hidden;
    background: #d3dae5;
}

    .mov-tempo-periodo.tempo-normal { background: #9fd1ae; }
    .mov-tempo-periodo.tempo-extra { background: #ec9fcd; }
    .mov-tempo-periodo.tempo-falta { background: #f08080; }
    .mov-tempo-periodo.tempo-pausa { background: #c8ecc8; }

    /* Justified: the code's colour along the bottom. */
    .mov-tempo-periodo.justificado {
        box-shadow: inset 0 -5px 0 var(--cor-justif, var(--cr-blue-600));
    }

.mov-tempo-rotulo {
    font-size: .7rem;
    font-weight: 700;
    color: #0f2440;
    white-space: nowrap;
}

.mov-tempo-horas {
    position: relative;
    height: 1rem;
    margin-top: .15rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--cr-text-2);
}

    .mov-tempo-horas span {
        position: absolute;
        transform: translateX(-50%);
    }

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

.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, .32);
    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, .32);
    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 rgba(15, 36, 64, .16);
        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: #eef3ff;
    color: var(--cr-strong);
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}
.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;
}

.mov-alterado {
    margin-left: auto;
    font-size: .74rem;
    color: var(--cr-text-3);
}

.mov-codigos .tabela-rolagem {
    max-height: 17.5rem;
    overflow: auto;
}

.mov-codigos-tabela {
    font-size: .82rem;
}

    .mov-codigos-tabela th a {
        color: inherit;
        text-decoration: none;
    }

        .mov-codigos-tabela th a.ativa {
            text-decoration: underline;
        }

    .mov-codigos-tabela tr.riscado td {
        text-decoration: line-through;
    }

    /* Codes used in the day's periods. */
    .mov-codigos-tabela tr.usado td:first-child {
        box-shadow: inset 3px 0 0 var(--cr-blue-600);
        font-weight: 700;
    }

/* ---- 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);
    }

/* ---- The day's history (VB6 mv1_log) ---- */
.historico > summary {
    margin: 0;
    cursor: pointer;
    list-style: none;
}

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

    .historico > summary::after {
        content: "▸";
        margin-left: .4rem;
        color: var(--cr-text-2);
    }

.historico[open] > summary {
    margin-bottom: .6rem;
}

    .historico[open] > summary::after {
        content: "▾";
    }

.historico-conta {
    color: var(--cr-text-2);
    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;
}

    .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: the app's drop-down (.form-select, styled list), 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 1.6rem .15rem .45rem;
    background-position: right .4rem center;
    background-size: 12px 9px;
    background-color: rgba(255, 255, 255, .7);
    color: inherit;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

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

    .mov-justif-escolha option {
        font-weight: 500;
    }

/* The open list always below the box (the browser flipped it above when the window had little room below): no
   fallback position, and the list as tall as the room under the box (it scrolls inside). */
@supports (appearance: base-select) {
    select.mov-justif-escolha::picker(select) {
        position-area: block-end span-inline-end;
        position-try-fallbacks: none;
        max-height: min(24rem, calc(100% - .75rem));
    }
}

.mov-comentario-editar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

    .mov-comentario-editar .form-control {
        background: #fffef6;
    }

/* ---- 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;
    }
}

/* Narrower: two rows of fields — Nome (wide) | Tolerância | Mais, then Secção | Grupo horário | Extras — and the options below. */
@media (max-width: 1750px) {
    .movimentos .emp-identidade {
        grid-template-columns: auto minmax(0, 1fr) minmax(6.5rem, 8.5rem) max-content max-content;
    }

    .movimentos .emp-numero { grid-row: 1; grid-column: 1; }
    .movimentos .emp-nome { grid-row: 1; grid-column: 2 / 4; }
    .movimentos .mov-tolerancia { grid-row: 1; grid-column: 4; }
    .movimentos .emp-linha-1 .emp-acoes { grid-row: 1; grid-column: 5; }
    .movimentos .mov-seccao { grid-row: 2; grid-column: 2; }
    .movimentos .mov-grupo { grid-row: 2; grid-column: 3; }
    .movimentos .emp-extras { grid-row: 2; grid-column: 4 / 6; }
    .movimentos .emp-linha-2 { grid-row: 3; 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: auto 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;
    }
}

/* Row under the mouse in the codes table: a blue frame over the code's own colours (they hide a plain background). */
.mov-codigos-tabela tbody tr:hover td {
    box-shadow: inset 0 2px 0 var(--cr-blue-600), inset 0 -2px 0 var(--cr-blue-600);
    filter: brightness(.94);
}

    .mov-codigos-tabela tbody tr:hover td:first-child {
        box-shadow: inset 0 2px 0 var(--cr-blue-600), inset 0 -2px 0 var(--cr-blue-600), inset 3px 0 0 var(--cr-blue-600);
        font-weight: 700;
    }