/* =====================================================================
   estilo.css — Folha de Ponto

   Mobile-first. As cores e formas reproduzem a aplicação Budibase
   anterior, para os utilizadores não sentirem mudança: fundo cinzento
   claro, botões "pill" laranja, botão Voltar em contorno vermelho.
   ===================================================================== */

:root {
    --laranja:        #E08E1F;
    --laranja-escuro: #c47a15;
    --vermelho:       #d32535;
    --azul:           #1a6fd4;
    --fundo:          #f5f5f5;
    --branco:         #ffffff;
    --cinza-claro:    #e9e9e9;
    --cinza-borda:    #d5d5d5;
    --texto:          #1f1f1f;
    --texto-suave:    #6b6b6b;
    --raio:           8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

.cabecalho {
    text-align: center;
    padding: 12px;
    font-size: 15px;
    color: var(--texto);
}

.conteudo {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

.titulo-ecra {
    text-align: center;
    font-size: 24px;
    margin: 8px 0 20px;
}

/* --- Botões ---------------------------------------------------------
   Altura mínima de 44px: alvo de toque confortável em telemóvel. */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 26px;
    border: 2px solid transparent;
    border-radius: 999px;          /* forma "pill", como no original */
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

.botao--principal {
    background: var(--laranja);
    color: var(--branco);
    text-transform: uppercase;
}
.botao--principal:active { background: var(--laranja-escuro); }

.botao--voltar {
    background: var(--branco);
    color: var(--vermelho);
    border-color: var(--vermelho);
}

.botao--secundario {
    background: var(--branco);
    color: var(--texto);
    border-color: var(--cinza-borda);
    text-transform: none;
}

.botao--perigo {
    background: var(--branco);
    color: var(--vermelho);
    border-color: var(--vermelho);
    text-transform: none;
}

.botao--pequeno {
    min-height: 38px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
}

/* --- Login ---------------------------------------------------------- */

.login { text-align: center; padding-top: 24px; }
.login__titulo { font-size: 30px; font-weight: 400; margin-bottom: 28px; }
.login__etiqueta { display: block; color: #4a7a4a; font-size: 14px; margin-bottom: 8px; }

.login__campo {
    width: 200px;
    padding: 10px 12px;
    font-size: 20px;
    text-align: center;
    letter-spacing: 6px;
    border: 1px solid var(--cinza-borda);
    border-radius: 4px;
    background: var(--branco);
}

.login__botao { margin-top: 20px; min-width: 130px; text-transform: none; }

/* --- Menu ----------------------------------------------------------- */

.faixa-boasvindas {
    background: var(--azul);
    color: var(--branco);
    font-weight: 700;
    padding: 12px 16px;
    border-radius: var(--raio);
    margin-bottom: 24px;
}
.faixa-boasvindas__icone { margin-right: 8px; }

.menu { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.menu__item { width: 100%; max-width: 280px; }
.menu__rodape { text-align: center; margin-top: 32px; }

.ligacao-discreta { color: var(--texto-suave); font-size: 14px; }

/* --- Formulários ---------------------------------------------------- */

.forma__acoes {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.campo { margin-bottom: 14px; }
.campo--duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.campo__etiqueta {
    display: block;
    font-size: 14px;
    color: var(--texto-suave);
    margin-bottom: 4px;
}

.campo__entrada {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    font-size: 16px;               /* 16px evita o zoom automático no iOS */
    border: 1px solid var(--cinza-borda);
    border-radius: 4px;
    background: var(--branco);
    color: var(--texto);
}

.campo__entrada--bloqueada { background: var(--cinza-claro); color: var(--texto-suave); }

/* Opções de número de horas: botões de rádio grandes, para uso com o dedo. */
.campo--horas { border: none; margin: 0 0 14px; padding: 0; }

.opcoes-horas { display: flex; flex-wrap: wrap; gap: 8px; }

.opcao-hora {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 56px;
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    background: var(--branco);
    cursor: pointer;
}
.opcao-hora:has(input:checked) {
    border-color: var(--laranja);
    background: #fdf1e0;
    font-weight: 700;
}

.separador { border-top: 1px solid var(--cinza-borda); margin: 20px 0 12px; }
.nota-facultativa { text-align: center; color: var(--laranja); font-size: 14px; margin: 0 0 12px; }

/* --- Avisos --------------------------------------------------------- */

.aviso { padding: 12px 16px; border-radius: var(--raio); margin-bottom: 16px; font-size: 15px; }
.aviso--sucesso { background: #e4f4e4; color: #245c24; border: 1px solid #b8dfb8; }
.aviso--erro    { background: #fbe6e8; color: #8c1622; border: 1px solid #f0bcc1; }

/* --- Filtros e listagens -------------------------------------------- */

.filtros {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    padding: 14px;
    margin-bottom: 18px;
}
.filtros__acoes { display: flex; gap: 10px; flex-wrap: wrap; }

.contagem { color: var(--texto-suave); font-size: 14px; margin: 0 0 12px; }

.cartoes { display: grid; grid-template-columns: 1fr; gap: 14px; }

.cartao {
    display: flex;
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    overflow: hidden;
}

.cartao__marca {
    flex: 0 0 84px;
    background: #1e2a3a;
    color: var(--branco);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.cartao__tipo-etiqueta { font-size: 11px; text-align: center; line-height: 1.2; }

.cartao__corpo { flex: 1; padding: 12px 14px; }
.cartao__nome { margin: 0 0 2px; font-size: 17px; }
.cartao__data { margin: 0; color: var(--texto-suave); font-size: 13px; }
.cartao__detalhe { margin: 6px 0 2px; font-size: 15px; }
.cartao__autor { margin: 0; color: var(--texto-suave); font-size: 13px; }
.cartao__acoes { display: flex; gap: 10px; margin-top: 10px; }

.em-linha { display: inline; }

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
}
.paginacao__estado { font-size: 14px; color: var(--texto-suave); }

.vazio { color: var(--texto-suave); text-align: center; padding: 20px 0; }

/* --- Tabelas -------------------------------------------------------- */

.tabela-envolvente { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--branco);
    font-size: 14px;
}
.tabela th, .tabela td { border: 1px solid var(--cinza-borda); padding: 8px 10px; text-align: left; }
.tabela th { background: #fafafa; font-weight: 700; }
.tabela--compacta { font-size: 13px; }
.tabela .numero { text-align: right; }

.linha--bloqueada { background: #fbe6e8; }

.expansivel {
    background: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    padding: 12px 14px;
    margin-top: 16px;
}
.expansivel summary { cursor: pointer; font-weight: 700; }

.forma-email { margin-top: 24px; }
.forma-email__linha { display: flex; gap: 10px; align-items: center; }

/* --- Impressão de ecrã ---------------------------------------------- */

@media print {
    .cabecalho, .forma__acoes, .filtros, .forma-email { display: none; }
    body { background: var(--branco); }
    .expansivel { border: none; }
}

/* --- Ecrãs largos --------------------------------------------------- */

@media (min-width: 600px) {
    .filtros { grid-template-columns: repeat(3, 1fr); align-items: end; }
    .filtros__acoes { grid-column: 1 / -1; }
    .cartoes { grid-template-columns: 1fr 1fr; }
}