/* Camada visual corporativa: baseada no design system da empresa. */
:root {
    --bg: #eef1f4;
    --bg-accent: #eef1f4;
    --panel: #ffffff;
    --ink: #111a24;
    --muted: #5c6b7a;
    --brand: #023257;
    --brand-dark: #061a2b;
    --accent: #f5874f;
    --border: #e3e7ee;
    --error: #dc2626;
    --ok: #16a34a;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(6, 26, 43, 0.06);
}

body {
    background: var(--bg);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}
h1, h2, h3 { letter-spacing: -0.02em; }
.topbar {
    min-height: 68px;
    padding: 0.8rem max(4vw, 1.5rem);
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    backdrop-filter: none;
}
.brand { display: inline-flex; align-items: center; color: var(--brand-dark); text-decoration: none; }
.brand-logo { display: block; width: auto; height: 42px; }
.menu { gap: 0.25rem; }
.menu a { border-radius: 8px; color: var(--muted); font-size: 0.875rem; }
.menu a:hover { background: #eef1f4; color: var(--brand-dark); }
.layout { margin-top: 1.5rem; }
.hero, .panel, .auth-card, .kiosk-card { border-radius: var(--radius); box-shadow: var(--shadow); }
.hero { padding: 1.4rem 1.5rem; border-left: 4px solid var(--brand); }
.hero h1 { margin-bottom: 0.35rem; }
.stat-card { position: relative; min-height: 112px; padding: 1rem 1.15rem; overflow: hidden; background: var(--panel); }
.stat-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--brand); content: ""; }
.stat-card h2 { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.stat-card strong { color: var(--ink); }
.panel.inset { background: #fbfdff; border-color: #edf2f7; box-shadow: none; }
label { font-size: 0.82rem; }
input, select, textarea { border-radius: 8px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 135, 79, 0.2); }
.btn { min-height: 40px; border-color: #cbd5e1; border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 0.875rem; }
.btn:hover { border-color: #c7cdd4; background: #eef1f4; color: var(--brand-dark); }
.btn.primary { background: var(--brand); border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.flash { border-radius: 8px; }
.flash.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.flash.success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
th { font-size: 0.72rem; letter-spacing: 0.06em; }
.tag.ok { background: #f0fdf4; color: #166534; }
.tag.alert { background: #fef2f2; color: #991b1b; }
.bar-track { height: 8px; background: #e2e8f0; }
.bar-fill { background: var(--brand); }

/* Experiência touch-first do quiosque. */
.kiosk-screen { height: 100vh; overflow: hidden; }
.kiosk-screen .layout { width: min(1180px, calc(100% - 2rem)); padding: clamp(0.75rem, 1.5vw, 1.25rem) 0; }
.kiosk-shell { width: 100%; gap: 0.75rem; }
.kiosk-header { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.5rem); padding: 0.15rem 0.5rem; }
.kiosk-logo { display: block; flex: 0 0 auto; width: min(165px, 20vw); height: auto; margin: 0; }
.kiosk-heading { min-width: 0; }
.kiosk-header h1 { margin-bottom: 0.25rem; font-size: clamp(1.45rem, 2.6vw, 2.1rem); }
.kiosk-card { padding: 1rem clamp(1rem, 2vw, 1.5rem); }
.kiosk-progress { height: 8px; margin-bottom: 0.9rem; background: #e2e8f0; }
.kiosk-progress span { background: var(--brand); }
.kiosk-form h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.kiosk-form { gap: 1rem; }
.seller-grid { grid-template-columns: repeat(var(--seller-columns, 8), minmax(0, 1fr)); gap: 0.65rem; }
.seller-card { position: relative; padding: 0.6rem; border-radius: 10px; background: #fbfdff; }
.seller-card:hover { border-color: #c7cdd4; box-shadow: 0 4px 12px rgba(6, 26, 43, 0.08); }
.seller-card:has(input:checked) { border-color: var(--accent); background: #fff5f0; box-shadow: 0 0 0 3px rgba(245, 135, 79, 0.2); }
.seller-card input { position: absolute; top: 0.55rem; left: 0.55rem; accent-color: var(--accent); }
.seller-card img, .photo-placeholder { border-radius: 8px; background: #e2e8f0; }
.photo-placeholder[hidden] { display: none; }
.score-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.score-button { min-height: 102px; border-radius: 10px; background: #fbfdff; }
.score-button:hover, .score-button:focus-visible { border-color: var(--accent); background: #fff5f0; box-shadow: 0 0 0 3px rgba(245, 135, 79, 0.2); outline: none; }
.score-button strong { color: var(--brand-dark); }
.thanks-wrap h2 { color: var(--brand-dark); }

@media (max-width: 600px) {
    .kiosk-screen { height: auto; overflow: auto; }
    .kiosk-screen .layout { width: min(100% - 1rem, 1180px); padding-top: 1rem; }
    .kiosk-header { align-items: flex-start; gap: 0.75rem; }
    .kiosk-logo { width: min(120px, 34vw); }
    .kiosk-header h1 { font-size: 1.35rem; }
    .seller-grid { grid-template-columns: repeat(var(--seller-columns-mobile, 2), minmax(0, 1fr)); }
    .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .score-button:last-child { grid-column: 1 / -1; }
}

@media (min-width: 601px) and (max-width: 900px) {
    .seller-grid { grid-template-columns: repeat(var(--seller-columns-tablet, 4), minmax(0, 1fr)); }
}