:root {
    font-family: system-ui, sans-serif;
    color: #17345f;
    background: #f2f8fc;
    line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1180px; margin: auto; padding: 36px 24px 64px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
h1 { font-size: clamp(30px, 5vw, 46px); margin: 6px 0; }
h2 { margin-top: 0; }
h3, p { overflow-wrap: anywhere; }
a { color: #126b94; }
.selo { color: #177699; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
section { padding: 26px; margin-bottom: 24px; background: white; border: 1px solid #d4e6f2; border-radius: 22px; box-shadow: 0 8px 25px #193d6407; }
.colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
label { display: grid; gap: 7px; margin-bottom: 16px; font-weight: 600; }
input, select, button { font: inherit; min-width: 0; }
input, select { width: 100%; padding: 12px; border: 1px solid #acc9db; border-radius: 10px; color: #17345f; background: white; }
small { color: #51667b; font-weight: 400; }
button { border: 0; padding: 13px 20px; border-radius: 10px; color: white; background: #156e99; font-weight: 700; cursor: pointer; }
button:hover { filter: brightness(.94); }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid #e99a1f; outline-offset: 3px; }
.secundario { color: #17345f; background: #e7f1f7; }
.aviso { background: #e0f2fb; padding: 18px; border-radius: 14px; }
.erro { color: #8d1831; background: #ffe8ee; padding: 18px; border-radius: 14px; }
.eleicao { display: inline-block; text-decoration: none; overflow-wrap: anywhere; }
.eleicao:hover { text-decoration: underline; }
.tabelaEleicoes { border: 1px solid #d4e6f2; border-radius: 18px; background: white; }
.tabelaEleicoes table { margin: 0; }
.tabelaEleicoes th { padding: 18px 24px; background: #f2f7fc; color: #647e98; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.tabelaEleicoes td { padding: 22px 24px; vertical-align: middle; }
.tabelaEleicoes tbody tr:last-child td { border-bottom: 0; }
.tabelaEleicoes tbody tr:hover { background: #f8fbfe; }
.tabelaEleicoes .acoesEleicao { width: 1%; white-space: nowrap; text-align: right; }
.tabelaEleicoes form { margin: 0; }
.tabelaEleicoes .botaoExcluir { background: white; color: #a32b42; border: 1px solid #efc5cd; padding: 9px 14px; font-weight: 600; }
.botaoExcluir { background: #a32b42; color: white; }
.candidatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
article { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border: 1px solid #dce9f1; padding: 16px; border-radius: 14px; }
article > div { flex: 1; min-width: 140px; }
article h3, article p { margin: 4px 0; }
article img, #candidatoAtual img { width: 80px; height: 100px; object-fit: cover; border-radius: 7px; }
.urna { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 24px; padding: 24px; border-radius: 18px; background: #dedfdc; color: #17222c; }
.tela { padding: 24px; border: 3px solid #888f91; border-radius: 8px; background: #f6f8ef; min-height: 330px; }
#digitos { display: block; font: bold 36px monospace; letter-spacing: 5px; margin: 14px 0; }
#candidatoAtual img { float: right; margin: 0 0 12px 12px; }
.teclado { background: #292d32; padding: 18px; border-radius: 12px; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 280px; margin: 0 auto 18px; }
.numeros button { background: #14171b; border-bottom: 4px solid #090b0d; font-size: 24px; }
.numeros button:last-child { grid-column: 2; }
.acoes { display: flex; gap: 8px; }
.acoes button { flex: 1; font-size: 12px; padding: 16px 5px; border-radius: 5px; color: #151515; }
#branco { background: white; }
#corrige { background: #f6a052; }
#confirma { background: #5ac184; }
.fim { text-align: center; }
.fim h2 { font-size: 58px; margin: 0; }
.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: 12px 0 28px; text-align: left; }
caption { text-align: left; color: #51667b; margin-bottom: 8px; }
th, td { padding: 12px; border-bottom: 1px solid #dce9f1; }
th { background: #f0f7fc; }
[hidden] { display: none !important; }
.abrirCabine { display: inline-block; padding: 16px 24px; background: #156e99; color: white; border-radius: 12px; text-decoration: none; font-weight: 700; }
.compartilharLink { display: flex; flex-wrap: wrap; gap: 12px; }
.compartilharLink input { flex: 1 1 240px; }
.compartilharLink button { flex: 0 0 auto; }
#mensagemCopia { display: block; margin-top: 8px; }
.compartilharCodigo { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0 8px; }
.compartilharCodigo p { margin: 0; }
.botaoCopiar { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 12px; }
.botaoCopiar img { display: block; width: 24px; height: 24px; }
.avisoCopiado { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 6px 10px; border-radius: 6px; background: #17345f; color: white; font-size: 13px; white-space: nowrap; pointer-events: none; }
.avisoCopiado::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #17345f; }
#mensagemCopiaCodigo { display: block; margin-bottom: 16px; }
.cabine main { max-width: 1280px; }
.cabine header { margin-bottom: 12px; }
.cabine h1 { font-size: clamp(24px, 4vw, 36px); }
.cabine .tela { min-height: 380px; }
.cabine #candidatoAtual img { width: 120px; height: 150px; }
.cabine .numeros button { min-height: 62px; }
.cabine .acoes button { min-height: 66px; }
.cabine .fim { min-height: 420px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cabine .fim h2 { font-size: clamp(42px, 10vw, 100px); }
.confirmacaoUrna { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px; border: 1px solid #d4e6f2; border-radius: 24px; color: #17345f; background: white; box-shadow: 0 24px 80px #102c5540; }
.confirmacaoUrna::backdrop { background: #10243d80; backdrop-filter: blur(4px); }
.confirmacaoIcone { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 20px; border-radius: 18px; background: #e0f2fb; }
.confirmacaoIcone img { width: 32px; height: 32px; }
.confirmacaoUrna h2 { margin: 8px 0 12px; font-size: 26px; }
.confirmacaoUrna p { margin: 0; color: #51667b; }
.confirmacaoAcoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.confirmacaoAcoes button { flex: 1 1 auto; min-height: 48px; }
@media (max-width: 720px) {
    main { padding: 20px 12px; }
    header { align-items: flex-start; flex-direction: column; gap: 6px; }
    section { padding: 20px; }
    .colunas, .urna { grid-template-columns: 1fr; }
    .urna { padding: 12px; gap: 12px; }
    .tela { padding: 16px; min-height: 310px; }
    .acoes button { min-height: 48px; }
}