/* =============================================================================================
   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.
   ============================================================================================= */

/* ---- Fonts without the jump: app.css declares them with font-display: swap, so on every page the text was first
   drawn in the fallback font and then redrawn in the right one (the letters of Início and the top bar jumped when
   changing unit). The same faces again with "block": the text waits for the font (cached and preloaded, so a few ms)
   instead of being drawn twice. The last @font-face of the same family and weight wins. ---- */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter.woff2') format('woff2');
    font-weight: 400 700;
    font-display: block;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('fonts/space-grotesk.woff2') format('woff2');
    font-weight: 500 700;
    font-display: block;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono.woff2') format('woff2');
    font-weight: 500;
    font-display: block;
}

/* ---- 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: small group label above the big title ---- */
/* Page titles a little smaller than in ChronosWeb (app.css stays as copied): many VB6 screen names are long. */
.rotulo-modulo {
    font-size: 1.65rem;
}

.eyebrow-pagina {
    font-family: var(--cr-font-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cr-text-2);
}

/* ---- 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.6rem;
    padding: 0 1.25rem;
    /* The pale blue of the logo (the ChronosWeb sidebar), so the bar reads as part of the brand. */
    background: linear-gradient(180deg, #f5f8ff 0%, #e9f0ff 100%);
    border-bottom: 1px solid rgba(42, 91, 234, 0.16);
    box-shadow: 0 1px 3px rgba(10, 24, 48, 0.06);
}

    /* 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.3rem;
        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 in the display font of the titles (Space Grotesk), like the rest of the brand. */
.menu-topo-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: 2.5rem;
    padding: 0 .85rem;
    border-radius: 9px;
    color: rgba(16, 36, 69, 0.88);
    font-family: var(--cr-font-display);
    font-size: .96rem;
    font-weight: 600;
    letter-spacing: .005em;
    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: rgba(42, 91, 234, 0.09);
        color: var(--cr-ink-900);
    }

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

    /* Category of the current page: underlined in blue, like the lit hand of a watch. */
    .menu-topo-item.active {
        color: var(--cr-blue-600);
        box-shadow: inset 0 -2px 0 var(--cr-blue-600);
        border-radius: 8px 8px 0 0;
    }

    .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% + .35rem);
    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: .4rem;
    background: var(--cr-surface-solid);
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius-sm);
    box-shadow: var(--cr-shadow-lg);
}

.menu-topo-opcao {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: 7px;
    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-blue-100);
        color: var(--cr-ink-900);
        outline: none;
    }

    .menu-topo-opcao.active {
        background: rgba(42, 91, 234, 0.12);
        color: var(--cr-blue-600);
        font-weight: 600;
    }

    .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, Ronda), 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: .8rem;
    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: 8px;
    border: 1px solid rgba(42, 91, 234, 0.25);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2816, 36, 69, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.4rem rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

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

/* Medium windows: the unit chip shows only the code, the categories get a little tighter. */
@media (max-width: 1750px) {
    .unidade-atual-nome {
        display: none;
    }

    /* Only the code (always 3 digits): the chip keeps its size by itself. */
    .unidade-atual {
        width: auto;
    }

    .menu-topo {
        gap: .5rem;
    }

    .menu-topo-item {
        padding: 0 .65rem;
        font-size: .9rem;
    }
}

/* Narrow windows: the menu folds into the button and opens as a list under the bar. */
@media (max-width: 1450px) {
    .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: .55rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(42, 91, 234, 0.08);
    border: 1px solid rgba(42, 91, 234, 0.2);
    color: var(--cr-ink-800);
    font-size: .9rem;
    font-weight: 600;
    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: rgba(42, 91, 234, 0.14);
        color: var(--cr-ink-900);
    }

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

.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.6rem;
    padding: .45rem 1.75rem;
    background: linear-gradient(180deg, #e9f0ff 0%, #f5f8ff 100%);
    border-top: 1px solid rgba(42, 91, 234, 0.16);
    font-size: .82rem;
    color: var(--cr-text);
}

.barra-estado-rotulo {
    margin-right: .45rem;
    font-family: var(--cr-font-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cr-text-2);
}

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

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

