/* =============================================================================================
   Chronos (heir of ChronosV2) — additions on top of app.css (ChronosWeb design system, copied as is).
   Same tokens (--cr-*), fonts and surfaces; only the pieces the VB6 main window needs are new here.
   ============================================================================================= */

/* ---- One face, served from the app and drawn with "block" (no fallback frame, no jump): Jost, the geometric
   lettering of a watch dial. Tabular figures for every time and value. ---- */
/* While the page is being arranged (App.razor adds html.a-preparar, chronos.js takes it off once the font is in and
   every adjustment of the tables is done): the tables keep their room but are not drawn, so they never show
   half-built and then recomposed (user's request 2026-10-20). The punches of the two days (Movimentos de ponto) have a
   fixed layout and stay drawn: the day is saved by reloading the page, and hiding them made them blink on every
   justification chosen (user, 2026-10-23). */
html.a-preparar main table:not(.mov-picagens) {
    visibility: hidden;
}

/* A date field with the app's calendar (chronos.js, input[type=date]): a button drawn like the field it replaces. */
.data-app-controlo {
    display: inline-flex;
    position: relative;
    max-width: 100%;
}

    .data-app-controlo .data-app {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        width: 100%;
        min-width: 8.6rem;
        text-align: left;
        white-space: nowrap;
        cursor: pointer;
    }

        .data-app-controlo .data-app:disabled {
            cursor: default;
        }

        .data-app-controlo .data-app .icone {
            flex: none;
            width: 1rem;
            height: 1rem;
            color: var(--cr-text-3);
        }

.calendario-dia:disabled {
    opacity: .3;
    cursor: default;
}

@font-face {
    font-family: 'Jost';
    src: url('fonts/jost.woff2') format('woff2');
    font-weight: 100 900;
    font-display: block;
}

/* ---- Look (third redesign, branch redesign-c, 2026-10-16, user's choice "Mostrador"): Chronos as a good watch. A
   clean silver dial for the ground (the animated clock background stays, in silver and blued steel), white sheets with
   a hairline edge, the blued steel of the hands for actions, links, selection and focus, red only for problems, Jost
   for everything; the totals of the maps are the chronograph's registers and they filter. The tokens of app.css are
   redefined here (the --cr-blue-* names now hold the blued steel); app.css components are restyled right below. ---- */
:root {
    --cr-font: 'Jost', 'Segoe UI', system-ui, sans-serif;
    --cr-font-display: var(--cr-font);
    --cr-font-mono: var(--cr-font);
    --cr-text: #11151b;
    --cr-text-2: #333a46;
    --cr-text-3: #4a5260;
    --cr-strong: #11151b;
    --cr-accent: var(--cr-blue-600);
    --cr-ink-700: #2c3a52;
    --cr-ink-800: #1f2a3d;
    --cr-ink-900: #11151b;
    /* Linhas de grelha de todas as tabelas (pedido do utilizador 2026-10-20: mais contraste com o fundo). */
    --grelha: #b1b9c4;
    --grelha-forte: #8e98a6;
    --cr-blue-600: #1d4fb8;
    --cr-blue-500: #2f62cc;
    --cr-blue-300: #9fb6e6;
    --cr-blue-100: #e8eef9;
    --cr-surface: #ffffff;
    --cr-surface-solid: #ffffff;
    --cr-surface-2: #f5f6f8;
    --cr-ground: #eef0f3;
    --cr-hover: #f0f2f5;
    --cr-success: #12805c;
    --cr-warning: #a45d00;
    --cr-danger: #c42b3b;
    --cr-radius: 8px;
    --cr-radius-sm: 6px;
    --cr-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --cr-shadow-md: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -2px rgba(16, 24, 40, 0.08);
    --cr-shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.06), 0 16px 40px -8px rgba(16, 24, 40, 0.2);
    --cr-glow: 0 0 0 3px rgba(29, 79, 184, 0.22);
    --bs-body-color: var(--cr-text);
    --bs-border-radius: var(--cr-radius-sm);
    --bs-link-hover-color: #173f94;
    --barra-recesso: #eceef2;
    --barra-recesso-borda: var(--cr-line);
    --barra-sep: var(--cr-line);
    --barra-destaque: var(--cr-blue-600);
    --barra-ativo-borda: var(--cr-line-strong);
    --barra-ativo-sombra: 0 1px 2px rgba(16, 24, 40, 0.1);
    --barra-hover: var(--cr-hover);
    --barra-foco-borda: var(--cr-blue-500);
    --tb-hover: var(--cr-hover);
    color-scheme: light;
    accent-color: var(--cr-blue-600);
}

/* 16px (user's request 2026-10-16: a little larger everywhere, easier to read); every size in the app is in rem. */
html, body {
    font-size: 16px;
    background: var(--cr-ground);
    font-variant-numeric: tabular-nums;
}

::selection {
    background: rgba(29, 79, 184, 0.18);
    color: inherit;
}

input, textarea {
    caret-color: var(--cr-blue-600);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #c3c9d1 transparent;
}

.num, input[inputmode="numeric"], input[inputmode="decimal"], input[type="number"], input[type="time"] {
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, .display {
    letter-spacing: -0.011em;
}

a {
    color: var(--cr-blue-600);
}

    a:hover {
        color: #173f94;
    }

/* Cards, bars and lists: white with a hairline edge, almost flat (no glass, no blur). */
.painel,
.barra-filtros,
.kpi {
    background: var(--cr-surface-solid);
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius);
    box-shadow: var(--cr-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.painel-titulo {
    gap: .5rem;
    margin-bottom: .8rem;
    font-family: var(--cr-font);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--cr-text);
}

    .painel-titulo::before {
        content: none;
    }

.kpi {
    padding: .45rem .85rem;
    border-radius: var(--cr-radius-sm);
}

.kpi-rotulo {
    font-family: var(--cr-font);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cr-text-2);
}

.kpi-valor {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.kpi.destaque {
    background: var(--cr-blue-100);
    border-color: #cfdcfb;
}

.controlo-rotulo {
    font-family: var(--cr-font);
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cr-text-2);
}

.barra-filtros {
    padding: .45rem .6rem;
}

    .barra-filtros .segmentado button,
    .barra-filtros .alternar,
    .barra-filtros .btn {
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
    }

.segmentado {
    border-radius: 8px;
}

    .segmentado button {
        border-radius: 6px;
        font-weight: 500;
    }

        .segmentado button.ativo {
            color: var(--cr-text);
        }

.alternar:has(input:checked) {
    color: var(--cr-blue-600);
    border-color: #b3c6ec;
    background: var(--cr-blue-100);
}

.btn-filtro {
    border-color: var(--cr-line-strong);
    border-radius: var(--cr-radius-sm);
    box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
    font-weight: 500;
}

    .btn-filtro:hover, .btn-filtro[aria-expanded="true"] {
        border-color: #aab2bd;
        background: var(--cr-surface-2);
    }

.menu-lista {
    padding: .3rem;
    border-radius: 8px;
    border-color: var(--cr-line);
}

.menu-opcao {
    border-radius: 5px;
    font-size: .9rem;
}

    .menu-opcao:hover {
        background: var(--cr-hover);
    }

.menu-opcao .num {
    font-family: var(--cr-font);
    letter-spacing: 0;
    text-transform: none;
}

/* Fields: white, a firm grey edge, blue edge and ring on focus; read-only on the light ground. */
.form-control, .form-select {
    border-color: var(--cr-line-strong);
    border-radius: var(--cr-radius-sm);
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
}

    .form-control:hover:not(:disabled):not([readonly]):not(:focus),
    .form-select:hover:not(:disabled):not(:focus) {
        border-color: #aab2bd;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--cr-blue-500);
        box-shadow: var(--cr-glow);
    }

    .form-control:disabled, .form-control[readonly], .form-select:disabled {
        background-color: var(--cr-surface-2);
        box-shadow: none;
    }

    .form-control::placeholder {
        color: #646d7a;
    }

.form-label {
    font-size: .84rem;
    color: var(--cr-text-2);
}

.form-check-input {
    border-color: #aab2bd;
}

    .form-check-input:focus {
        border-color: var(--cr-blue-500);
        box-shadow: var(--cr-glow);
    }

/* Buttons: flat. Primary = the brand blue; outline = white with a grey edge; ghost = text only. */
.btn {
    border-radius: var(--cr-radius-sm);
    font-weight: 500;
}

.btn-primary {
    background: var(--cr-blue-600);
    border: 1px solid #173f94;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

    .btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active {
        background: #173f94;
        border-color: #12357d;
        color: #fff;
    }

.btn-outline-primary,
.btn-outline-secondary {
    background: #fff;
    border-color: var(--cr-line-strong);
    box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
}

.btn-outline-primary {
    color: var(--cr-blue-600);
}

.btn-outline-secondary {
    color: var(--cr-text);
}

    .btn-outline-primary:hover,
    .btn-outline-secondary:hover {
        background: var(--cr-surface-2);
        border-color: #aab2bd;
    }

    .btn-outline-primary:hover {
        color: #173f94;
    }

    .btn-outline-secondary:hover {
        color: var(--cr-text);
    }

.btn-outline-danger {
    background: #fff;
    border-color: #efc2c7;
    color: var(--cr-danger);
}

    .btn-outline-danger:hover {
        background: #fdf1f2;
        border-color: #e39aa3;
        color: #a3192c;
    }

.btn-fantasma:hover {
    background: var(--cr-hover);
    border-color: transparent;
}

.btn-navegar {
    border-color: var(--cr-line-strong);
    background: #fff;
}

    .btn-navegar:hover:not(:disabled) {
        background: var(--cr-surface-2);
        color: var(--cr-blue-600);
    }

/* Small tables and badges. */
.tabela-lista th {
    font-family: var(--cr-font);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cr-text-2);
    background: var(--cr-surface-2);
}

.distintivo {
    border-radius: 5px;
    font-weight: 500;
}

.alert {
    border-radius: var(--cr-radius-sm);
}

.alert-warning { background: #fff8eb; border-color: #f3dbab; color: #7a4a00; }
.alert-success { background: #ecf8f2; border-color: #c4e8d6; color: #0d5c3d; }
.alert-danger { background: #fdf1f2; border-color: #f3c7cc; color: #8e1e2a; }

/* Dialogs: white, one hairline under the title, no tinted header. */
.modal-content {
    border-radius: 12px;
    border: 1px solid var(--cr-line);
}

.modal-header {
    background: #fff;
    padding: 1rem 1.25rem;
}

.modal-title {
    font-weight: 600;
    letter-spacing: -.01em;
}

.modal-body {
    padding: 1.1rem 1.25rem;
}

.modal-footer {
    background: var(--cr-surface-2);
    padding: .75rem 1.25rem;
}

/* ---- No transitions anywhere (request 2026-10-02): a state change (menu category, hover, active item, tooltip,
   page swap) shows at once, never a half-faded frame in between. app.css and the scoped layout CSS keep their
   transition rules as copied; this cancels them all. The continuous background animations (dial, gears) stay. ---- */
*, *::before, *::after {
    transition: none !important;
}

/* ---- Page header: the big title ---- */
/* Page titles: the ink of the text, semibold, tight (many VB6 screen names are long). No bar, no relief: on the light
   ground the title needs nothing but its size. */
.rotulo-modulo {
    font-family: var(--cr-font);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--cr-text);
}

/* A summary card: its name always at the top left, the value under it (with no value, the name stayed in the middle). */
.kpi {
    justify-content: flex-start;
}

/* ---- Menu bar at the top, as in the VB6 program (replaces the ChronosWeb sidebar) ---- */
.page {
    flex-direction: column;
}

.barra-topo {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--cr-line);
}

    /* The logo straight on the bar; it is the way back to Início (there is no menu item for it). */
    .barra-topo .marca {
        display: flex;
        align-items: center;
        flex: none;
        margin-right: 1rem;
        border-radius: 8px;
    }

        .barra-topo .marca:focus-visible {
            outline: none;
            box-shadow: var(--cr-glow);
        }

    .barra-topo .marca img {
        display: block;
        height: 2.1rem;
        width: auto;
    }

.barra-topo-direita {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: auto;
    /* The categories keep their room; a long unit name gives way (cut with "…"). */
    flex: 0 1 auto;
    min-width: 0;
}

.menu-topo {
    display: flex;
    align-items: center;
    flex: none;
    gap: 1rem;
}

/* Categories: plain text, the current one in blue with a line along the bottom edge of the bar. */
.menu-topo-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    height: 2.25rem;
    padding: 0 .75rem;
    border-radius: 6px;
    color: #262c35;
    font-family: var(--cr-font);
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: -.003em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: background-color .15s, color .15s;
}

    .menu-topo-item::-webkit-details-marker {
        display: none;
    }

    .menu-topo-item:hover,
    .menu-topo-grupo[open] > .menu-topo-item {
        background: var(--cr-hover);
        color: var(--cr-text);
    }

    .menu-topo-item:focus-visible {
        outline: none;
        box-shadow: var(--cr-glow);
    }

    /* Category of the current page: blue, underlined on the bar's bottom edge. */
    .menu-topo-item.active {
        position: relative;
        color: var(--cr-blue-600);
    }

        .menu-topo-item.active::after {
            content: "";
            position: absolute;
            left: .75rem;
            right: .75rem;
            bottom: calc(-1 * (3.5rem - 2.25rem) / 2);
            height: 2px;
            border-radius: 2px 2px 0 0;
            background: var(--cr-blue-600);
        }

    .menu-topo-item .menu-topo-seta {
        width: .9rem;
        height: .9rem;
        opacity: .6;
        transition: transform .15s;
    }

