/* styles.css - ePontos */

:root {
    --color-primary: #2c5282;
    --color-primary-hover: #2a4365;
    --color-bg: #f7fafc;
    --color-card: #ffffff;
    --color-border: #e2e8f0;
    --color-text: #1a202c;
    --color-muted: #4a5568; /* era #718096 — reprovava contraste WCAG AA */
    --space: 1rem;
    --radius: 0.375rem;
    --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    margin: 0;
    line-height: 1.55;
    font-size: 18px;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

main { padding: var(--space); max-width: 64rem; margin: 0 auto; }

.topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1.25rem;
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow);
}
.topbar a, .topbar .btn-link { color: white; }
.topbar nav { display: flex; gap: 1rem; align-items: center; }
.topbar .brand { font-weight: 700; font-size: 1.1rem; }
.topbar nav a:hover { text-decoration: underline; }
.topbar form.inline { display: inline; margin: 0; }
.btn-link { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; }
.btn-link:hover { text-decoration: underline; }

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
    box-shadow: var(--shadow);
}
.card h1, .card h2 { margin-top: 0; }
.meta { color: var(--color-muted); font-size: 0.95rem; }

.hero { text-align: center; padding: 3rem 1rem; }
.hero h1 { font-size: 2.25rem; margin: 0 0 .5rem; }
.lead { font-size: 1.15rem; color: var(--color-muted); }
.cta { margin: 2rem 0; }
.aviso {
    background: #fff5b1;
    border: 1px solid #f6d36b;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    color: #744210;
    max-width: 36rem;
    margin: 1rem auto;
}

.form { display: flex; flex-direction: column; gap: .75rem; max-width: 28rem; margin: 0 auto; width: 100%; }
.form label { font-weight: 600; font-size: 1.05rem; }
.form input[type="text"], .form input[type="password"], .form input[type="number"] {
    padding: .85rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1.05rem;
    min-height: 48px;
}
.form-inline { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; margin: 1rem 0; }
.form-inline label { display: block; font-size: .85rem; color: var(--color-muted); }
.form-inline input[type="number"] { width: 6rem; padding: .45rem; border: 1px solid var(--color-border); border-radius: var(--radius); }