/* ---- Início ---- */
.inicio-grelha {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
        "trabalho unidades"
        ".        avisos";
    gap: 1rem;
    align-items: start;
}

/* The first row lines up: "Unidade de trabalho" as tall as "Unidades". */
.inicio-trabalho {
    grid-area: trabalho;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

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

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

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

    /* The shortcuts sit at the bottom of the card, level with the end of the units list. */
    .inicio-trabalho .inicio-atalhos {
        margin-top: auto;
    }

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

.inicio-unidades {
    grid-area: unidades;
    align-self: stretch;
}

.inicio-avisos {
    grid-area: avisos;
}

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

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

.unidade-nome {
    font-family: var(--cr-font-display);
    font-size: 1.55rem;
    font-weight: 700;
    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-family: var(--cr-font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    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-ink-800);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

    .atalho:hover {
        border-color: rgba(42, 91, 234, 0.45);
        box-shadow: var(--cr-shadow);
        color: var(--cr-ink-900);
    }

    .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: rgba(42, 91, 234, 0.45);
    }

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

    .unidade-opcao.ativa {
        border-color: var(--cr-blue-600);
        background: var(--cr-blue-100);
        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-family: var(--cr-font-mono);
        font-size: .68rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--cr-text-2);
        padding-top: .2rem;
    }

    .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: #fffbea;
}

    .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-family: var(--cr-font-mono);
        font-size: .64rem;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--cr-text-2);
        padding: .35rem .5rem;
        border-bottom: 1px solid var(--cr-line);
    }

    .tabela-aviso td {
        padding: .3rem .5rem;
        border-bottom: 1px solid rgba(15, 36, 64, 0.06);
    }


/* ---- Card titles ("Unidade de trabalho", "Unidades", "Avisos"…): same style as ChronosWeb, much bigger ---- */
.painel-titulo {
    font-size: 1rem;
    letter-spacing: .15em;
    margin-bottom: 1.05rem;
}

    .painel-titulo::before {
        height: 1.15rem;
    }

.inicio-subtitulo,
.dia-subtitulo {
    font-size: .8rem;
}

/* ---- The dial hands of the ChronosWeb sidebar, in the bottom-right corner of the page ---- */
/* The page area clips what goes out of it (the dial must stay above the status bar) and, on desktop,
   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;
}

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

.fundo-app > .mostrador {
    position: absolute;
    z-index: 0;
    right: -200px;
    bottom: -200px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(42, 91, 234, 0.22) 0deg 0.7deg, transparent 0.7deg 6deg);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 67%, transparent 68%);
    mask: radial-gradient(circle, transparent 60%, #000 61%, #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 {
        animation: none;
    }
}

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

.account-copyright {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    z-index: 1;
    text-align: center;
    font-size: .74rem;
    color: rgba(16, 36, 69, 0.55);
}

/* ---- Tooltip (data-dica): larger than the browser's, in the light blue of the bars; chronos.js places it ---- */
.dica-flutuante {
    position: fixed;
    z-index: 1000;
    max-width: 26rem;
    padding: .6rem .8rem .65rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #f7faff 0%, #e8f0ff 100%);
    border: 1px solid rgba(42, 91, 234, 0.28);
    box-shadow: 0 10px 28px -10px rgba(42, 91, 234, 0.45), 0 2px 6px rgba(10, 24, 48, 0.08);
    color: var(--cr-text);
    font-size: .9rem;
    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 rgba(42, 91, 234, 0.18);
        font-family: var(--cr-font-display);
        font-size: .98rem;
        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: 5px;
        border: 1px solid rgba(42, 91, 234, 0.3);
        border-bottom-width: 2px;
        background: #fff;
        color: var(--cr-ink-900);
        font-family: var(--cr-font-mono);
        font-size: .8rem;
        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: 8px;
    border: 1px solid rgba(42, 91, 234, 0.22);
    background: rgba(42, 91, 234, 0.06);
    color: var(--cr-blue-600);
    cursor: help;
}

    .atalhos-teclado:hover,
    .atalhos-teclado:focus-visible {
        outline: none;
        background: rgba(42, 91, 234, 0.13);
        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 rgba(42, 91, 234, 0.2);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 12px 32px -10px rgba(10, 24, 48, 0.35), 0 2px 6px rgba(10, 24, 48, 0.08);
        color: var(--cr-text);
    }

    select.form-select option {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-height: 2rem;
        padding: .3rem .65rem;
        border-radius: 7px;
        font-family: var(--cr-font);
        font-size: .92rem;
        font-weight: 500;
        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: rgba(42, 91, 234, 0.09);
            color: var(--cr-ink-900);
        }

        select.form-select option:checked {
            background: rgba(42, 91, 234, 0.13);
            color: var(--cr-blue-600);
            font-weight: 600;
        }

        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-family: var(--cr-font-mono);
            font-size: .7rem;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--cr-text-2);
        }

        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: 2.1rem;
    padding: 0 .15rem;
    border-radius: 10px;
    background: var(--barra-recesso);
    box-shadow: inset 0 0 0 1px var(--barra-recesso-borda);
}

