/* 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: #718096;
    --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); }