.menu-topo-grupo {
    position: relative;
}

    .menu-topo-grupo[open] > .menu-topo-item .menu-topo-seta {
        transform: rotate(180deg);
    }

.menu-topo-lista {
    position: absolute;
    top: calc(100% + .55rem);
    left: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    min-width: 21rem;
    max-width: 30rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: .3rem;
    background: var(--cr-surface-solid);
    border: 1px solid var(--cr-line);
    border-radius: 8px;
    box-shadow: var(--cr-shadow-lg);
}

.menu-topo-opcao {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .7rem;
    border-radius: 5px;
    color: var(--cr-text);
    font-size: .9rem;
    line-height: 1.3;
    text-decoration: none;
}

    .menu-topo-opcao:hover,
    .menu-topo-opcao:focus-visible {
        background: var(--cr-hover);
        color: var(--cr-text);
        outline: none;
    }

    .menu-topo-opcao.active {
        background: var(--cr-blue-100);
        color: var(--cr-blue-600);
        font-weight: 500;
    }

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

        .menu-topo-opcao.sem-acesso:hover {
            background: none;
        }

        .menu-topo-opcao.sem-acesso .icone {
            width: .85rem;
            height: .85rem;
            flex: none;
            opacity: .6;
        }

    /* Entries of a VB6 submenu (Mapa de acontecimentos), under their heading. */
    .menu-topo-opcao.no-submenu {
        padding-left: 1.6rem;
    }

.menu-topo-submenu {
    padding: .55rem .75rem .2rem;
    color: var(--cr-text-3);
    font-size: .78rem;
    font-weight: 600;
}

/* Narrow-window menu button (hamburger); hidden on wide screens. */
.menu-abrir {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.menu-abrir-botao {
    display: none;
    width: 2.6rem;
    height: 2.3rem;
    border-radius: 6px;
    border: 1px solid var(--cr-line-strong);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826, 34, 51, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.3rem #fff;
    cursor: pointer;
}

.menu-abrir:focus-visible + .menu-abrir-botao {
    box-shadow: var(--cr-glow);
}

/* Narrow windows: the menu folds into the button and opens as a list under the bar (below 1550px the categories and
   the right side no longer fit on one line; chronos.js uses the same width). */
@media (max-width: 1550px) {
    .barra-topo {
        flex-wrap: wrap;
        padding: .45rem 1rem;
    }

    .menu-abrir-botao {
        display: block;
        order: 3;
    }

    .barra-topo-direita {
        order: 2;
    }

    .menu-topo {
        order: 4;
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: .4rem 0 .6rem;
    }

    .menu-abrir:checked ~ .menu-topo {
        display: flex;
    }

    .menu-topo-lista {
        position: static;
        min-width: 0;
        max-width: none;
        max-height: none;
        margin: .2rem 0 .4rem 1rem;
        box-shadow: none;
    }
}

/* ---- Top bar: the unit you are working in ---- */
.unidade-atual {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.15rem;
    padding: 0 .75rem;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--cr-line-strong);
    box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
    color: var(--cr-text);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    /* Always the same size: changing unit changes only the text inside (a long name ends in "…"). */
    width: 19rem;
    min-width: 0;
}

    .unidade-atual:hover {
        background: var(--cr-surface-2);
        border-color: #aab2bd;
        color: var(--cr-text);
    }

    .unidade-atual .icone {
        width: 1rem;
        height: 1rem;
        color: var(--cr-text-3);
    }

    .unidade-atual .mono {
        color: var(--cr-text-2);
        font-weight: 600;
    }

.unidade-atual-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Status bar (like the two at the bottom of the VB6 main window) ---- */
main {
    position: relative;
    display: flex;
    flex-direction: column;
}

    main > .content {
        flex: 1;
        padding-top: 1.25rem;
        padding-bottom: 1.5rem;
    }

.barra-estado {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.5rem;
    padding: .4rem 1.75rem;
    background: #fff;
    border-top: 1px solid var(--cr-line);
    font-size: .8rem;
    color: var(--cr-text);
}

.barra-estado-rotulo {
    margin-right: .4rem;
    color: var(--cr-text-3);
}

.barra-estado-relogio {
    display: inline-flex;
    gap: .7rem;
    margin-left: auto;
    color: var(--cr-text-2);
}

    .barra-estado-relogio .mono {
        color: var(--cr-text);
        font-weight: 500;
    }

/* ---- Início ---- */
/* The page never scrolls (user's request 2026-10-21): the grid takes the room left, "Unidade de trabalho" ends after
   its last line, the right column (units + notices) is as tall as the room at most and the units list scrolls. */
.inicio-grelha {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "trabalho lado";
    gap: 1rem;
    align-items: start;
    flex: 1 1 auto;
    min-height: 0;
}

.inicio-trabalho {
    grid-area: trabalho;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.inicio-lado {
    grid-area: lado;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 100%;
    min-height: 0;
}

    .inicio-trabalho .painel-titulo {
        margin-bottom: .35rem;
    }

    .inicio-trabalho .unidade-destaque {
        margin: 0;
    }

    .inicio-trabalho .kpis {
        gap: .9rem;
    }


    .inicio-trabalho .inicio-subtitulo {
        margin: 0 0 .7rem;
    }

.inicio-unidades,
.inicio-avisos {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    /* The units give way first; the notices keep their height up to half the column. */
    .inicio-avisos {
        flex-shrink: 0;
        max-height: 50%;
    }

    .inicio-unidades > .unidades-lista,
    .inicio-avisos > .avisos {
        min-height: 0;
        overflow: auto;
    }

@media (max-width: 1100px) {
    .inicio-grelha {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "trabalho" "lado";
    }
}

.unidade-destaque {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    margin: .2rem 0 1rem;
}

.unidade-codigo {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cr-text-3);
}

.unidade-nome {
    font-family: var(--cr-font);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--cr-strong);
    line-height: 1.2;
}

.kpi-nota {
    font-size: .74rem;
    color: var(--cr-text-2);
}

    .kpi-nota.atrasado {
        color: var(--cr-warning);
        font-weight: 600;
    }

.inicio-subtitulo {
    margin: 1.4rem 0 .6rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--cr-text-2);
}

.atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .8rem;
}

.atalho {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem .9rem;
    border-radius: var(--cr-radius-sm);
    background: var(--cr-surface-solid);
    border: 1px solid var(--cr-line);
    color: var(--cr-text);
    font-weight: 500;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: var(--cr-shadow);
}

    .atalho:hover {
        border-color: #aab2bd;
        box-shadow: var(--cr-shadow-md);
        color: var(--cr-text);
    }

    .atalho .icone {
        width: 1rem;
        height: 1rem;
        color: var(--cr-accent);
        flex: none;
    }

.unidades-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

    .unidades-lista form {
        margin: 0;
    }

.unidade-opcao {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .8rem;
    border-radius: var(--cr-radius-sm);
    border: 1px solid var(--cr-line);
    background: var(--cr-surface-solid);
    color: var(--cr-text);
    text-align: left;
    font-size: .92rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

    .unidade-opcao:hover {
        border-color: #aab2bd;
        background: var(--cr-surface-2);
    }

    .unidade-opcao:focus-visible {
        outline: none;
        box-shadow: var(--cr-glow);
    }

    .unidade-opcao.ativa {
        border-color: #9fb6e6;
        background: var(--cr-blue-100);
        box-shadow: inset 0 0 0 1px #9fb6e6;
        font-weight: 600;
    }

.unidade-opcao-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unidade-opcao-data {
    font-size: .76rem;
    color: var(--cr-text-2);
}

/* ---- Screens not built yet ---- */
.modulo-por-construir {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    max-width: 52rem;
}

    .modulo-por-construir .modulo-icone {
        flex: none;
        width: 2.4rem;
        height: 2.4rem;
        color: var(--cr-accent);
        opacity: .8;
    }

.modulo-detalhes {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .3rem 1rem;
    margin: 1rem 0 0;
    font-size: .9rem;
}

    .modulo-detalhes dt {
        font-size: .84rem;
        font-weight: 500;
        color: var(--cr-text-2);
    }

    .modulo-detalhes dd {
        margin: 0;
    }

/* ---- Avisos (Início): one row per alert, opening the list of people (the VB6 double-click report) ---- */
.avisos {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.aviso {
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius-sm);
    background: #fff;
}

    .aviso > summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .6rem .8rem;
        cursor: pointer;
        font-weight: 600;
    }

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

        .aviso > summary:focus-visible {
            outline: none;
            box-shadow: var(--cr-glow);
            border-radius: var(--cr-radius-sm);
        }

.aviso-numero {
    font-size: .78rem;
    color: var(--cr-warning);
}

.aviso-titulo {
    flex: 1;
}

.aviso-contagem {
    min-width: 1.8rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: rgba(184, 110, 0, 0.14);
    color: var(--cr-warning);
    text-align: center;
    font-size: .82rem;
}

.aviso .aviso-seta {
    width: .9rem;
    height: .9rem;
    opacity: .6;
    transition: transform .15s;
}

.aviso[open] .aviso-seta {
    transform: rotate(180deg);
}

.aviso-corpo {
    padding: 0 .8rem .7rem;
}

.aviso-descricao {
    margin: 0 0 .4rem;
    font-size: .82rem;
    color: var(--cr-text-2);
}

.tabela-aviso {
    width: 100%;
    font-size: .86rem;
    background: var(--cr-surface-solid);
    border-radius: 6px;
}

    .tabela-aviso th {
        font-size: .78rem;
        font-weight: 600;
        color: var(--cr-text-2);
        padding: .35rem .5rem;
        border-bottom: 1px solid var(--grelha);
    }

    .tabela-aviso td {
        padding: .3rem .5rem;
        border-bottom: 1px solid var(--grelha);
    }

/* ---- The page area: the light ground. On desktop it is exactly the space between the two bars: app.css gave it
   min-height 100vh, which with the two bars made the page taller than the window (scroll bars). ---- */
.fundo-app {
    overflow: hidden;
    background: var(--cr-ground);
}

@media (min-width: 641px) {
    .fundo-app {
        min-height: 0;
    }
}

/* ---- Version (date of the published build) and ISTC copyright, on the right of the status bar ---- */
.barra-estado-versao {
    margin-left: auto;
    font-size: .74rem;
    color: var(--cr-text-2);
}

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

    .barra-estado-versao + .barra-estado-copyright {
        margin-left: 1rem;
    }

    .barra-estado-copyright + .barra-estado-relogio {
        margin-left: 1rem;
    }

/* At the right edge of the window, on the same line as before (user's request 2026-10-20). */
.account-copyright {
    position: absolute;
    right: 1.5rem;
    bottom: 1rem;
    z-index: 1;
    text-align: right;
    font-size: .74rem;
    color: var(--cr-text-3);
}

