/* Sorteios ASMPF — folha de estilo base. */

:root {
    --azul: #103b66;
    --azul-claro: #1f5d99;
    --dourado: #c9a14a;
    --texto: #1c1c1c;
    --muted: #6b6b6b;
    --fundo: #f6f7f9;
    --card: #ffffff;
    --borda: #e3e6eb;
    --erro: #b1271a;
    --sucesso: #1f7a3a;
    --info: #1f5d99;
    --raio: 8px;
    --sombra: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
}

* { box-sizing: border-box; }

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

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

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: var(--azul);
    color: #fff;
    box-shadow: var(--sombra);
}

.topo-titulo {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .3px;
}
.topo-titulo:hover { text-decoration: none; opacity: .9; }

.topo-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topo-usuario {
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}

.topo-logout { margin: 0; }

.btn-link {
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
}
.btn-link:hover { background: rgba(255, 255, 255, .12); }

.conteudo {
    max-width: 980px;
    margin: 32px auto;
    padding: 0 24px;
}

.flashes {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flash {
    padding: 10px 14px;
    border-radius: var(--raio);
    border-left: 4px solid var(--muted);
    background: #fff;
    box-shadow: var(--sombra);
}
.flash-erro    { border-left-color: var(--erro);    color: var(--erro); }
.flash-sucesso { border-left-color: var(--sucesso); color: var(--sucesso); }
.flash-info    { border-left-color: var(--info);    color: var(--info); }
.flash-ganhador {
    border-left-color: var(--dourado);
    background: linear-gradient(135deg, #fff8e1, #fff);
    color: var(--azul);
    font-size: 22px;
    font-weight: 600;
    padding: 18px 22px;
    text-align: center;
    border-radius: var(--raio);
    box-shadow: 0 4px 12px rgba(201, 161, 74, .25);
    border: 1px solid rgba(201, 161, 74, .4);
    border-left-width: 6px;
    animation: ganhador-pulse 0.6s ease;
}
@keyframes ganhador-pulse {
    0%   { transform: scale(0.96); opacity: 0; }
    60%  { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1); }
}

.cartao {
    background: var(--card);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px;
}
.cartao-estreito { max-width: 380px; margin: 32px auto; }

.cartao h1 {
    margin: 0 0 20px;
    font-size: 22px;
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.campo > span {
    font-size: 13px;
    color: var(--muted);
}
.campo input {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
}
.campo input:focus {
    outline: none;
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 3px rgba(31, 93, 153, .15);
}

.btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: var(--raio);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}
.btn-primario {
    background: var(--azul);
    color: #fff;
}
.btn-primario:hover { background: var(--azul-claro); }

.cabecalho-pagina {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
}
.cabecalho-pagina h1 { margin: 0; font-size: 24px; }
.aviso-fase {
    color: var(--muted);
    font-size: 13px;
    font-style: italic;
}

.vazio {
    color: var(--muted);
    text-align: center;
    padding: 40px 0;
}

/* ── tabela ── */
.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
}
.tabela th, .tabela td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    font-size: 14px;
}
.tabela th {
    background: #f0f2f6;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
}
.tabela tr:last-child td { border-bottom: 0; }