.btn {
    display: inline-block;
    padding: .8rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: white;
    color: var(--color-text);
    font: inherit;
    font-size: 1.05rem;
    cursor: pointer;
    text-decoration: none;
    min-height: 48px;
}
.btn:hover { background: #edf2f7; text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-grande {
    width: 100%;
    min-height: 88px;
    padding: 1.25rem 1.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.auth { max-width: 28rem; margin: 3rem auto; }

.bater-ponto {
    margin: 1.5rem 0;
    padding: 1.5rem 1.25rem 1.75rem;
    background: #ebf8ff;
    border-radius: var(--radius);
    text-align: center;
}
.bater-ponto h2 { margin-top: 0; font-size: 1.5rem; }
.bater-ponto .proximo {
    font-size: 1.15rem;
    margin: .5rem 0 1.25rem;
}
.bater-ponto .hint {
    font-size: 1rem;
    margin-top: 1rem;
    padding: .65rem .85rem;
    border-radius: var(--radius);
    background: rgba(255,255,255,.6);
}
.bater-ponto .hint.ok {
    background: #c6f6d5;
    color: #22543d;
    font-weight: 600;
}
.bater-ponto .hint.erro {
    background: #fed7d7;
    color: #742a2a;
    font-weight: 600;
}

.tabela { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.tabela th, .tabela td { padding: .55rem .75rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.tabela th { background: #edf2f7; font-weight: 600; }
.tabela tr:hover { background: #f7fafc; }

.messages { margin: 1rem 0; }
.msg { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: .5rem; font-weight: 500; }
.msg-success { background: #c6f6d5; color: #22543d; }
.msg-error   { background: #fed7d7; color: #742a2a; }
.msg-warning { background: #fef0c2; color: #744210; }
.msg-info    { background: #bee3f8; color: #2a4365; }

.erro { color: #742a2a; font-size: .85rem; }
.hint { color: var(--color-muted); font-size: .9rem; }

footer { margin-top: 3rem; padding: 1.5rem; text-align: center; color: var(--color-muted); border-top: 1px solid var(--color-border); }

/* ===== Painel de gestão (/gestao/) ===== */
.subnav {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}
.subnav a {
    display: inline-block;
    padding: .75rem 1.25rem;
    min-height: 48px;
    background: var(--color-card);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 1.05rem;
}
.subnav a:hover { background: #ebf4ff; text-decoration: none; }

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}
.func-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card);
    color: var(--color-text);
    min-height: 96px;
}
.func-card:hover { border-color: var(--color-primary); text-decoration: none; }
.func-nome { font-size: 1.15rem; }
.func-status { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.func-ultima { color: #4a5568; font-size: .95rem; }
.func-card .dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.status-ok .dot { background: #2f855a; }
.status-ok .func-status { color: #22543d; }
.status-fora .dot { background: #4a5568; }
.status-fora .func-status { color: #4a5568; }
.status-vazio .dot { background: #c53030; }
.status-vazio .func-status { color: #742a2a; }

.form-gestao { max-width: 32rem; margin: 1rem 0; }
.form-field { display: flex; flex-direction: column; gap: .3rem; }
.form-field .hint { color: #4a5568; }
.form-gestao select,
.form-gestao input[type="text"],
.form-gestao input[type="number"] {
    padding: .7rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1.05rem;
    background: white;
}
.form-field input[type="checkbox"] { width: 24px; height: 24px; }
.tabela .acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.gestao-topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.seletor-empresa select { padding: .6rem; font-size: 1.05rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: white; }
.empresa-atual { font-weight: 600; }

/* ===== Modo quiosque (/kiosk/) — tudo GIGANTE, público 50+ ===== */
body.kiosk { font-size: 20px; background: var(--color-bg); }
.kiosk-tela { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem; }
.kiosk-central { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.kiosk-titulo { font-size: 2rem; text-align: center; margin: .5rem 0 1rem; }
.kiosk-subtitulo { font-size: 1.4rem; text-align: center; }
.kiosk-aviso { font-size: 1.3rem; text-align: center; }
.kiosk-autorizar { max-width: 30rem; margin: 3rem auto; }

.kiosk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.kiosk-func {
    display: flex; flex-direction: column; gap: .5rem;
    min-height: 110px; padding: 1.25rem;
    background: white; border: 2px solid var(--color-primary);
    border-radius: var(--radius); color: var(--color-text);
}
.kiosk-func:hover { background: #ebf4ff; text-decoration: none; }
.kiosk-func-nome { font-size: 1.9rem; font-weight: 700; }
.kiosk-func-status { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 600; color: #4a5568; }
.kiosk-func .dot { width: 20px; height: 20px; border-radius: 50%; background: #4a5568; }
.kiosk-func-ok .dot { background: #2f855a; }
.kiosk-func-ok .kiosk-func-status { color: #22543d; }

.kiosk-voltar { align-self: flex-start; min-height: 48px; font-size: 1.15rem; }
.kiosk-pin-form { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.kiosk-pin-form input[type="password"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.kiosk-bolotas { display: flex; gap: 1.25rem; }
.kiosk-bolotas span {
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid var(--color-primary); background: white;
}
.kiosk-bolotas span.cheia { background: var(--color-primary); }

.kiosk-teclado {
    display: grid; grid-template-columns: repeat(3, 96px); gap: 12px;
}
.kiosk-teclado button {
    width: 96px; height: 96px;
    font-size: 2.5rem; font-weight: 700;
    background: white; border: 2px solid var(--color-primary);
    border-radius: var(--radius); color: var(--color-text); cursor: pointer;
}
.kiosk-teclado button:hover { background: #ebf4ff; }
.kiosk-teclado .kiosk-apagar { font-size: 1.3rem; }

.kiosk-confirmar {
    width: 100%; max-width: 320px; min-height: 72px;
    font-size: 1.75rem; font-weight: 700;
    background: #2f855a; color: white; border-color: #2f855a;
}
.kiosk-confirmar:hover { background: #22543d; border-color: #22543d; }
.kiosk-confirmar:disabled { opacity: .5; }
.kiosk-erro { font-size: 1.35rem; }
.kiosk-bloqueio { text-align: center; padding: 3rem 1rem; border-radius: var(--radius); }
.kiosk-erro-fundo { background: #fed7d7; color: #742a2a; }

.kiosk-ok {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .75rem;
    background: #c6f6d5; color: #22543d; text-align: center; padding: 1rem;
}
.kiosk-ok-aviso { background: #fef0c2; color: #744210; }
.kiosk-ok-icone { font-size: 7rem; line-height: 1; }
.kiosk-ok-tipo { font-size: 2.25rem; font-weight: 600; margin: 0; }
.kiosk-ok-hora { font-size: 7.5rem; font-weight: 800; margin: 0; line-height: 1; }
.kiosk-ok-nome { font-size: 2.5rem; font-weight: 700; margin: 0; }
.kiosk-ok-rodape { font-size: 1.35rem; margin-top: 1rem; }

.kiosk-rodape { margin-top: 3rem; }
.kiosk-rodape summary { font-size: 1rem; color: #4a5568; cursor: pointer; min-height: 48px; display: flex; align-items: center; }
.kiosk-rodape .form { margin-top: 1rem; max-width: 22rem; }
.kiosk-select { padding: .8rem; font-size: 1.15rem; border: 1px solid var(--color-border); border-radius: var(--radius); }

/* ===== Avisos do espelho / impressão ===== */
.badge-aviso {
    display: inline-block;
    padding: .15rem .5rem;
    background: #fef0c2;
    color: #744210;
    border-radius: var(--radius);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
}
.linha-incompleta td { background: #fffbeb; }

@media print {
    .topbar, .subnav, .gestao-topo, .nao-imprimir, footer, .form-inline { display: none !important; }
    .card { border: 0; box-shadow: none; padding: 0; }
    body { background: white; font-size: 12pt; }
}

/* ===== Landing page ===== */
.landing-hero { padding: 3.5rem 1rem 2rem; }
.landing-hero h1 { font-size: 2.6rem; }
.landing-hero .lead { max-width: 38rem; margin: .75rem auto; }
.landing-hero .cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.landing-passos ol { font-size: 1.1rem; line-height: 1.9; padding-left: 1.4rem; }
.landing-precos { text-align: center; margin: 2rem 0; }
.landing-precos h2 { font-size: 1.8rem; }
.preco { text-align: center; }
.preco-valor { font-size: 2.2rem; font-weight: 800; margin: .25rem 0; color: var(--color-primary); }
.preco-valor span { font-size: 1rem; font-weight: 400; color: #4a5568; }
.preco-destaque { border: 2px solid var(--color-primary); }

/* Relógio do quiosque — segundos visíveis (exigência REP/Portaria 671) */
.kiosk-relogio {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    letter-spacing: .02em;
    margin-bottom: .5rem;
}