/* ---- Tooltip (data-dica): dark ink, white text, small; chronos.js places it ---- */
.dica-flutuante {
    position: fixed;
    z-index: 1000;
    max-width: 26rem;
    padding: .5rem .7rem .55rem;
    border-radius: 8px;
    /* Blue and white as the Chronos had them (user's request 2026-10-20): white into the light blue of the app, a
       light blue edge, the text in ink. */
    background: linear-gradient(180deg, #fbfcff 0%, var(--cr-blue-100) 100%);
    border: 1px solid var(--cr-blue-300);
    box-shadow: 0 10px 26px -10px rgba(29, 79, 184, .4), 0 2px 6px rgba(10, 24, 48, .08);
    color: var(--cr-text);
    font-size: .84rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .12s, transform .12s;
}

    .dica-flutuante.visivel {
        opacity: 1;
        transform: none;
    }

    .dica-flutuante .dica-titulo {
        margin-bottom: .3rem;
        padding-bottom: .3rem;
        border-bottom: 1px solid var(--cr-blue-300);
        font-size: .88rem;
        font-weight: 600;
        color: var(--cr-blue-600);
    }

    .dica-flutuante .dica-linha + .dica-linha {
        margin-top: .2rem;
    }

    /* Keyboard shortcut lines: the key, then what it does. */
    .dica-flutuante .dica-atalho {
        display: flex;
        align-items: center;
        gap: .6rem;
    }

    .dica-flutuante kbd {
        flex: none;
        min-width: 6.5rem;
        padding: .1rem .45rem;
        border-radius: 4px;
        border: 1px solid var(--cr-blue-300);
        background: #fff;
        color: var(--cr-blue-600);
        font-size: .78rem;
        text-align: center;
        box-shadow: none;
    }

/* Keyboard icon at the start of a form's bar: its tooltip lists the screen's shortcuts. */
.atalhos-teclado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: 1px solid var(--cr-blue-300);
    background: #fff;
    color: var(--cr-blue-600);
    cursor: help;
}

    .atalhos-teclado:hover,
    .atalhos-teclado:focus-visible {
        outline: none;
        background: var(--cr-surface-2);
        box-shadow: var(--cr-glow);
    }

    /* In a filter bar (no gaps of its own): a little room before the next control. */
    .barra-filtros .atalhos-teclado {
        margin-right: .5rem;
    }

    .atalhos-teclado .icone {
        width: 1.15rem;
        height: 1.15rem;
    }

/* ---- Drop-down lists (every .form-select): the open list in the brand's style instead of the system one.
   Customizable <select> (appearance: base-select, Edge/Chrome 135+); other browsers keep their own list.
   The closed box keeps the Bootstrap look and arrow. ---- */
@supports (appearance: base-select) {
    select.form-select:not([multiple]):not([size]),
    select.form-select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }

    /* base-select lays the box out itself; keep Bootstrap's block box with the text centred. */
    select.form-select:not([multiple]):not([size]) {
        display: flex;
        align-items: center;
    }

    select.form-select:not([multiple]):not([size])::picker-icon {
        display: none;
    }

    select.form-select::picker(select) {
        min-width: anchor-size(width);
        max-height: min(24rem, 60vh);
        margin-top: 4px;
        padding: .3rem;
        border: 1px solid var(--cr-line);
        border-radius: 8px;
        background: #fff;
        box-shadow: var(--cr-shadow-lg);
        color: var(--cr-text);
    }

    select.form-select option {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-height: 2rem;
        padding: .3rem .65rem;
        border-radius: 5px;
        font-family: var(--cr-font);
        font-size: .9rem;
        font-weight: 400;
        color: var(--cr-text);
        background: transparent;
        white-space: nowrap;
        cursor: pointer;
    }

        select.form-select option:hover,
        select.form-select option:focus-visible {
            outline: none;
            background: var(--cr-hover);
            color: var(--cr-text);
        }

        select.form-select option:checked {
            background: var(--cr-blue-100);
            color: var(--cr-blue-600);
            font-weight: 500;
        }

        select.form-select option::checkmark {
            order: 1;
            margin-left: auto;
            color: var(--cr-blue-600);
        }

        select.form-select option:disabled {
            color: var(--cr-text-3);
            cursor: default;
        }

    select.form-select optgroup {
        padding-top: .2rem;
    }

        select.form-select optgroup legend {
            padding: .35rem .65rem .2rem;
            font-size: .78rem;
            font-weight: 600;
            color: var(--cr-text-3);
        }

        select.form-select optgroup + optgroup {
            margin-top: .25rem;
            border-top: 1px solid var(--cr-line);
        }
}

/* ---- Period of the filter bar (PeriodoSelector) and the app's calendar, as in ChronosWeb ----
   The period as a chronograph readout: a recessed pill with monospaced dates and arrows on each side; the
   dates open the calendar (chronos.js) under it. Days touch horizontally, so a period reads as one band. */
.periodo-controlo {
    position: relative;
}

.periodo {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .1rem;
    border-radius: var(--cr-radius-sm);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--cr-line-strong), 0 1px 1px rgba(16, 24, 40, 0.04);
}

.periodo-datas {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 1.75rem;
    padding: 0 .45rem;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--cr-text);
    font-weight: 500;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .periodo-datas .icone {
        width: 1rem;
        height: 1rem;
        margin-right: .15rem;
        color: var(--cr-text-3);
    }

    .periodo-datas:hover, .periodo-datas[aria-expanded="true"] {
        background: var(--barra-hover);
    }

    .periodo-datas:focus-visible {
        outline: 2px solid var(--barra-foco-borda);
        outline-offset: -1px;
    }

/* No divider lines in the criteria bars (user's request 2026-10-12): the groups keep their spacing, without the line. */
.barra-filtros .barra-sep::before {
    content: none;
}

/* ---- One design for every criteria bar (user's requests 2026-10-13 and 2026-10-16) ----
   Left to right: period or year · «Por» · N.º · Secção · Grupo · (wider gap) · view · «Ignorar até» · «Códigos» · ticks;
   then .espaco and the actions (Guardar códigos, Simular…) at the right. Imprimir / Exportar live in the table's foot,
   never here. A list button carries its name inside («N.º: Todos»); every text of the bar is plain case, one size. The
   gap between controls is the bar's (the .barra-sep of the markup no longer count), so every bar is spaced alike. */
.barra-filtros,
.barra-filtros.ped-rel-filtros {
    column-gap: .75rem;
}

    /* Segmented choices of a bar a little tighter (one line on a 1600 px screen with the most criteria). */
    .barra-filtros .segmentado button {
        padding-left: .55rem;
        padding-right: .55rem;
    }

    .barra-filtros .barra-sep {
        display: none;
    }

    /* The two groups of a bar (user's request 2026-10-16): "who" (period, Por, N.º, Secção, Grupo) and "how" (view,
       filters, codes, options) — a wider space after Grupo instead of a line. */
    .barra-filtros > .controlo:has(.selecao-filtro) + :not(.controlo:has(.selecao-filtro)) {
        margin-left: .75rem;
    }

    /* The actions (Guardar códigos, Simular…) always at the right end, also when the bar breaks into two lines: the
       first of them takes the free space, wherever its line is. */
    .barra-filtros > .espaco {
        display: none;
    }

        .barra-filtros > .espaco + * {
            margin-left: auto;
        }

/* A list button with its name inside (N.º: Todos ▾) instead of a blue label beside it: shorter bars, one look. The
   class stays .controlo-rotulo (the print reads the criteria by it). */
.btn-filtro > .controlo-rotulo {
    flex: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cr-text-2);
}

    .btn-filtro > .controlo-rotulo::after {
        content: ":";
    }

.barra-filtros .btn-filtro {
    gap: .35rem;
    max-width: 19rem;
}

    .barra-filtros .btn-filtro > .icone,
    .barra-filtros .btn-filtro > svg {
        margin-left: .15rem;
    }

/* One-choice list buttons never change width: the text and hidden copies of every choice share one grid cell, so the
   button is as wide as the longest choice (up to the button's max-width, then "…"). */
.escolha-medida {
    display: inline-grid;
    min-width: 0;
}

    .escolha-medida > * {
        grid-area: 1 / 1;
    }

    .escolha-medida > .escolha-fantasma {
        visibility: hidden;
        overflow: hidden;
        white-space: nowrap;
    }

/* One-choice lists of a bar (Shared/EscolhaFiltro.razor): the radio is the tick of the line. */
.escolha-lista {
    min-width: 8rem;
}

    .escolha-lista .menu-opcao .form-check-input {
        border-radius: 50%;
    }

    /* A tick option: its name, then the box (no pill, no frame). Every name of a bar — beside a control, inside a
       list button, of a tick — in one style: plain text, the bar's grey-blue (user's request 2026-10-16). */
    .barra-filtros > :is(.alternar, .emp-opcao),
    .barra-filtros .controlo-rotulo {
        font-family: inherit;
        font-size: .86rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--cr-text-2);
    }

    /* Segmented choices and the bar's buttons too: plain text (app.css put them in capitals). */
    .barra-filtros .segmentado button,
    .barra-filtros .btn {
        text-transform: none;
        letter-spacing: 0;
        font-size: .86rem;
    }

    /* Each tick in its own small card, like the list buttons beside it (user's request 2026-10-20, every bar). */
    .barra-filtros :is(.alternar, .emp-opcao) {
        flex-direction: row-reverse;
        gap: .45rem;
        height: 2rem;
        padding: 0 .65rem 0 .75rem;
        border: 1px solid var(--cr-line-strong);
        border-radius: var(--cr-radius-sm);
        background: var(--barra-campo, #fff);
        box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
        cursor: pointer;
    }

        .barra-filtros :is(.alternar, .emp-opcao):hover {
            border-color: #aab2bd;
            background: var(--cr-surface-2);
        }

        .barra-filtros > :is(.alternar, .emp-opcao) .form-check-input {
            margin: 0;
        }

/* Year control (Shared/AnoSelector.razor): the period control with a small calendar of years. */
.ano-selector > summary {
    list-style: none;
    cursor: pointer;
}

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

.ano-selector .menu-lista {
    display: grid;
    grid-template-columns: repeat(4, 3.7rem);
    gap: .25rem;
    min-width: 0;
    padding: .6rem;
    z-index: 80;
}

.ano-selector-ano {
    height: 2.1rem;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--cr-text);
    font-size: .88rem;
}

    .ano-selector-ano:hover {
        background: var(--cr-hover);
    }

    .ano-selector-ano.hoje {
        box-shadow: inset 0 0 0 1px var(--barra-foco-borda);
    }

    .ano-selector-ano.ativo {
        background: var(--cr-blue-600);
        color: #fff;
        font-weight: 600;
    }

.periodo-passo:disabled {
    opacity: .35;
    pointer-events: none;
}

/* Period still to choose when the form was sent (SoEscolher). */
.periodo-em-falta .periodo {
    box-shadow: inset 0 0 0 1px var(--cr-danger);
}

.periodo-passo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--cr-text-3);
}

    .periodo-passo:hover {
        background: var(--cr-hover);
        color: var(--cr-text);
    }

    .periodo-passo:focus-visible {
        outline: 2px solid var(--barra-foco-borda);
    }

.periodo-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 80;
}

.calendario {
    --cal-hover: var(--cr-hover);
    --cal-hoje: var(--cr-blue-500);
    display: inline-block;
    padding: .85rem .95rem .7rem;
    border-radius: var(--cr-radius);
    background: var(--cr-surface-solid);
    border: 1px solid var(--cr-line);
    box-shadow: var(--cr-shadow-lg);
    color: var(--cr-text);
}

.calendario-meses {
    display: flex;
    gap: 1.5rem;
}

.calendario-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    height: 1.9rem;
    margin-bottom: .45rem;
}

.calendario-nav, .calendario-nav-vazio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--cr-text-2);
}

    .calendario-nav .icone {
        width: 1rem;
        height: 1rem;
    }

    .calendario-nav:hover {
        background: var(--cal-hover);
        color: var(--cr-blue-600);
    }

.calendario-nome {
    flex: 1;
    text-align: center;
    font-size: .92rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--cr-text);
}

.calendario-ano {
    margin-left: .3rem;
    font-weight: 600;
    color: var(--cr-text-3);
}

.calendario-grelha {
    display: grid;
    grid-template-columns: repeat(7, 2.2rem);
    row-gap: 3px;
}