/* ── badges ── */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.badge-ativo      { background: #d6f1de; color: var(--sucesso); }
.badge-encerrado  { background: #ececec; color: var(--muted); }
.badge-assoc      { background: #e3eefb; color: var(--azul-claro); }
.badge-nao-assoc  { background: #fff3e0; color: #b06a00; }

/* ── card variantes ── */
.cartao-medio { max-width: 640px; margin: 32px auto; }
.cartao h2 { margin: 0 0 12px; font-size: 18px; }
.subtitulo { color: var(--muted); margin: 0 0 16px; font-size: 14px; }
.descricao-sorteio {
    background: #fff;
    padding: 12px 16px;
    border-radius: var(--raio);
    border-left: 3px solid var(--azul-claro);
    margin: 0 0 24px;
    color: #333;
}

/* ── grade do detalhe ── */
.grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
@media (max-width: 720px) {
    .grade { grid-template-columns: 1fr; }
}

/* ── QR ── */
.qr-bloco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.qr-img {
    width: 240px;
    height: 240px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
}
.qr-url {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    word-break: break-all;
    text-align: center;
}
.qr-url code {
    background: #f0f2f6;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", monospace;
}

/* ── stats ── */
.stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stats li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--borda);
}
.stats li:last-child { border-bottom: 0; }
.stats-rotulo { color: var(--muted); font-size: 14px; }
.stats-valor  { font-weight: 600; }

/* ── botões adicionais ── */
.btn-secundario {
    background: #fff;
    color: var(--texto);
    border-color: var(--borda);
}
.btn-secundario:hover { background: #f0f2f6; }
.btn-perigo { background: var(--erro); color: #fff; }
.btn-perigo:hover { background: #8c1f15; }
.btn-grande { padding: 14px; font-size: 16px; }
.acoes { display: flex; gap: 12px; align-items: center; }
.inline { display: inline; margin: 0; }
.cabecalho-secao {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.btn-link-cinza {
    color: var(--muted);
    font-size: 13px;
}

/* ── radios ── */
fieldset.campo {
    border: 0;
    padding: 0;
    margin: 0;
}
fieldset.campo legend {
    font-size: 13px;
    color: var(--muted);
    padding: 0 0 4px;
}
.radios {
    display: flex;
    gap: 16px;
}
.radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.radio-item input[type=radio] {
    margin: 0;
}

/* ── confirmação ── */
.centro { text-align: center; }
.check-grande {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--sucesso);
    color: #fff;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.x-grande {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--erro);
    color: #fff;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-weight: 700;
}
.nome-confirmado {
    font-size: 22px;
    margin: 12px 0 4px;
    font-weight: 600;
}
.aguarde {
    margin-top: 24px;
    color: var(--muted);
    font-size: 14px;
}
.info-assoc {
    background: #e3eefb;
    color: var(--azul-claro);
    padding: 10px 14px;
    border-radius: var(--raio);
    margin: 16px 0 0;
    font-size: 14px;
}
.info-nao-assoc { background: #fff3e0; color: #b06a00; }

.erro-campo {
    color: var(--erro);
    font-size: 12px;
}

textarea {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
    resize: vertical;
}
textarea:focus, .campo input[type=file]:focus {
    outline: none;
    border-color: var(--azul-claro);
}
input[type=file] {
    font: inherit;
    padding: 8px;
    border: 1px dashed var(--borda);
    border-radius: var(--raio);
    background: #fafbfc;
}

.ajuda-campo {
    color: var(--muted);
    font-size: 12px;
}

.radios-empilhados {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── itens (fase 3) ── */
.lista-itens {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.item-bloco {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px;
    background: #fff;
    scroll-margin-top: 80px;
}
.item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.item-info { flex: 1; min-width: 240px; }
.item-info h3 {
    margin: 0 0 6px;
    font-size: 17px;
}
.item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.badge-progresso  { background: #e3eefb; color: var(--azul-claro); }
.badge-restricao  { background: #fff3e0; color: #b06a00; }
.item-desc {
    color: var(--muted);
    font-size: 14px;
    margin: 4px 0 0;
}
.item-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.item-completo {
    color: var(--sucesso);
    font-weight: 600;
    font-size: 14px;
}

.btn-link-perigo {
    background: none;
    border: 0;
    color: var(--erro);
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
    padding: 4px 6px;
}
.btn-link-perigo:hover { background: rgba(177, 39, 26, .08); border-radius: 4px; }

.ganhadores {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ganhador {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f8faff;
    border-radius: var(--raio);
    border-left: 3px solid var(--azul-claro);
    font-size: 14px;
}
.ganhador-anulado {
    background: #fafafa;
    border-left-color: var(--muted);
    opacity: .65;
    text-decoration: line-through;
}
.g-num {
    font-weight: 700;
    color: var(--azul);
    min-width: 32px;
}
.g-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.g-nome { font-weight: 600; }
.g-meta { color: var(--muted); font-size: 12px; }
.g-anulado {
    color: var(--erro);
    font-size: 12px;
    font-style: italic;
    text-decoration: none;
}
.g-anular { margin-left: auto; }

/* ───────────────────── TELÃO (tela pública do evento) ───────────────────── */
/* Paleta verde institucional ASMPF + dourado nos destaques. */

.telao-body {
    --tl-fundo:    #0d4f3c;
    --tl-fundo2:   #07321f;
    --tl-card:     rgba(20, 94, 72, 0.55);
    --tl-card-bd:  rgba(255, 255, 255, 0.10);
    --tl-destaque: #1a7c5a;
    --tl-ouro:     #d4b46a;
    --tl-ouro-claro: #f0c668;
    --tl-texto:    #ffffff;
    --tl-texto-2:  rgba(255, 255, 255, 0.72);
    --tl-texto-3:  rgba(255, 255, 255, 0.45);

    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(26, 124, 90, 0.55) 0%, transparent 60%),
        linear-gradient(180deg, var(--tl-fundo) 0%, var(--tl-fundo2) 100%);
    background-attachment: fixed;
    color: var(--tl-texto);
    padding: 56px 64px 40px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv02', 'cv11';
    -webkit-font-smoothing: antialiased;
}

/* ── cabeçalho ── */
.telao-cabecalho {
    max-width: 1600px;
    margin: 0 auto 56px;
    position: relative;
    text-align: center;
}
.telao-marca {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    text-align: left;
}
.telao-logo,
.telao-logo-img {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 50%;
}
.telao-logo {
    background: linear-gradient(135deg, var(--tl-destaque), var(--tl-fundo));
    border: 2px solid rgba(212, 180, 106, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--tl-ouro-claro);
    letter-spacing: 2px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.telao-logo-img {
    object-fit: contain;
    background: rgba(255, 255, 255, 0.06);
    padding: 8px;
}

.telao-titulos { line-height: 1.15; }
.telao-supratitulo {
    margin: 0 0 4px;
    font-size: clamp(11px, 0.95vw, 14px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--tl-ouro);
}
.telao-cabecalho h1 {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(40px, 5.2vw, 76px);
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.telao-subtitulo {
    margin: 8px 0 0;
    font-size: clamp(15px, 1.3vw, 20px);
    color: var(--tl-texto-2);
    font-weight: 400;
}
.telao-encerrado {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 18px;
    border-radius: 100px;
    font-size: 0.4em;
    vertical-align: middle;
    margin-left: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.telao-status {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 12px #4ade80;
    animation: telao-pulse 2s ease-in-out infinite;
}
.telao-status-erro { background: #f87171; box-shadow: 0 0 12px #f87171; }
@keyframes telao-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1);    }
}

/* ── grade de itens (sempre 2 por linha) ── */
.telao-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    max-width: 1600px;
    margin: 0 auto;
}

.telao-item {
    background: var(--tl-card);
    border: 1px solid var(--tl-card-bd);
    border-radius: 20px;
    padding: 32px 36px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    transition: border-color .4s, transform .4s, box-shadow .4s;
}

/* item recém-sorteado: glow dourado por alguns segundos */
.telao-item-recente {
    border-color: var(--tl-ouro-claro);
    box-shadow:
        0 0 0 2px var(--tl-ouro-claro),
        0 0 48px rgba(240, 198, 104, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.3);
    transform: scale(1.015);
    animation: telao-realce 6s ease-out forwards;
}
@keyframes telao-realce {
    0%   { box-shadow: 0 0 0 3px var(--tl-ouro-claro), 0 0 64px rgba(240, 198, 104, .8), 0 8px 32px rgba(0,0,0,.4); }
    100% { box-shadow: 0 0 0 1px rgba(240, 198, 104, .25), 0 0 24px rgba(240, 198, 104, .15), 0 8px 32px rgba(0,0,0,.18); }
}

.telao-item-concluido {
    border-color: rgba(212, 180, 106, 0.4);
    background: linear-gradient(135deg, rgba(212, 180, 106, 0.10), var(--tl-card));
}

/* ── título do item (com contador inline) ── */
.telao-item-nome {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.3px;
}
.telao-item-titulo-texto {
    font-size: clamp(28px, 2.6vw, 42px);
    flex: 1;
    min-width: 0;
}
.telao-item-contador {
    font-size: clamp(24px, 2.2vw, 36px);
    color: var(--tl-ouro-claro);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    opacity: 0.95;
}
.telao-item-contador-total {
    color: var(--tl-texto-3);
    font-size: 0.65em;
    margin-left: 1px;
    font-weight: 600;
}
.telao-item-concluido .telao-item-contador {
    color: var(--tl-ouro);
}

/* ── lista de ganhadores ── */
.telao-ganhadores {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.telao-ganhadores li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    border-left: 3px solid var(--tl-ouro);
    font-size: clamp(18px, 1.8vw, 26px);
}
.telao-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: var(--tl-ouro-claro);
    min-width: 48px;
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
    opacity: 0.85;
}
.telao-nome {
    font-weight: 600;
    flex: 1;
    letter-spacing: 0.2px;
}

.telao-novo {
    animation: telao-novo-ganhador 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes telao-novo-ganhador {
    0%   { transform: scale(0.85) translateY(-12px); opacity: 0; background: rgba(212, 180, 106, 0.45); }
    60%  { transform: scale(1.03) translateY(0);     opacity: 1; }
    100% { transform: scale(1);   background: rgba(255, 255, 255, 0.06); }
}

.telao-aguardando {
    color: var(--tl-texto-3);
    font-style: italic;
    margin: 0;
    font-size: 14px;
    text-transform: lowercase;
    letter-spacing: 1px;
}

.telao-vazio {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--tl-texto-2);
    font-size: clamp(20px, 2vw, 28px);
    padding: 120px 0;
    font-style: italic;
}

.telao-rodape {
    text-align: center;
    margin-top: 56px;
    color: var(--tl-texto-3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── responsividade ── */
@media (max-width: 720px) {
    .telao-body { padding: 32px 20px 24px; }
    .telao-marca { flex-direction: column; gap: 20px; text-align: center; }
    .telao-cabecalho { margin-bottom: 32px; }
    .telao-grid { grid-template-columns: 1fr; gap: 20px; }
    .telao-item { padding: 24px; }
    .telao-item-header { flex-wrap: wrap; }
}