/* Portal do Cliente -- folha propria, enxuta.
   O portal e' lido muito no celular (o cliente abre o link que recebeu), entao o
   alvo aqui e' legibilidade em tela pequena, nao densidade de ERP. */

:root {
    --pc-tinta:        #16202e;
    --pc-tinta-suave:  #5b6879;
    --pc-linha:        #e4e8ee;
    --pc-fundo:        #f4f6f9;
    --pc-superficie:   #ffffff;
    --pc-marca:        #1e293b;
    --pc-acento:       #2563eb;
    --pc-sombra:       0 1px 2px rgba(22,32,46,.04), 0 6px 18px rgba(22,32,46,.06);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    color: var(--pc-tinta);
    background: var(--pc-fundo);
}

/* ---------- superficies ---------- */
.card {
    border-color: var(--pc-linha);
    border-radius: 10px;
    box-shadow: var(--pc-sombra);
}

.card-header {
    background: transparent;
    border-bottom-color: var(--pc-linha);
    padding-top: .8rem;
    padding-bottom: .8rem;
}

/* ---------- abas do topo ----------
   Sublinhado em vez de "aba de pasta": o portal tem 5 destinos e a barra fica logo
   abaixo do cabecalho escuro -- a borda de pasta brigava com ele. */
.nav-tabs {
    gap: .25rem;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--pc-tinta-suave);
    padding: .7rem .9rem;
    border-radius: 0;
    white-space: nowrap;
}

.nav-tabs .nav-link:hover {
    color: var(--pc-tinta);
    border-bottom-color: var(--pc-linha);
}

.nav-tabs .nav-link.active {
    color: var(--pc-acento);
    background: transparent;
    border-bottom-color: var(--pc-acento);
}

/* A barra de abas rola no celular em vez de quebrar em duas linhas. */
@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
}

/* ---------- tabelas ---------- */
.table > :not(caption) > * > * {
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.table thead th {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pc-tinta-suave);
    font-weight: 600;
    border-bottom-color: var(--pc-linha);
}

/* Numero alinhado por coluna: sem isto, 9,00 e 10,00 nao batem na vertical e a
   coluna de valor fica dificil de conferir de bater o olho. */
.table td.text-end, .table th.text-end {
    font-variant-numeric: tabular-nums;
}

.progress {
    background-color: var(--pc-linha);
    border-radius: 999px;
}

.progress-bar { border-radius: 999px; }

/* ---------- modal proprio ----------
   O portal nao carrega o JS do Bootstrap, entao o modal e' desenhado aqui: o do
   Bootstrap depende do bundle e ficaria invisivel. */
.pc-modal-fundo {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1060;
}

.pc-modal {
    background: var(--pc-superficie);
    border-radius: 12px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}

.pc-modal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--pc-linha);
}

.pc-modal-corpo {
    padding: 1.15rem;
    overflow-y: auto;
}

.pc-modal-rodape {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .9rem 1.15rem;
    border-top: 1px solid var(--pc-linha);
}

/* Em tela pequena o modal encosta no rodape e vira folha, que e' o gesto que o
   celular espera. */
@media (max-width: 575.98px) {
    .pc-modal-fundo { align-items: flex-end; padding: 0; }
    .pc-modal { max-width: none; border-radius: 14px 14px 0 0; max-height: 92vh; }
}

/* ---------- quadro de assinatura ----------
   Altura fixa e o canvas ocupando tudo: o JS le clientWidth/clientHeight para montar o
   bitmap no tamanho real de pixel do aparelho, entao o elemento precisa ter tamanho
   ANTES de o script rodar -- canvas sem altura de CSS mede zero e a assinatura sai vazia.

   touch-action: none e obrigatorio: sem ele, arrastar o dedo rola a pagina em vez de
   desenhar, e no celular nao ha como assinar. */
.pc-assinatura-quadro {
    border: 1px dashed var(--pc-linha);
    border-radius: 8px;
    background: #fff;
    height: 180px;
    overflow: hidden;
}

.pc-assinatura-quadro canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

.pc-assinatura-img {
    max-height: 90px;
    display: block;
    margin-bottom: .5rem;
}

/* ---------- tabela de tarefas no celular ----------
   A coluna "Projeto" e' a primeira a sobrar quando falta largura: some abaixo de
   576px, ja que o nome da tarefa costuma bastar. */
@media (max-width: 575.98px) {
    .tabela-tarefas thead th:nth-child(2),
    .tabela-tarefas tbody td:nth-child(2) {
        display: none;
    }

    .table td, .table th {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}