.calendario-dia-semana {
    padding-bottom: .3rem;
    text-align: center;
    font-size: .74rem;
    font-weight: 500;
    color: var(--cr-text-3);
}

.calendario-dia {
    height: 2.1rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--cr-text);
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
}

    .calendario-dia.fim-semana {
        color: var(--cr-text-3);
    }

    .calendario-dia:hover {
        background: var(--cal-hover);
        color: var(--cr-blue-600);
    }

    .calendario-dia:focus-visible {
        outline: 2px solid var(--cr-blue-600);
        outline-offset: -2px;
    }

    .calendario-dia.hoje {
        box-shadow: inset 0 0 0 1px var(--cal-hoje);
    }

    .calendario-dia.no-periodo {
        border-radius: 0;
        background: var(--cr-blue-100);
        color: var(--cr-text);
    }

    .calendario-dia.inicio, .calendario-dia.fim {
        background: var(--cr-blue-600);
        color: #fff;
        font-weight: 600;
    }

    .calendario-dia.inicio:not(.fim) {
        border-radius: 6px 0 0 6px;
    }

    .calendario-dia.fim:not(.inicio) {
        border-radius: 0 6px 6px 0;
    }

/* One-day calendars: the title is a button (months of the year, then years); the months / years as a grid of buttons
   as wide as the month's days. */
.calendario-nome-botao {
    border: 0;
    border-radius: 6px;
    padding: .2rem .5rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

    .calendario-nome-botao:hover {
        background: var(--cal-hover);
    }

.calendario-escolhas {
    display: grid;
    grid-template-columns: repeat(3, 5.1rem);
    gap: .3rem;
    margin-top: .35rem;
}

    .calendario-escolhas.calendario-anos {
        grid-template-columns: repeat(4, 3.8rem);
    }

.calendario-escolha {
    height: 2.2rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
}

    .calendario-escolha:hover {
        background: var(--cal-hover);
    }

    .calendario-escolha.atual {
        background: var(--cr-blue-600);
        color: #fff;
        font-weight: 600;
    }

.calendario-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .7rem;
    padding-top: .6rem;
    border-top: 1px solid var(--cr-line);
}

.calendario-dica {
    font-size: .78rem;
    color: var(--cr-text-3);
}

.calendario-botao {
    padding: .28rem .7rem;
    border: 1px solid var(--cr-line-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--cr-text);
    font-size: .84rem;
    font-weight: 500;
    white-space: nowrap;
}

    .calendario-botao:hover {
        background: var(--cr-surface-2);
    }

@media (max-width: 640.98px) {
    .calendario-meses {
        flex-direction: column;
        gap: .8rem;
    }
}

.kpi-apagar {
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}

    .kpi-apagar .kpi-rotulo {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        color: var(--cr-danger);
        font-weight: 600;
    }

    .kpi-apagar .kpi-valor {
        color: var(--cr-danger);
    }

    .kpi-apagar:hover:not(:disabled) {
        background: rgba(200, 40, 60, .07);
        border-color: rgba(200, 40, 60, .35);
    }

    .kpi-apagar:focus-visible {
        outline: 2px solid var(--cr-danger);
        outline-offset: 2px;
    }

    .kpi-apagar:disabled {
        cursor: default;
        opacity: .55;
    }

/* ---- Data tables (Logins…): own scroll area, grey fixed header, hairline grid, faint stripes, row hover ---- */
.tabela-rolagem {
    border: 1px solid var(--grelha-forte);
    border-radius: 8px;
    background: #fff;
}

.tabela-dados {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

    .tabela-dados thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: .5rem .8rem;
        background: #f5f6f8;
        border-bottom: 1px solid var(--grelha-forte);
        color: var(--cr-text-2);
        font-family: var(--cr-font);
        font-size: .8rem;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        text-align: left;
        white-space: nowrap;
    }

    /* Marked grid lines in every table (user's request 2026-10-12): horizontal and vertical. */
    .tabela-dados th,
    .tabela-dados td {
        border-right: 1px solid var(--grelha);
    }

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

    .tabela-dados td {
        padding: .45rem .8rem;
        border-bottom: 1px solid var(--grelha);
        color: var(--cr-text);
        white-space: nowrap;
    }

    /* Check boxes: fixed size (the header's smaller font would shrink the "mark all" one). */
    .tabela-dados .form-check-input {
        width: 1.06rem;
        height: 1.06rem;
        vertical-align: middle;
        /* dentro de um .painel o app.css puxa a caixa para a esquerda (margem negativa): saía da tabela */
        float: none;
        margin: 0;
    }

    .tabela-dados tbody tr:nth-child(even) td {
        background: #fafbfc;
    }

    .tabela-dados tbody tr:hover td {
        background: #eef2f9;
    }

    /* A title that orders the list (a click on the VB6 grid's title). */
    .tabela-dados th .ordem {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        color: inherit;
        text-decoration: none;
    }

        .tabela-dados th .ordem:hover {
            text-decoration: underline;
        }

        .tabela-dados th .ordem .icone {
            width: .9rem;
            height: .9rem;
        }

        .tabela-dados th .ordem:not(.ativa) {
            opacity: .75;
        }

/* ---- Unit list of the filter bars (UnidadesSelector): <details> with the ChronosWeb "Firma" button and list ---- */
.unidades-selector > summary {
    list-style: none;
    cursor: pointer;
    max-width: 24rem;
}

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

    .unidades-selector > summary .icone {
        flex: none;
        width: 1rem;
        height: 1rem;
        transition: transform .15s;
    }

.unidades-selector[open] > summary {
    border-color: var(--barra-foco-borda);
}

.unidades-selector[open] > summary .icone {
    transform: rotate(180deg);
}

.unidades-selector .menu-lista {
    z-index: 60;
    min-width: 22rem;
}

.unidades-selector .menu-opcao .form-check-input {
    float: none;
    flex: none;
    margin: 0;
}

.unidades-selector .menu-opcao .mono {
    color: var(--cr-text-3);
    font-weight: 600;
}

/* ---- Alterar senha: a narrow card, not the whole width ---- */
.senha-painel {
    max-width: 30rem;
}

/* ---- Dialogs of the static pages (Shared/Dialogo.razor): a native <dialog> with the ChronosWeb dialog look
   (app.css .modal-content, -header, -body, -footer) and the same dimmed, blurred backdrop. ---- */
.dialogo-chronos {
    width: min(28rem, calc(100vw - 2rem));
    padding: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    overflow: visible;
}

    /* Bootstrap gives .modal-content its background only inside .modal. */
    .dialogo-chronos .modal-content {
        background: var(--cr-surface-solid, #fff);
        color: var(--cr-text);
    }

    .dialogo-chronos::backdrop {
        background: rgba(16, 24, 40, 0.4);
    }

    .dialogo-chronos .modal-title {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
        font-size: 1.05rem;
    }

        .dialogo-chronos .modal-title .icone {
            width: 1.1rem;
            height: 1.1rem;
            color: var(--cr-blue-600);
        }

    .dialogo-chronos[data-tom="sucesso"] .modal-title .icone { color: var(--cr-success); }
    .dialogo-chronos[data-tom="perigo"] .modal-title .icone { color: var(--cr-danger); }
    .dialogo-chronos[data-tom="aviso"] .modal-title .icone { color: var(--cr-warning); }

    .dialogo-chronos .modal-footer {
        gap: .5rem;
    }

    /* List of errors or warnings inside a dialog. */
    .dialogo-lista {
        margin: 0 0 .6rem;
        padding-left: 1.1rem;
    }

        .dialogo-lista li + li {
            margin-top: .2rem;
        }

    .dialogo-chronos .modal-body p {
        margin-bottom: .6rem;
    }

    /* No line under the title (user's request 2026-10-23): title and text read as one block; the grey foot already sets
       the buttons apart. */
    .dialogo-chronos .modal-header {
        border-bottom: 0;
        padding-bottom: .35rem;
    }

    .dialogo-chronos .modal-header + .modal-body {
        padding-top: .35rem;
    }

    /* A dialog with only a title (e.g. "Escala gravada."): no body, the title straight over the buttons. */
    .dialogo-chronos .modal-header:has(+ .modal-footer) {
        padding-bottom: 1rem;
    }

    .dialogo-chronos .modal-footer {
        display: flex;
        justify-content: flex-end;
        margin: 0;
    }

/* The one value a dialog is about (the number a temporary worker gets): label and value on one line, one size, larger
   than the dialog's text. */
.dialogo-destaque {
    font-size: 1.4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cr-strong);
}

/* An employee in a dialog (Suprimir, Guardar): number and name side by side, similar sizes. */
.dialogo-empregado {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cr-strong);
    line-height: 1.3;
}

    /* Number and name about the same size; the number only a little lighter. */
    .dialogo-empregado .mono {
        flex: none;
        color: var(--cr-text-2);
        font-size: 1.1rem;
        font-weight: 600;
    }

.dialogo-nota {
    color: var(--cr-text-2);
    font-size: .85rem;
}

/* A card with the calendar open goes above the other cards (each .painel is its own stacking context). */
.painel:has(.periodo-popover) {
    z-index: 10;
}

/* Fecho de movimentos (VB6 Fecho.frm): one narrow table, the dates as fields. */
.fecho {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 46rem;
}

.fecho-painel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 0;
}

.fecho-data {
    width: 10.5rem;
}

.fecho-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
}

/* =============================================================================================
   Escalas (VB6 escalas.frm): the Empregados frame (list | card with fixed footer); here the year grid (12 months by
   31 days, one small box per day), the counters at the side and the schedule colours (those of the VB6 maps).
   ============================================================================================= */
.esc-nova {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem;
}

.esc-descricao {
    max-width: 26rem;
    font-weight: 400;
}

.esc-modo label {
    cursor: pointer;
}

.esc-modo input {
    position: absolute;
    opacity: 0;
}

/* The chosen one as the .ativo of the other bars. */
.esc-modo label {
    border-radius: 7px;
    color: var(--cr-text-2);
}

.esc-modo 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);
}

.esc-modo label:has(input:focus-visible) {
    box-shadow: var(--cr-glow);
}

.esc-modo label > span {
    display: inline-block;
    padding: .22rem .7rem;
}

/* Escalas: the bar between the title and the list | card; links and options in the bar's capitals, as its buttons. */
.esc-barra {
    margin-bottom: 0;
}

.barra-filtros .segmentado a,
.barra-filtros .esc-modo span {
    font-size: .86rem;
    font-weight: 500;
    white-space: nowrap;
}

/* A grelha com a coluna dos totais ao lado (da mesma altura: o último bloco acaba ao nível do fundo da grelha) e,
   por baixo da grelha, os horários como legenda. */
.esc-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "grelha lado" "legenda .";   /* the legend never wider than the grid: it wraps */
    gap: .6rem .75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: .25rem 0;
}

.esc-principal {
    display: contents;
}

    .esc-principal > .esc-grelha-rolagem { grid-area: grelha; }
    .esc-principal > .esc-horarios { grid-area: legenda; }
    /* Both blocks together from the top of the grid, each with the line at its left (user's request 2026-10-21). */
    .esc-corpo > .esc-lado { grid-area: lado; }
    .esc-lado .emp-bloco:first-of-type { padding-left: .9rem; border-left: 1px solid var(--cr-line); }

/* The grid takes the height the card has left: the 12 rows stretch (2.15rem at least). */
.esc-grelha-rolagem {
    display: grid;
    flex: 1 1 auto;
    overflow-x: auto;
    min-width: 0;
    border: 1px solid var(--cr-line);
    border-radius: 8px;
    background: #fff;
}

/* O calendário da ficha do empregado (empregados.css .emp-escala): a toda a largura, cabeçalhos azuis, linhas de
   grelha marcadas; aqui cada dia é uma caixa onde se escreve, que enche a célula. */
