/* =============================================================================================
   Pedidos e justificações (VB6 Pedidos.frm, redone on 2026-10-23 after the ChronosMobile approver pages), the report
   (List_Pedidos.frm, Logins frame) and the tables (rec_tabs.frm). The validation screen keeps the Empregados frame
   (list | card with a fixed footer) and draws the request as the app's card: what is asked, notes, documents, steps.
   ============================================================================================= */

/* The count of requests waiting, inside its segment. */
.pd-conta {
    margin-left: .3rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--cr-blue-100);
    color: var(--cr-blue-600);
    font-size: .76rem;
    font-weight: 700;
}

/* ---- The list: two lines per request (who · state, then what and its number) ---- */
.pd-itens {
    display: flex;
    flex-direction: column;
}

.pd-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .1rem .5rem;
    padding: .45rem .55rem;
    border-bottom: 1px solid var(--cr-line);
    color: inherit;
    text-decoration: none;
    font-size: .84rem;
}

    .pd-item:hover {
        background: var(--cr-surface-2);
    }

    .pd-item.ativa {
        background: var(--cr-blue-100);
        box-shadow: inset 3px 0 0 var(--cr-blue-600);
    }

    .pd-item.anulado .pd-item-nome {
        text-decoration: line-through;
        color: var(--cr-text-2);
    }

.pd-item-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.pd-item-resumo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cr-text-2);
}

.pd-item-extra {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    color: var(--cr-text-3);
    font-size: .78rem;
}

/* ---- The card ---- */
.pd-topo {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--cr-line);
}

    .pd-topo > .espaco {
        flex: 1 1 auto;
    }

.pd-nome {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cr-strong);
}

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

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

.pd-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    align-content: start;
    gap: .8rem 1.4rem;
    padding: .8rem 0;
    font-size: .86rem;
}

.pd-seccao {
    min-width: 0;
}

.pd-seccao-titulo {
    margin: 0 0 .35rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--cr-strong);
}

.pd-linhas {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .pd-linhas li {
        padding: .2rem 0;
        border-bottom: 1px dashed var(--cr-line);
    }

.pd-meio {
    margin-left: .4rem;
    padding: 0 .35rem;
    border: 1px solid var(--cr-line-strong);
    border-radius: 4px;
    font-size: .76rem;
}

.pd-codigo {
    margin: 0 .3rem;
    font-weight: 600;
}

.pd-motivo,
.pd-nota {
    margin: .35rem 0 0;
    color: var(--cr-text-2);
    white-space: pre-wrap;
}

.pd-anexos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.pd-anexo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid var(--cr-line-strong);
    border-radius: var(--cr-radius-sm);
    color: var(--cr-blue-600);
    text-decoration: none;
}

    .pd-anexo:hover {
        background: var(--cr-blue-100);
    }

.pd-tamanho {
    color: var(--cr-text-3);
    font-size: .76rem;
}

/* ---- The approval steps: a dot per step, the person, the state, the reason and the comment ---- */
.pd-passo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .1rem .5rem;
    padding: .3rem 0;
    border-bottom: 1px dashed var(--cr-line);
}

.pd-ponto {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--cr-line-strong);
}

    .pd-ponto.aceite { background: #2e9b4c; }
    .pd-ponto.recusado { background: #c62828; }

.pd-passo-estado { font-weight: 600; }
    .pd-passo-estado.aceite { color: #2e7d32; }
    .pd-passo-estado.recusado { color: #c62828; }
    .pd-passo-estado.pendente { color: var(--cr-text-2); }

.pd-passo-motivo,
.pd-passo-comentario {
    grid-column: 2 / -1;
    color: var(--cr-text-2);
}

.pd-historico {
    margin: .4rem 0 0;
    font: inherit;
    font-size: .8rem;
    color: var(--cr-text-2);
    white-space: pre-wrap;
}

/* ---- The decision's windows: the reasons one under the other, own words only when "Outro / Outra razão" is chosen ---- */
.pd-razoes {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: min(26rem, 80vw);
}

    .pd-razoes textarea {
        display: none;
    }

    .pd-razoes:has(input[value=outra]:checked) textarea {
        display: block;
    }

/* ---- Tabelas: the four grids side by side, as the VB6 window. The card keeps its foot (Guardar) in sight and the grids
   scroll inside it (bug of 2026-10-23: the rows ran under the foot and the page scrolled); the reasons' table, with its
   "Integra Chronos" column, gets the widest share. ---- */
.pedidos .jus-ficha:has(> .jus-form > .ped-tabelas) > .jus-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ped-tabelas {
    display: grid;
    grid-template-columns: minmax(19rem, 1.35fr) repeat(3, minmax(14rem, 1fr));
    gap: .6rem;
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

    .ped-tabelas .emp-bloco {
        min-width: 0;
    }

.ped-tabela {
    width: 100%;
}

    .ped-tabela th {
        font-size: .8rem;
        color: var(--cr-text-2);
        font-weight: 600;
    }

    .ped-tabela td {
        padding: 1px 2px 1px 0;
    }

        .ped-tabela td:first-child {
            width: 6.5rem;
        }

        /* Integra Chronos: just Sim / Não. */
        .ped-tabela td:nth-child(3) {
            width: 5.5rem;
        }

/* ---- Relatório ---- */
.ped-rel-filtros {
    flex-wrap: wrap;
}

.ped-rel-filtros {
    gap: .5rem .9rem;
}

.ped-rel-campo {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    font-size: .84rem;
}

    .ped-rel-campo input {
        width: 5rem;
    }

.ped-rel-grupo td {
    font-weight: 700;
    color: var(--cr-blue-600);
    background: var(--cr-blue-100);
}

.ped-rel-tabela tr.riscado td {
    text-decoration: line-through;
    color: var(--cr-text-2);
}

@media (max-width: 1100px) {
    .ped-tabelas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media print {
    .ped-rel-filtros {
        display: none;
    }
}

.ped-corpo .distintivo {
    font-size: .95rem;
}

/* ---- Rascunhos de mail / SMS: the typeface of each text, in one line over it ---- */
.rascunho-letra {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .3rem;
}

    .rascunho-letra .form-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .rascunho-letra .emp-opcao {
        white-space: nowrap;
    }

.rascunho-tamanho {
    flex: 0 0 4.2rem;
}

.rascunho-cor {
    flex: 0 0 2.2rem;
    width: 2.2rem;
    height: 1.8rem;
    padding: 0;
    border: 1px solid var(--cr-line-strong);
    border-radius: var(--cr-radius-sm);
    background: none;
}

/* The search box keeps its height whatever the length of the list (a long list squeezed it). */
.pd-lista > input[type=search] {
    flex: none;
}

/* The employee's photo before the name: the card's frame (.emp-foto), smaller. */
.pd-foto {
    flex: none;
    width: 3.2rem;
    border-radius: 6px;
    font-size: .95rem;
}

.pd-lista .emp-lista-total {
    display: flex;
    align-items: baseline;
}

.pd-arquivar-todos {
    margin-left: auto;
}