/* assets/css/tf_hora.css - a conferência embaixo do campo de hora (ThinkFlow).
   Par de assets/js/tf_hora.js. Ver o cabeçalho de lá para o porquê do componente.

   Tudo sai das variáveis do Bootstrap 5.3 (--bs-*), então o bloco acompanha o tema
   claro e o escuro sem regra duplicada: esta folha é carregada tanto pelo módulo
   desktop quanto pelas páginas autônomas do celular, que têm temas independentes.

   Regra de desenho: o texto por extenso é a parte que IMPORTA. Ele vem primeiro,
   em corpo maior que o rótulo do campo, porque é ele que a pessoa lê para descobrir
   que digitou sete da manhã quando queria sete da noite. */

.tfh-eco {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* min-width:0 para o bloco poder encolher dentro de uma col-6 do grid sem
       empurrar a coluna vizinha */
    min-width: 0;
}

.tfh-eco[hidden] { display: none !important; }

/* ── O texto por extenso ────────────────────────────────────────────────── */

.tfh-extenso {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--bs-emphasis-color, #212529);
    word-break: break-word;
}

.tfh-extenso:empty { display: none; }

.tfh-extenso.tfh-erro {
    color: var(--bs-danger-text-emphasis, #b02a37);
    font-weight: 500;
}

/* ── As duas leituras possíveis ─────────────────────────────────────────────
   Substituem o AM/PM do seletor nativo. Ficam lado a lado, ocupando a largura
   toda: no celular são dois alvos de toque grandes, e é neles que a correção
   acontece com um toque só.

   LADO A LADO SÓ QUANDO OS DOIS NOMES CABEM. O bloco nasce embaixo de um campo
   de hora, e esse campo mora numa coluna estreita nas duas telas: `col-md-3` no
   modal do desktop (quatro horários lado a lado dentro de um modal-lg, ~168px
   cada) e `col-6` no celular. Nessa largura "da madrugada" não cabe na metade,
   e sem quebra de linha o texto vazava para fora do botão - onde a pilha branca
   do botão ativo, desenhada depois, pintava por cima da última letra: a pessoa
   lia "da madrugad". Com `flex-wrap` os dois passam a empilhar quando não cabem.

   Quem decide é `min-width: max-content` no botão, não um palpite de largura em
   px: é a largura real daquele texto, naquela fonte e naquele corpo. Palpite em
   px erraria em toda tela com fonte diferente - e errar aqui é justamente voltar
   a cortar a palavra que existe para tirar a dúvida do AM/PM. */

.tfh-escolhas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    background: var(--bs-tertiary-bg, rgba(120, 120, 128, .12));
    border-radius: 10px;
}

.tfh-escolhas:empty { display: none; }

.tfh-escolha {
    /* base 0 + grow 1 = metades iguais enquanto cada nome couber na metade (o
       nome mais longo puxa um pouco mais e o outro fica com o resto); min-width
       segura o encolhimento no ponto em que o nome ainda está inteiro e força a
       quebra de linha em vez do corte. overflow-wrap é o piso, para a coluna
       mais estreita que uma palavra: quebra feio, mas nunca vaza. */
    flex: 1 1 0;
    min-width: max-content;
    max-width: 100%;
    overflow-wrap: anywhere;
    border: 0;
    background: transparent;
    border-radius: 8px;
    /* 38px de altura mínima: alvo de toque confortável sem esticar o formulário */
    min-height: 38px;
    padding: 6px 8px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

.tfh-escolha:hover { color: var(--bs-emphasis-color, #212529); }

.tfh-escolha.ativa {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-primary, #0d6efd);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.tfh-escolha:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}

/* ── Aviso que não bloqueia ─────────────────────────────────────────────────
   Para o caso "trabalhei das 22h às 3h", que é estranho mas verdadeiro: o texto
   chama atenção e segue o caminho, nunca impede o envio. */

.tfh-aviso {
    font-size: .78rem;
    line-height: 1.3;
    color: var(--bs-warning-text-emphasis, #997404);
    background: var(--bs-warning-bg-subtle, #fff3cd);
    border: 1px solid var(--bs-warning-border-subtle, #ffe69c);
    border-radius: 8px;
    padding: 5px 8px;
}

.tfh-aviso[hidden] { display: none !important; }

/* ── O campo em si ──────────────────────────────────────────────────────────
   Ele deixou de ser type=time e virou texto: sem a marcação de inválido, uma
   hora impossível ficaria com a mesma cara de uma hora boa. */

input.tfh-invalido {
    border-color: var(--bs-danger, #dc3545) !important;
}

input.tfh-invalido:focus {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .2) !important;
}

/* Números de largura fixa: HH:MM não "dança" enquanto a pessoa digita. */
input[data-tfh="1"] {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* ── Celular ────────────────────────────────────────────────────────────────
   Nas páginas autônomas do funcionário a tela é pequena e o uso é em pé, muitas
   vezes na rua: o extenso cresce e os botões viram alvo de dedo, não de mouse. */

@media (max-width: 575.98px) {
    .tfh-extenso { font-size: 1rem; }
    .tfh-escolha { min-height: 44px; font-size: .86rem; }
}