.esc-grelha {
    width: 100%;
    min-width: 62rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

    .esc-grelha th {
        padding: .3rem 0;
        border: 1px solid var(--grelha);
        background: #f5f6f8;
        color: var(--cr-text-2);
        font-size: .76rem;
        font-weight: 600;
        text-align: center;
    }

    /* The shadow draws the line again on the cell: with border-collapse a sticky header leaves its border behind on scroll. */
    .esc-grelha thead th {
        border-top: 0;   /* the card / grid frame draws the top; a cell border there doubled it and let the rows show through on scroll */
        border-bottom: 1px solid var(--grelha-forte);
        box-shadow: inset 0 -1px 0 var(--grelha-forte);
    }

    .esc-grelha thead th:first-child,
    .esc-grelha tbody th {
        width: 3rem;
    }

    .esc-grelha tbody th {
        font-size: .8rem;
        border-right: 1px solid var(--grelha-forte);
    }

    .esc-grelha td {
        position: relative;
        height: 2.15rem;
        padding: 0;
        border: 1px solid var(--grelha);
    }

    /* Grelhas só de leitura (impressão de escalas): o código escrito na célula, sem riscas nem realce da linha. */
    .tabela-dados.esc-grelha tbody tr td {
        background: #fff;
        font-size: .84rem;
    }

    .tabela-dados.esc-grelha tbody tr td.esc-sa { background: #e6efff; }
    .tabela-dados.esc-grelha tbody tr td.esc-do { background: #cfdcfb; }

    .esc-grelha td.esc-sem {
        background: #26344d;
    }

    .esc-grelha input:not([type=checkbox]) {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
        font-family: inherit;
        font-size: .84rem;
        text-align: center;
        text-transform: uppercase;
    }

        .esc-grelha input:not([type=checkbox]):focus {
            outline: 2px solid var(--cr-blue-600);
            outline-offset: -2px;
        }

    .esc-grelha td.esc-sa input:not([type=checkbox]) { background: #e6efff; }
    .esc-grelha td.esc-do input:not([type=checkbox]) { background: #cfdcfb; }
    .esc-grelha td.esc-feriado input:not([type=checkbox]) { box-shadow: inset 0 0 0 2px #1f9a63; }
    .esc-grelha td.esc-hoje input:not([type=checkbox]) { box-shadow: inset 0 0 0 2px var(--cr-blue-600); }
    .esc-grelha td.esc-justif::after {
        content: "";
        position: absolute;
        right: 3px;
        top: 3px;
        width: 6px;
        height: 6px;
        z-index: 2;
        border-radius: 50%;
        background: var(--cr-warning);
    }

    /* Half a day of holiday (DF; user's request 2026-10-20): the cell split 50 / 50 on its diagonal, the holiday green
       (FE) above, the day's own code and colour below; the code keeps a white halo so it reads on both halves. Days
       fixed by justifications cannot be changed here (their box turns pale). */
    .esc-grelha td.esc-meio input:not([type=checkbox]) {
        background-image: linear-gradient(135deg, #1f9a63 0 50%, transparent 50%) !important;
        color: #0b2e1f;
        font-weight: 800;
        text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
    }

    .esc-grelha td.esc-preso input:not([type=checkbox]) {
        background: #e3f6e3;
        color: #0d5c3d;
        font-weight: 600;
    }

    /* Closed period (up to the unit's closing date; nothing changes there) lightly hatched in slate over every code's
       colour (lighter since 2026-10-22; not on reference plans): a layer over the cell, so the code and its colour still read. */
    .esc-grelha td.esc-fechado::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .esc-grelha td.esc-fechado::before {
        background: repeating-linear-gradient(-45deg, rgba(30, 41, 59, .17) 0 2px, rgba(30, 41, 59, .05) 2px 6px);
    }

    .esc-grelha td.esc-fechado input:not([type=checkbox]) {
        cursor: not-allowed;
    }

/* Escalas legend: a wider gap where a group starts (schedules · rest days · holidays and leave · state of the grid). */
.emp-legenda-item.esc-legenda-grupo {
    margin-left: 1.1rem;
}

.esc-cod.esc-fechado-marca {
    height: 1.25rem;
    box-shadow: inset 0 0 0 1px var(--cr-line-strong);
    vertical-align: middle;
}

/* The corner dot of a day with an automatic justification (td.esc-justif::after), on a white box. */
.esc-cod.esc-justif-marca {
    height: 1.25rem;
    background: radial-gradient(circle at calc(100% - 6px) 6px, var(--cr-warning) 3px, transparent 3.5px), #fff;
    box-shadow: inset 0 0 0 1px var(--cr-line-strong);
    vertical-align: middle;
}

.esc-cod.esc-fechado-marca {
    background: repeating-linear-gradient(-45deg, rgba(30, 41, 59, .17) 0 2px, rgba(30, 41, 59, .05) 2px 6px), #fff;
}


/* The schedule colours (boxes of the grid, the legend and the list of horários): a paleta do calendário do empregado. */
.esc-grelha input[data-cod="FE"], .esc-grelha td[data-cod="FE"], .carga-tabela td[data-cod="FE"], .esc-cod[data-cod="FE"] { background: #1f9a63 !important; color: #fff; font-weight: 700; }
.esc-grelha input[data-cod="FR"], .esc-grelha td[data-cod="FR"], .carga-tabela td[data-cod="FR"], .esc-cod[data-cod="FR"] { background: #c9efd9 !important; color: #0d5c3d; font-weight: 700; }
.esc-grelha input[data-cod="FO"], .esc-grelha td[data-cod="FO"], .carga-tabela td[data-cod="FO"], .esc-cod[data-cod="FO"] { background: #d9d4fb !important; color: #3c2f8f; }
.esc-grelha input[data-cod="CP"], .esc-grelha td[data-cod="CP"], .carga-tabela td[data-cod="CP"], .esc-cod[data-cod="CP"] { background: #fde9a8 !important; color: #6b4b00; }
.esc-grelha input[data-cod="OB"], .esc-grelha td[data-cod="OB"], .carga-tabela td[data-cod="OB"], .esc-cod[data-cod="OB"] { background: #fbd78a !important; color: #6b4b00; }
.esc-grelha input[data-cod="DS"], .esc-grelha td[data-cod="DS"], .carga-tabela td[data-cod="DS"], .esc-cod[data-cod="DS"] { background: #ead2f5 !important; color: #5c2a77; }
.esc-grelha input[data-cod="SA"], .esc-grelha td[data-cod="SA"], .carga-tabela td[data-cod="SA"], .esc-cod[data-cod="SA"] { background: #e6efff !important; }
.esc-grelha input[data-cod="DO"], .esc-grelha td[data-cod="DO"], .carga-tabela td[data-cod="DO"], .esc-cod[data-cod="DO"] { background: #cfdcfb !important; }

.esc-cod {
    display: inline-block;
    min-width: 1.9rem;
    padding: 0 .25rem;
    border-radius: 4px;
    text-align: center;
    font-weight: 700;
}

/* Its legend: the same split on a white box. */
.esc-cod.esc-meio-marca {
    height: 1.25rem;
    background: linear-gradient(135deg, #1f9a63 0 50%, #fff 50%);
    box-shadow: inset 0 0 0 1px var(--cr-line-strong);
    vertical-align: middle;
}

.esc-lado {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
}

.esc-contas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .15rem .6rem;
    margin: 0;
    font-size: .84rem;
}

    .esc-contas dt { font-weight: 500; color: var(--cr-text-2); }
    .esc-contas dd { margin: 0; text-align: right; }

.esc-aviso {
    margin: .4rem 0 0;
    font-size: .82rem;
    font-weight: 700;
}

.esc-aviso-mais { color: var(--cr-danger); }
.esc-aviso-falta { color: var(--cr-blue-600); }

/* The legend of the roster grids, small (user's request 2026-10-21): Escalas, Escalas / grupo, Escalas de trabalho / ACT. */
.esc-horarios.esc-horarios {
    font-size: .72rem;
    gap: .25rem .7rem;
}

    /* Descriptions as sentences, never in capitals (user's request 2026-10-21; NomeProprio.Frase). */
    .esc-horarios .emp-legenda-item {
        cursor: default;
    }

    .esc-horarios .esc-cod {
        border: 1px solid #d5d9df;
    }

.esc-legenda {
    font-size: .8rem;
    color: var(--cr-text-2);
}

@media (max-width: 1100px) {
    .esc-corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "grelha" "legenda" "lado"; }
}

/* Escalões / filtros de horas (VB6 ext_filt.frm): the two band tables side by side. */
.escaloes {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.escaloes-ambito {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    color: var(--cr-text-2);
    font-size: .88rem;
}

.escaloes-form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.escaloes-tabelas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-items: start;
}

/* Each band a table (user's request 2026-10-20): N.º, start (worked out), end and paid hours, gridlines as every
   table; the two side by side in one card, Guardar at its bottom right. */
.escaloes-tabela {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .escaloes-tabela > .tabela-rolagem {
        min-height: 0;
        overflow: auto;
    }

/* The card fills the room the page has left (as .grelhas), never a fixed calc: that left the page a few pixels too tall,
   with a small scroll of its own (user's request 2026-10-21). The tables scroll inside, Guardar always in view. */
.escaloes {
    flex: 1 1 auto;
    min-height: 0;
}

.escaloes-form.painel {
    flex: 0 1 auto;
    min-height: 0;
}

    .escaloes-form .escaloes-tabelas {
        flex: 1 1 auto;
        min-height: 0;
        align-items: stretch;
    }

.escaloes-grelha td {
    padding: .2rem .6rem;
    vertical-align: middle;
}

    .escaloes-grelha .num {
        width: 3.5rem;
        text-align: right;
        color: var(--cr-text-2);
    }

    .escaloes-grelha input {
        width: 6rem;
        min-height: 0;
        height: 1.75rem;
        padding: 0 .4rem;
    }

.escaloes-de {
    color: var(--cr-text-2);
}

.escaloes-rodape {
    margin: .25rem -1.35rem -1.25rem;
    padding: .65rem 1.35rem;
    border-top: 1px solid var(--cr-line);
    background: #fafbfc;
    border-radius: 0 0 var(--cr-radius) var(--cr-radius);
}

/* Tight columns, and the card as wide as the two tables (user's request 2026-10-22). */
.escaloes-form.painel { align-self: flex-start; max-width: 100%; }
.escaloes-form .escaloes-tabelas { grid-template-columns: repeat(2, max-content); gap: 1.25rem; }
.escaloes-grelha { width: auto; }
.escaloes-grelha th, .escaloes-grelha td { white-space: nowrap; }
.escaloes-grelha input { width: 4.2rem; }

@media (max-width: 800px) {
    .escaloes-form .escaloes-tabelas { grid-template-columns: minmax(0, 1fr); }
}

/* Processamento de marcações (VB6 process.frm): the units to process and the report of the last run. */
.processamento {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 60rem;
}

.proc-painel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* While it runs (chronos.js): the top bar is off and the buttons cannot be pressed again. */
.a-processar .barra-topo {
    opacity: .45;
}

.a-processar .proc-painel button {
    pointer-events: none;
    opacity: .6;
}

.a-processar,
.a-processar * {
    cursor: progress;
}

.proc-notas {
    margin-top: .6rem;
    font-size: .88rem;
}

/* The result card never squeezes its table to nothing: its own height up to a third of the window, then it scrolls
   inside (table and notes together); the cards below take the rest. */
.processamento .painel.proc-resultado {
    display: block;
    flex: none;
    max-height: 36vh;
    overflow: auto;
}

    .processamento .painel.proc-resultado > .tabela-rolagem {
        max-height: none;
        overflow: visible;
    }

/* ISTC: "Processar até" beside the buttons, and the 99 terminals in columns (number, function, name from tersetup). */
.proc-ate {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    color: var(--cr-text-2);
}

/* The units to process and (ISTC) the terminals' functions side by side: each card ends after its last object
   (user's request 2026-10-22) and grows down to the room left, then its list scrolls inside, the buttons in sight. */
.proc-cartoes {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    flex: 1 1 auto;
    min-height: 0;
}

    .proc-cartoes > .proc-painel {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        max-height: 100%;
    }

        .proc-cartoes > .proc-painel > .proc-tabela {
            flex: 0 1 auto;
            min-height: 0;
            overflow: auto;
        }

.processamento:has(> .proc-cartoes > .proc-terminais) {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
}

@media (max-width: 1100px) {
    .proc-cartoes { flex-direction: column; }
}

.proc-terminais-lista {
    /* Room for the blue focus / hover outline of the first row and the edges (the list scrolls and would cut it). */
    padding: 4px;
    margin: -4px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
    gap: .3rem .9rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.proc-terminal {
    display: grid;
    grid-template-columns: 1.6rem 8.6rem minmax(0, 1fr) 8.5rem;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
}

/* The name of the terminal (given by ISTC; the RTA600's as the grey suggestion). */
.proc-terminal > .form-control {
    min-width: 0;
}

/* Tabelas editadas numa grelha (Codsal, Terminais, Refeitório, Cartões): /ficheiros/{id}, /cartoes */
.grelhas {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3, .75rem);
    min-height: 0;
    flex: 1 1 auto;
}
/* Several grids one under the other: the form scrolls as a whole (each panel keeps its height) and the footer
   with Guardar stays in sight. */
.grelhas-form {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3, .75rem);
    min-height: 0;
    /* The card ends after its last object (the footer), never stretched to the window; taller than the window: it scrolls. */
    flex: 0 1 auto;
    overflow: auto;
}
.grelha-painel { flex: none; }
/* One grid page (Terminais, Cartões…; user's request 2026-10-21): the card is the table — its rows scroll, its foot stays in sight. */
.grelhas-form.grelhas-uma { overflow: hidden; }
.grelhas-uma > .grelha-painel.com-rodape,
.grelhas-form > .grelha-painel.com-rodape { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.grelha-painel.com-rodape > .tabela-rolagem { flex: 0 1 auto; min-height: 0; overflow: auto; }
/* Several grids (Codsal): the one chosen in the bar's radios shows, the others stay in the form, hidden. */
.grelhas:has(#gv-0) .grelha-vista { display: none; }
.grelhas:has(#gv-0:checked) .grelha-vista-0,
.grelhas:has(#gv-1:checked) .grelha-vista-1,
.grelhas:has(#gv-2:checked) .grelha-vista-2 { display: flex; }
/* A grid card with its own foot (Feriados): table, legend and foot touch, as in the other table cards. */
.grelhas-form.com-rodape { gap: 0; }
/* A roster grid that fills its card (Escalas / grupo, ACT, Feriados): the card draws the outer edge, so the outer cells
   draw none — no doubled line at the sides or at the bottom (user's request 2026-10-21). */
.tabela-rolagem > .esc-grelha tr > :first-child { border-left: 0; }
.tabela-rolagem > .esc-grelha tr > :last-child { border-right: 0; }
.tabela-rolagem:has(+ .escimp-legenda) > .esc-grelha tbody tr:last-child > * { border-bottom: 0; }
/* Feriados: low boxes, the year at a glance (user's request 2026-10-21: the grid was far too tall). */
.esc-grelha.ff-grelha td { height: 2.1rem; }
.grelhas-form > .fecho-rodape {
    position: sticky;
    bottom: 0;
    padding: .5rem .25rem;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--cr-line);
}
.grelha-editavel td { padding: 2px 4px; }
.grelha-editavel input[readonly] { background: transparent; border-color: transparent; }
.grelha-editavel .grelha-curta { width: 6.5rem; }
.grelha-editavel .grelha-codigo { width: 9rem; }
.grelha-editavel .grelha-data { width: 8rem; }
.grelha-editavel .grelha-larga { min-width: 14rem; }
.rascunho-bloco { flex: 1 1 28rem; }
.rascunho-bloco textarea { resize: vertical; }
.rascunho-campos { margin: 0 0 .5rem; font-size: .85rem; white-space: pre-wrap; }

/* Atribuição de horários: duas listas lado a lado, cada uma com o seu botão */
.atrib-lista { max-height: calc(100vh - 25rem); overflow: auto; }
.atrib-rodape { padding-top: .6rem; }

/* Dados da unidade (firmas.frm): the blocks side by side while they fit. */
.unidade-dados {
    max-width: 78rem;
}

.unidade-form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    /* Never past the window (2026-10-21): the blocks scroll inside the card, Guardar stays in sight. */
    flex: 0 1 auto;
    min-height: 0;
}

    .unidade-form > .unidade-blocos {
        flex: 0 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .unidade-form > .fecho-rodape {
        flex: none;
    }

.unidade-blocos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: .6rem;
    align-items: start;
}


/* ---- Outlines (user's request 2026-10-13): every card, bar, field and inner line has a visible edge, the same on
   every screen: cards and inner lines a cool grey hairline, fields and table frames a firmer grey. Defined here, after
   every screen's own :root, so they win; the screens' CSS keeps using these tokens. ---- */
:root {
    --cr-line: #d5d9df;
    --cr-line-strong: #c3c9d1;
}

main > .content {
    position: relative;
}

/* «Seleção» (Shared/SelecaoFiltro.razor): N.º, Secção and Grupo side by side, each with its own scroll. */
.selecao-filtro > .menu-lista.selecao-painel {
    display: flex;
    gap: 1rem;
    width: max-content;
    max-width: min(60rem, calc(100vw - 2rem));
    max-height: none;
    overflow: visible;
    padding: .7rem .8rem;
    z-index: 60;
}

.selecao-coluna {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 11rem;
}

.selecao-emp {
    min-width: 20rem;
}

.selecao-topo {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    padding: 0 .3rem .35rem;
    border-bottom: 1px solid var(--cr-line);
}

.selecao-opcoes {
    display: flex;
    flex-direction: column;
    max-height: min(22rem, 55vh);
    overflow: auto;
}

    .selecao-opcoes .menu-opcao {
        gap: .5rem;
        padding: .25rem .4rem;
        font-size: .88rem;
    }

        .selecao-opcoes .menu-opcao[hidden] {
            display: none;
        }

/* Every list of codes (Seleção, Códigos…): the code in blue, the description in plain black, one line each. */
.opcao-codigo {
    flex: none;
    min-width: 3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cr-text);
}

.opcao-desc {
    overflow: hidden;
    max-width: 22rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    color: var(--cr-text);
}

/* A code list line (Códigos of the maps, Exportação…): code and description on one line, never broken. */
.menu-opcao:has(> .opcao-codigo) {
    gap: .5rem;
    white-space: nowrap;
}

/* Processamento: its tables in the rounded frame of every other table. */
.proc-tabela {
    overflow: hidden;
    margin-bottom: .6rem;
}

/* A tick of the bar (Verificar pausas…): no shading when ticked either. */
.barra-filtros > :is(.alternar, .emp-opcao):has(input:checked) {
    background: none;
}

/* The table card: the table scrolls, its foot (Imprimir, Exportar…) stays at the bottom right, always in sight. */
.logins-painel.com-rodape {
    padding: 0;
    overflow: hidden;
}

    .logins-painel.com-rodape > .tabela-rolagem {
        border: 0;
        border-radius: 0;
    }

.tabela-rodape {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .45rem .7rem;
    border-top: 1px solid var(--cr-line);
    background: #fff;
}

/* The same foot in a table card that keeps its padding (a form with its own Guardar / Apagar under it). */
/* A short or empty table: the foot stays at the bottom of its card. */
.com-rodape > .tabela-rodape {
    margin-top: auto;
}

.painel:not(.com-rodape) > .tabela-rodape {
    padding: .5rem 0 0;
    border-top: 0;
    background: none;
}

/* Going to another screen: a wheel over the page while it does not come (chronos.js, after a short pause). */
body.a-navegar .content {
    position: relative;
}

body.a-navegar .content::after {
    content: "";
    position: absolute;
    top: 5rem;
    left: 50%;
    width: 2.4rem;
    height: 2.4rem;
    margin-left: -1.2rem;
    border: 3px solid #d5d9df;
    border-top-color: var(--cr-blue-600);
    border-radius: 50%;
    animation: navegar-roda .8s linear infinite;
    z-index: 100;
}

@keyframes navegar-roda {
    to { transform: rotate(360deg); }
}

/* ---- Mostrador (third redesign): the animated clock background in silver and blued steel. The app.css drawing
   (gradient, drifting light, the corner gears on the login) stays; only its colours change. The dial ring that turns
   in the bottom-right corner of every screen is the watch's minute track. ---- */
:root {
    --fr-traco: rgba(29, 79, 184, 0.28);
    --fr-traco-fraco: rgba(29, 79, 184, 0.16);
}

.fundo-app {
    background: var(--cr-ground);
}

.fundo-relogio {
    background: linear-gradient(170deg, #f4f5f8 0%, #eceff3 55%, #e2e6ec 100%);
}

    .fundo-relogio::after {
        background: none;
    }

    .fundo-relogio .luz-1 {
        background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 65%);
    }

    .fundo-relogio .luz-2 {
        background: radial-gradient(circle, rgba(29, 79, 184, 0.07) 0%, rgba(29, 79, 184, 0) 65%);
    }

.fundo-app > .mostrador,
.account-formulario > .mostrador {
    position: absolute;
    z-index: 0;
    right: -220px;
    bottom: -220px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    pointer-events: none;
    background:
        repeating-conic-gradient(from 0deg, rgba(28, 33, 41, 0.28) 0deg 1.4deg, transparent 1.4deg 30deg),
        repeating-conic-gradient(from 0deg, rgba(29, 79, 184, 0.2) 0deg 0.6deg, transparent 0.6deg 6deg);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%, #000 67%, transparent 68%);
    mask: radial-gradient(circle, transparent 58%, #000 59%, #000 67%, transparent 68%);
    animation: rodar-mostrador 240s linear infinite;
}

@keyframes rodar-mostrador {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fundo-app > .mostrador,
    .account-formulario > .mostrador {
        animation: none;
    }
}

/* Sheets keep the dial away from the data: white, never translucent. */
.painel, .barra-filtros, .tabela-rolagem {
    background-color: #fff;
}

@media print {
    .fundo-app > .mostrador {
        display: none;
    }
}

/* ---- Third redesign: the new pieces of the work (the Anomalias queue, the problem of the day, the search of the top
   bar, the summary of the employee card), in the Mostrador world. ---- */

/* The search of the top bar: a pill on the bar, Ctrl+K shown inside. */
.procura-global {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 17rem;
    height: 2.15rem;
    padding: 0 .4rem 0 .75rem;
    border: 1px solid var(--cr-line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--cr-text-3);
}

    .procura-global:focus-within {
        border-color: var(--cr-blue-600);
        box-shadow: var(--cr-glow);
    }

    .procura-global .icone {
        width: 1rem;
        height: 1rem;
        flex: none;
    }

    .procura-global input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: 0;
        background: none;
        color: var(--cr-text);
        font: inherit;
        font-size: .9rem;
    }

    .procura-global kbd {
        flex: none;
        padding: .05rem .4rem;
        border: 1px solid var(--cr-line);
        border-radius: 999px;
        background: var(--cr-surface-2);
        color: var(--cr-text-3);
        font: 500 .7rem var(--cr-font);
    }


/* The totals of a table sit in its foot, left of Imprimir, one short line each (user's request 2026-10-17: the dials and
   cards above the table took too much room). A register (Anomalias) is a link that shows only the rows of its kind. */
:is(.tabela-rodape, .fecho-rodape, .ferias-rodape, .emp-escala-barra) > .kpis {
    flex: 0 1 auto;
    align-items: center;
    gap: .35rem;
    margin-right: auto;
}

    :is(.tabela-rodape, .fecho-rodape, .ferias-rodape, .emp-escala-barra) > .kpis .kpi {
        flex-direction: row;
        align-items: baseline;
        gap: .4rem;
        min-width: 0;
        padding: .2rem .65rem;
        border: 1px solid var(--cr-line);
        border-radius: 999px;
        background: #fff;
        box-shadow: none;
        text-decoration: none;
        color: var(--cr-text);
    }

    :is(.tabela-rodape, .fecho-rodape, .ferias-rodape, .emp-escala-barra) > .kpis :is(.kpi-rotulo, .kpi-nota) {
        font-size: .78rem;
    }

    :is(.tabela-rodape, .fecho-rodape, .ferias-rodape, .emp-escala-barra) > .kpis .kpi-valor {
        font-size: .9rem;
    }

    .kpis.registos a.kpi:hover {
        border-color: var(--cr-blue-300);
    }

    .kpis.registos a.kpi:focus-visible {
        outline: none;
        box-shadow: var(--cr-glow);
    }

    .kpis.registos .kpi.ativo {
        border-color: var(--cr-blue-600);
        background: var(--cr-blue-100);
    }

        .kpis.registos .kpi.ativo .kpi-valor {
            color: var(--cr-blue-600);
        }

/* The queue: the list and the open day side by side; the day keeps its place on the right. */
@media (min-width: 641px) {
    .logins > .ano-fila {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        gap: .9rem;
    }

        .ano-fila > .logins-painel {
            flex: 1 1 0;
            min-width: 0;
            min-height: 0;
            /* As tall as its table (an empty or short one leaves no blank card), at most the row: then the table scrolls. */
            align-self: flex-start;
            max-height: 100%;
            display: flex;
            flex-direction: column;
        }

            .ano-fila > .logins-painel > .tabela-rolagem {
                flex: 0 1 auto;
                min-height: 0;
                overflow: auto;
            }
}

.ano-dia {
    /* --dia-largura (chronos.js): a day with many periods widens the pane until they all fit, at most 75 %. */
    flex: 0 0 min(max(min(40%, 720px), var(--dia-largura, 0px)), 75%);
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.ano-dia-topo {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--cr-line);
    background: var(--cr-surface-2);
}

.ano-dia-quem {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.ano-dia-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: auto;
    line-height: 1.25;
}

.ano-dia-conta {
    color: var(--cr-text-3);
    font-size: .8rem;
    white-space: nowrap;
}

/* The buttons of the open day never break into two lines. */
.ano-dia-topo > .btn {
    flex: none;
    white-space: nowrap;
}

.ano-dia-quadro {
    flex: 1 1 auto;
    width: 100%;
    min-height: 32rem;
    border: 0;
    background: var(--cr-ground);
}

/* With the day open the queue is compact: who, when and the problem in words. */
.ano-fila.com-dia .ano-problema {
    width: 100%;
    white-space: normal;
}

    .ano-fila.com-dia .ano-problema a {
        color: #8e1e2a;
        text-decoration: none;
    }

    .ano-fila.com-dia tr.ano-escolhida .ano-problema a {
        color: var(--cr-text);
    }

.tabela-dados tbody tr.ano-escolhida td {
    background: var(--cr-blue-100);
    font-weight: 600;
}

    .tabela-dados tbody tr.ano-escolhida td:not([rowspan]) {
        box-shadow: inset 0 1px 0 var(--cr-blue-600), inset 0 -1px 0 var(--cr-blue-600);
    }

/* A screen inside the queue's frame: only its work area (no bars, no list, no side column, no background dial). */
html.em-painel .barra-topo,
html.em-painel .barra-estado,
html.em-painel .fundo-relogio,
html.em-painel .fundo-app > .mostrador,
html.em-painel .emp-lista,
html.em-painel .emp-lado,
html.em-painel .emp-cabecalho,
html.em-painel .movimentos .emp-topo {
    display: none;
}

html.em-painel main > .content {
    padding: .6rem;
}

html.em-painel .emp-grelha,
html.em-painel .emp-corpo {
    /* The side column is hidden in the frame: its 20rem track goes too (it kept the periods narrow). */
    grid-template-columns: minmax(0, 1fr);
}

html.em-painel .mov-dias {
    grid-template-columns: minmax(0, 1fr);
}

/* In the frame the periods share its width in one row (narrower columns, so the one to justify is in view), the next
   day's punches stay in the full day (Dia completo) to keep the periods above the fold, and the day's cards sit
   straight on the pane: no sheet around them, no grey ground. */
html.em-painel .mov-periodos {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(4rem, 1fr);
    width: auto;
    max-width: none;
    font-size: .88em;
}

    /* Words break only between words, unless one alone does not fit its column (16 periods in a day). */
    html.em-painel .mov-periodos * {
        overflow-wrap: anywhere;
        word-break: normal;
    }

html.em-painel .mov-dias > :nth-child(2) {
    display: none;
}

html.em-painel body,
html.em-painel .fundo-app {
    background: #fff;
}

html.em-painel .emp-abas {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* The problem of the day, in words, above the punches; a quiet tick when there is none. */
.mov-problema {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .6rem;
    padding: .55rem .8rem;
    border: 1px solid #f0c4c9;
    border-radius: var(--cr-radius-sm);
    background: #fdf2f3;
    color: #8e1e2a;
    font-weight: 500;
}

    .mov-problema .icone {
        width: 1.1rem;
        height: 1.1rem;
        flex: none;
    }

    .mov-problema.ok {
        border-color: var(--cr-line);
        background: var(--cr-surface-2);
        color: var(--cr-text-2);
        font-weight: 400;
    }

        .mov-problema.ok .icone {
            color: var(--cr-success);
        }

/* Saved or not, beside the day's name; and the way to the next day of the month with anomalies. */
.estado-dia {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .4rem;
    color: var(--cr-text-3);
    font-size: .82rem;
    font-weight: 500;
}

    .estado-dia::before {
        content: "";
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--cr-success);
    }

    .estado-dia.por-gravar {
        color: var(--cr-warning);
    }

        .estado-dia.por-gravar::before {
            background: var(--cr-warning);
        }

.mov-proximo {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: auto;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
}

    .mov-proximo .icone {
        width: .9rem;
        height: .9rem;
    }

/* The summary of the employee card: what is looked up most, one line, with the way to the days and anomalies. */
/* From the Nome column on (not under the number): the line and the text start where the name does. */
.emp-resumo {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem 1.6rem;
    margin: .55rem 0 0;
    padding-top: .5rem;
    border-top: 1px solid var(--cr-line);
    font-size: .88rem;
}

    .emp-resumo > div {
        display: flex;
        gap: .4rem;
        align-items: baseline;
    }

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

    .emp-resumo dd {
        margin: 0;
        color: var(--cr-text);
        font-weight: 500;
    }

.emp-resumo-nota {
    color: var(--cr-text-3);
    font-weight: 400;
}

@media print {
    .procura-global, .ano-dia, .estado-dia, .mov-proximo {
        display: none !important;
    }
}

/* ---- Printing, every screen (user's request 2026-10-13): the title, the print date with the criteria of the bar
   (.impressao-info, written by chronos.js on beforeprint) and the table whole — no frame of the window, no inner scroll,
   no dark background; rows that do not fit go on to the next page under the repeated header. ---- */
.impressao-info,
.so-impressao,
.impressao-logo {
    display: none;
}

@media print {
    .content {
        position: relative;
    }

    .impressao-logo {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        max-width: 5cm;
        max-height: 1.4cm;
        object-fit: contain;
    }

    .so-impressao {
        display: inline;
    }

    html, body {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .barra-topo, .barra-estado, .kpis, dialog, .alert {
        display: none !important;
    }

    /* Everything between the page and its table takes the height of its content (on screen they fill the window and
       scroll). Not the map nor the photo, which have a size of their own. */
    .content :is(div, section, form, article, aside, nav):not(.emp-mapa, .emp-mapa *, .emp-foto) {
        height: auto !important;
        max-height: none !important;
        flex-basis: auto !important;
        overflow: visible !important;
    }

    .painel, .tabela-rolagem {
        box-shadow: none !important;
        backdrop-filter: none !important;
        background: #fff !important;
    }

    .tabela-rodape {
        display: none !important;
    }

    /* Title and the line under it as short as they can be (user's request 2026-10-15): more of the sheet for the table. */
    .cabecalho-pagina {
        margin: 0 !important;
        gap: 0 !important;
    }

    .rotulo-modulo {
        margin: 0 !important;
        font-size: 13pt !important;
        line-height: 1.15 !important;
    }

    .impressao-info {
        display: block;
        margin: 0 0 .35rem;
        font-size: 8.5pt;
        line-height: 1.2;
        color: #000;
    }

    /* Smaller, so the wide maps fit the width of the sheet. */
    .tabela-dados {
        font-size: 7.5pt !important;
    }

        .tabela-dados th,
        .tabela-dados td {
            padding: 2px 4px !important;
        }
}

/* [data-abrir] (chronos.js): a double click opens another screen. */
[data-abrir] {
    cursor: pointer;
}

/* The unit chip: always 16rem (user's request 2026-10-20: never changes width; a long name ends in "…"). */
.unidade-menu {
    position: relative;
    flex: none;
}

.unidade-atual {
    width: 16rem;
    cursor: pointer;
    list-style: none;
}

    .unidade-atual::-webkit-details-marker {
        display: none;
    }

    .unidade-atual .menu-utilizador-seta {
        margin-left: auto;
        flex: none;
    }

.unidade-menu[open] .unidade-atual .menu-utilizador-seta {
    transform: rotate(180deg);
}

/* Its list: the same chip look, one line per unit, the current one in blued steel. */
.unidade-menu-lista {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    width: 16rem;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    margin: 0;
    padding: .25rem;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--cr-line-strong);
    box-shadow: var(--cr-shadow-lg);
}

.unidade-menu-opcao {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    height: 2.15rem;
    padding: 0 .55rem;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--cr-text);
    font-size: .88rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

    .unidade-menu-opcao:hover, .unidade-menu-opcao:focus-visible {
        outline: none;
        background: var(--cr-hover);
    }

    .unidade-menu-opcao .mono {
        flex: none;
        color: var(--cr-text-2);
        font-weight: 600;
    }

    .unidade-menu-opcao.ativo {
        background: var(--cr-blue-100);
        color: var(--cr-blue-600);
    }

        .unidade-menu-opcao.ativo .mono {
            color: var(--cr-blue-600);
        }

/* General address only: the companies above the units in the chip's list (the chip itself shows only the unit). */
.unidade-menu-grupo {
    padding-bottom: .25rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--cr-line);
}

.unidade-menu-rotulo {
    display: block;
    padding: .3rem .55rem .15rem;
    color: var(--cr-text-3);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.procura-global {
    flex: 0 1 15rem;
    width: auto;
    min-width: 10rem;
}

/* Medium windows: no room for the name, the chip shows only the code (always 3 digits, so still one fixed width);
   its list keeps the names. */
/* ---- Escalas, the year on one screen (user's requests 2026-10-20): a short identity line (number as large as the
   description, the kind of roster at the right), the tools in one line over the grid, a grid that shrinks to the card
   (no minimum width, rows 1.4rem at least), no scroll at 1600 × 900. ---- */
.escalas .jus-topo {
    margin-bottom: .45rem;
    padding-bottom: .45rem;
    gap: .6rem;
}

.escalas .jus-amostra {
    min-width: 0;
    height: auto;
    padding: 0 .1rem;
    border: 0;
    background: none;
    font-size: .95rem;
    font-weight: 500;
}

    .escalas .jus-titulo-tipo .distintivo {
        padding: .3rem .65rem;
        font-size: .92rem;
    }

.escalas .jus-titulo {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

    .escalas .jus-titulo .esc-descricao {
        font-size: .95rem;
    }

    .escalas .jus-titulo-tipo {
        margin: 0 0 0 auto;
    }

/* Escalas › Ferramentas (2026-10-20): one line of pills above the grid and the side column, like the criteria bars —
   Padrão (the range: two dates and "Sobrepor"), Aplicar, Copiar, Escala — then Apagar and the keyboard icon at the
   right. The actions inside a pill are white buttons (they act, they are not a choice). */
.esc-ferramentas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .6rem;
    margin-bottom: .6rem;
}

    /* Apagar and the keyboard icon always at the right end, also when the line breaks (as the bars' actions). */
    .esc-ferramentas > .espaco {
        display: none;
    }

        .esc-ferramentas > .espaco + * {
            margin-left: auto;
        }

    .esc-ferramentas .controlo {
        display: inline-flex;
        align-items: center;
    }

    .esc-ferramentas .controlo-rotulo {
        font-size: .86rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .esc-ferramentas .segmentado {
        align-items: center;
        gap: 3px;
    }

        .esc-ferramentas .segmentado button {
            background: #fff;
            box-shadow: inset 0 0 0 1px var(--cr-line-strong);
            color: var(--cr-text);
            padding: .22rem .6rem;
        }

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

    .esc-ferramentas .esc-padrao .data-app,
    .esc-ferramentas .esc-padrao input[type=date] {
        height: 1.75rem;
        min-width: 7.4rem;
        padding: 0 .45rem;
        font-size: .84rem;
    }

.esc-padrao-ate {
    color: var(--cr-text-3);
}

.esc-alternar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 1.75rem;
    margin: 0;
    padding: 0 .6rem;
    border-radius: 7px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--cr-line-strong);
    font-size: .84rem;
    white-space: nowrap;
    cursor: pointer;
}

    .esc-alternar .form-check-input {
        margin: 0;
    }

    .esc-alternar:has(input:checked) {
        color: var(--cr-blue-600);
        background: var(--cr-blue-100);
    }

.esc-grelha {
    min-width: 0;
}

    .esc-grelha td {
        height: 1.4rem;
    }

    .esc-grelha input:not([type=checkbox]) {
        font-size: .8rem;
    }

    /* The pattern picked with Ctrl / Shift + click (chronos.js): a blued-steel frame on each of its days. */
    .esc-grelha td.esc-no-padrao input:not([type=checkbox]) {
        box-shadow: inset 0 0 0 2px var(--cr-blue-600);
    }


.escalas .esc-lado {
    overflow: auto;
}


/* The month labels set the row height (padding + line-height = 30px): no padding, so the rows follow the boxes. */
.esc-grelha tbody th,
.emp-escala tbody th {
    padding: 0 .2rem;
    line-height: 1.1;
}

/* Suggestions of the top-bar search (chronos.js): a list under the box, each result under the name of its place. */
.procura-global {
    position: relative;
}

.procura-sugestoes {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: 26rem;
    max-width: calc(100vw - 2rem);
    max-height: min(70vh, 30rem);
    overflow-y: auto;
    padding: .3rem;
    border: 1px solid var(--cr-line-strong);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--cr-shadow-lg);
}

    .procura-sugestoes[hidden] {
        display: none;
    }

.procura-grupo {
    padding: .45rem .55rem .2rem;
    color: var(--cr-text-3);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

    .procura-grupo:not(:first-child) {
        margin-top: .2rem;
        border-top: 1px solid var(--cr-line);
    }

.procura-opcao {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .38rem .55rem;
    border-radius: 5px;
    color: var(--cr-text);
    font-size: .88rem;
    text-decoration: none;
}

    .procura-opcao:hover,
    .procura-opcao.ativa {
        background: var(--cr-blue-100);
        color: var(--cr-blue-600);
    }

.procura-codigo {
    flex: none;
    min-width: 3.2rem;
    color: var(--cr-text-2);
    font-weight: 600;
}

.procura-texto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.procura-vazio {
    padding: .5rem .55rem;
    color: var(--cr-text-3);
    font-size: .86rem;
}

/* Month control (Shared/MesSelector.razor): the year with ‹ › on top, then the twelve months, three per row. */
.ano-selector .menu-lista.mes-selector-lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem;
    width: 19rem;
    padding: .5rem;
}

    .mes-selector-lista .ano-selector-ano {
        width: auto;
    }

.mes-selector-ano {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .2rem;
    font-weight: 600;
}

/* «Por» inside its own segmented pill (user's request 2026-10-20, every bar): the label and the choices in one frame. */
:is(.barra-filtros, .esc-ferramentas) .controlo:has(> .controlo-rotulo + .segmentado) {
    gap: 0;
    padding: 3px;
    border-radius: 8px;
    background: var(--barra-recesso);
    box-shadow: inset 0 0 0 1px var(--barra-recesso-borda);
}

    /* The label on its own shade, so it does not read as one more choice. */
    :is(.barra-filtros, .esc-ferramentas) .controlo:has(> .controlo-rotulo + .segmentado) > .controlo-rotulo {
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        margin-right: 3px;
        padding: 0 .6rem;
        border-radius: 6px;
        background: var(--cr-line);
        color: var(--cr-text);
    }

    :is(.barra-filtros, .esc-ferramentas) .controlo:has(> .controlo-rotulo + .segmentado) > .segmentado {
        padding: 0;
        background: none;
        box-shadow: none;
    }

/* Escalas › Duplicação: the employees' list fills the dialog's width and opens inside it (the dialog grows). */
.esc-dup-lista {
    display: block;
    position: relative;
}

    .esc-dup-lista > summary.btn-filtro {
        width: 100%;
        justify-content: space-between;
    }

    .esc-dup-lista > .menu-lista {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: .35rem;
        box-shadow: none;
    }

    /* The dialog's own form-check margin would push each box out of the list. */
    .esc-dup-lista .menu-opcao .form-check-input {
        flex: none;
        margin: 0;
    }

/* ---- Cards never make the page scroll (user's request 2026-10-21): on desktop the page is the window; a card as tall
   as its content, up to the room left, and past that its table scrolls inside (title and foot stay in sight).
   app.css kept every block of .content at its full height (flex-shrink: 0), so a long card stretched the page. ---- */
@media (min-width: 641px) {
    .content > :is(div, form, section):not(.cabecalho-pagina):not(.barra-filtros):not(.alert) {
        flex-shrink: 1;
        min-height: 0;
    }

    /* A form between the page and its table card (Inserção manual…) passes the room on. */
    .content form:not(.barra-filtros):has(> .painel > .tabela-rolagem) {
        display: flex;
        flex-direction: column;
        flex-shrink: 1;
        min-height: 0;
    }

    .painel:has(> .tabela-rolagem) {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

        .painel:has(> .tabela-rolagem) > * {
            flex-shrink: 0;
        }

        .painel:has(> .tabela-rolagem) > .tabela-rolagem {
            flex: 0 1 auto;
            min-height: 0;
            overflow: auto;
        }
}

/* Transferir e histórico (redesign 2026-10-21): the employee as a pill of the bar; the chosen radio's row tinted. */
.trf-emp { gap: .4rem; text-decoration: none; white-space: nowrap; }
.trf-emp .mono { color: var(--cr-blue-600); font-weight: 600; }
.trf-destinos td.trf-escolha { width: 2.5rem; text-align: center; }
.trf-destinos tr:has(input:checked) td { background: var(--cr-blue-100); }
.trf-destinos label { cursor: pointer; display: block; }
.trf-novo input { width: 6rem; }

.emp-legenda-item.esc-legenda-grupo.inicio-linha { margin-left: 0; }

/* Focus rings never cut by a scrolling list or card (user's request 2026-10-21): the list's row draws its ring inside
   itself, in the app's blue; scrolling cards of fields keep 4px of room (taken back by the margin) for the 3px glow. */
.emp-lista-opcao:focus-visible {
    outline: 2px solid var(--cr-blue-600);
    outline-offset: -2px;
}

.ficha-corpo,
.jus-corpo {
    padding-inline: 4px;
    margin-inline: -4px;
}

/* Empty data table (chronos.js, as in ChronosExtra): icon and text under the header; smaller inside the cards' side tables. */
.tabela-rolagem > .estado-vazio {
    padding: 2.5rem 1rem;
}

    .tabela-rolagem > .estado-vazio .estado-vazio-icone {
        display: inline-block;
    }

:not(.painel) > .tabela-rolagem > .estado-vazio {
    padding: 1rem;
}

    :not(.painel) > .tabela-rolagem > .estado-vazio .estado-vazio-icone {
        width: 1.6rem;
        height: 1.6rem;
        margin-bottom: .3rem;
    }

/* Processamento: the popup with the progress bar while it runs (chronos.js, form[data-progresso]). */
.dialogo-chronos.dialogo-progresso {
    width: min(32rem, calc(100vw - 2rem));
}

    /* It has no button, so the dialog itself takes the focus: no focus ring around the whole window. */
    .dialogo-chronos.dialogo-progresso:focus,
    .dialogo-chronos.dialogo-progresso:focus-visible {
        outline: none;
    }

.dialogo-progresso-texto {
    color: var(--cr-text-2);
    min-height: 1.4em;
}

.dialogo-progresso-barra {
    display: flex;
    align-items: center;
    gap: .75rem;
}

    .dialogo-progresso-barra progress {
        flex: 1 1 auto;
        height: .7rem;
        appearance: none;
        border: 0;
        border-radius: 999px;
        overflow: hidden;
        background: var(--cr-line);
    }

        .dialogo-progresso-barra progress::-webkit-progress-bar {
            background: var(--cr-line);
            border-radius: 999px;
        }

        .dialogo-progresso-barra progress::-webkit-progress-value {
            background: var(--cr-blue-600);
            border-radius: 999px;
        }

        .dialogo-progresso-barra progress::-moz-progress-bar {
            background: var(--cr-blue-600);
            border-radius: 999px;
        }

.dialogo-progresso-pct {
    white-space: nowrap;
    min-width: 3.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* A screen opened from the menu, while it comes (chronos.js): only a wheel in the middle of the screen, no card. */
.ecra-a-abrir {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
}

    .ecra-a-abrir::after {
        content: "";
        width: 2.6rem;
        height: 2.6rem;
        border: 3px solid var(--cr-line-strong);
        border-top-color: var(--cr-blue-600);
        border-radius: 50%;
        animation: barra-espera .7s linear infinite;
    }

/* A header cell that is the last of its row but not at the table's edge (rowspans; chronos.js) keeps its right line. */
.tabela-dados thead tr > th.nao-ultima {
    border-right: 1px solid var(--grelha) !important;
}

/* «Retroceder» (chronos.js, every screen; user's request 2026-10-22): discreet, at the right of the title row — grey-blue
   text with a chevron, the blue only on hover / focus. Never printed. */
.retroceder {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .55rem .25rem .35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    font-size: .86rem;
    font-weight: 500;
    color: var(--cr-text-2);
    cursor: pointer;
    align-self: center;
}

    .retroceder:hover,
    .retroceder:focus-visible {
        color: var(--cr-blue-600);
        border-color: var(--cr-line);
        background: #fff;
    }

@media print {
    .retroceder { display: none !important; }
    /* «Uma página por empregado»: each employee's rows from a new sheet; a row never splits over two. */
    tr.corte-pagina { break-before: page; }
    .tabela-dados tr { break-inside: avoid; }
    .tabela-dados thead { display: table-header-group; }
}

/* «Uma página por empregado» in a table's foot: the same small card as a bar's tick (name, then the box). */
.tabela-rodape .cortes-pagina {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: .45rem;
    height: 2rem;
    margin: 0;
    padding: 0 .65rem 0 .75rem;
    border: 1px solid var(--cr-line-strong);
    border-radius: var(--cr-radius-sm);
    background: #fff;
    font-size: .86rem;
    color: var(--cr-text-2);
    cursor: pointer;
}

    .tabela-rodape .cortes-pagina[hidden] {
        display: none;
    }

    .tabela-rodape .cortes-pagina .form-check-input {
        margin: 0;
    }

/* ---- Top bar that does not fit (2026-10-23: an account with every category, the full unit name and a long login
   overflowed at 1920px). What the bar holds depends on the account, so chronos.js measures it and steps down while it
   overflows, in this order (user's choice): html.topo-iniciais = the user menu shows only the initials
   (MainLayout.razor.css); html.topo-medio = also the unit chip shows only the code, a shorter search, tighter
   categories; html.topo-dobrado = also the menu folds into the button. Below 1550px it is folded anyway (media query). ---- */
html.topo-medio .menu-topo { gap: .25rem; }
html.topo-medio .menu-topo-item { padding: 0 .55rem; font-size: .9rem; }
html.topo-medio .unidade-atual { width: 6.75rem; }
html.topo-medio .unidade-atual .unidade-atual-nome { display: none; }
html.topo-medio .barra-topo-direita { gap: .5rem; }
html.topo-medio .procura-global { flex: 0 1 9rem; width: 9rem; min-width: 7rem; }
html.topo-medio .procura-global kbd { display: none; }

html.topo-dobrado .barra-topo { flex-wrap: wrap; padding: .45rem 1rem; }
html.topo-dobrado .menu-abrir-botao { display: block; order: 3; }
html.topo-dobrado .barra-topo-direita { order: 2; }
html.topo-dobrado .menu-topo { order: 4; display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding: .4rem 0 .6rem; }
html.topo-dobrado .menu-abrir:checked ~ .menu-topo { display: flex; }
html.topo-dobrado .menu-topo-lista { position: static; min-width: 0; max-width: none; max-height: none; margin: .2rem 0 .4rem 1rem; box-shadow: none; }

/* Requests waiting for the account's decision, beside Pedidos / justificações in the top menu (MenuTopo.razor). */
.menu-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--cr-blue-600);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.menu-topo-opcao .menu-contador { margin-left: .4rem; }
.menu-contador[hidden] { display: none; }