.periodo-datas {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 1.8rem;
    padding: 0 .45rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--barra-destaque);
    font-family: var(--cr-font-mono);
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .periodo-datas .icone {
        width: 1rem;
        height: 1rem;
        margin-right: .15rem;
        opacity: .75;
    }

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

/* 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.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--cr-text-2);
}

    .periodo-passo:hover {
        background: var(--barra-hover);
        color: var(--barra-destaque);
    }

    .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: rgba(28, 92, 192, 0.09);
    --cal-hoje: rgba(28, 92, 192, 0.55);
    display: inline-block;
    padding: .9rem 1rem .7rem;
    border-radius: var(--cr-radius);
    background: var(--cr-surface-solid);
    border: 1px solid var(--cr-line-strong);
    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: 7px;
    background: transparent;
    color: var(--cr-text);
}

    .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-family: var(--cr-font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cr-ink-800);
}

.calendario-ano {
    margin-left: .3rem;
    font-family: var(--cr-font-mono);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--cr-blue-600);
}

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

.calendario-dia-semana {
    padding-bottom: .3rem;
    text-align: center;
    font-family: var(--cr-font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    color: rgba(28, 92, 192, 0.6);
}

.calendario-dia {
    height: 2.1rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--cr-text);
    font-family: var(--cr-font-mono);
    font-size: .85rem;
    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: 700;
        box-shadow: 0 4px 12px rgba(28, 92, 192, 0.32);
    }

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

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

.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-family: var(--cr-font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cr-text-3);
}

.calendario-botao {
    padding: .3rem .75rem;
    border: 1px solid var(--cal-hoje);
    border-radius: 8px;
    background: var(--cal-hover);
    color: var(--cr-blue-600);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

    .calendario-botao:hover {
        background: var(--cr-blue-100);
    }

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

/* ---- "Apagar" as a card next to "Registos" (ChronosWeb Auditoria): same size, in red ---- */
.kpi-form {
    display: flex;
    margin: 0;
}

.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, light-blue fixed header, white / light-blue rows ---- */
.tabela-rolagem {
    border: 1px solid var(--cr-line-strong);
    border-radius: 9px;
    background: #fff;
}

.tabela-dados {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem;
}

    .tabela-dados thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: .55rem .8rem;
        background: #dce7ff;
        border-bottom: 1px solid rgba(42, 91, 234, 0.3);
        color: var(--cr-blue-600);
        font-family: var(--cr-font-mono);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
    }

    .tabela-dados td {
        padding: .45rem .8rem;
        border-bottom: 1px solid var(--cr-line);
        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;
    }

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

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

    /* 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-blue-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: 18px;
    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(10, 24, 48, 0.42);
        backdrop-filter: blur(3px);
    }

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

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

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

.dialogo-destaque {
    font-family: var(--cr-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cr-text-2);
}

    .dialogo-destaque .mono {
        margin-left: .35rem;
        color: var(--cr-strong);
        font-size: 1.7rem;
        font-weight: 700;
    }

/* 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-family: var(--cr-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    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;
}