*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    -webkit-text-size-adjust:100%;
}

body{
    min-width:0;
}

img{
    max-width:100%;
    height:auto;
}

input,
select,
button,
textarea{
    font:inherit;
}

button,
a{
    overflow-wrap:anywhere;
}

pre,
code{
    max-width:100%;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.container > *,
.card > *,
.caixa > *,
.bloco > *{
    min-width:0;
}

.wrap,
.tabela,
.table-scroll{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.grid > *,
.grade > *,
.cards > *,
.jogos > *,
.menu > *,
.acoes > *,
.topo > *,
.cabecalho > *{
    min-width:0;
}

h1,
h2,
h3{
    overflow-wrap:anywhere;
}

.prazo-banner{
    width:100%;
    margin:0 0 18px;
    padding:12px;
    background:#112d4e;
    color:white;
}

.prazo-banner.ativo{
    background:#112d4e;
}

.prazo-banner.encerrado{
    background:#4b5563;
}

.prazo-banner-conteudo{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr auto 1.2fr;
    gap:14px;
    align-items:center;
}

.prazo-texto,
.prazo-pendencias{
    line-height:1.35;
}

.prazo-contagem{
    background:#f58c20;
    color:#111;
    border-radius:6px;
    padding:8px 12px;
    font-weight:bold;
    white-space:nowrap;
    text-align:center;
}

.prazo-banner.encerrado .prazo-contagem{
    background:#e5e7eb;
}

.table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

@media(max-width:760px){

    body{
        margin:0;
        padding:12px;
        overflow-x:hidden;
    }

    .container{
        width:100%;
        max-width:none;
        margin:0 auto 16px !important;
        padding:16px;
        border-radius:8px;
    }

    .prazo-banner{
        margin:-12px -12px 16px;
        width:auto;
        padding:12px;
    }

    .prazo-banner-conteudo{
        grid-template-columns:1fr;
        gap:8px;
        text-align:center;
    }

    .prazo-contagem{
        white-space:normal;
        width:100%;
    }

    h1{
        font-size:24px;
        line-height:1.2;
    }

    h2{
        font-size:20px;
        line-height:1.25;
    }

    .topo,
    .cabecalho-login,
    .cabecalho-painel,
    .cabecalho{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
        text-align:center;
    }

    .topo h1,
    .cabecalho-login h1,
    .cabecalho-painel h1,
    .cabecalho h1{
        margin:0;
        text-align:center;
    }

    .logo-topo,
    .logo-login,
    .logo-painel,
    .logo{
        width:78px;
    }

    .menu{
        width:100%;
        margin:24px auto;
        padding:0 4px;
        gap:12px;
        flex-direction:column;
        align-items:stretch;
    }

    .botao,
    button.botao,
    .btn-voltar,
    .botao-voltar,
    .botao-salvar-topo{
        width:100%;
        max-width:360px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        justify-content:center;
        white-space:normal;
    }

    .botao{
        min-height:58px;
        font-size:17px;
        padding:14px;
        border-radius:8px;
    }

    form{
        width:100%;
        max-width:none;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea{
        width:100%;
        max-width:100%;
        font-size:16px;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select{
        min-height:44px;
    }

    input[type="checkbox"],
    input[type="radio"]{
        width:auto;
        max-width:none;
        flex:0 0 auto;
    }

    textarea{
        min-height:180px;
    }

    button,
    [type="submit"],
    [type="button"],
    .botao,
    .btn-voltar,
    .botao-voltar{
        min-height:44px;
    }

    table{
        width:100%;
        max-width:100%;
        margin-left:0;
        margin-right:0;
    }

    th,
    td{
        padding:7px;
    }

    .cards,
    .jogos,
    .consultas,
    .grid,
    .botoes,
    .linha-form,
    .form-grid{
        grid-template-columns:1fr !important;
        gap:14px;
    }

    .acoes,
    .topo-acoes,
    .cabecalho-acoes{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .card{
        padding:15px;
        border-radius:8px;
    }

    .confronto,
    .confronto-linha,
    .resultado-confronto{
        white-space:normal;
    }

    .confronto,
    .confronto-linha{
        gap:8px;
        margin:16px 0;
    }

    .time{
        justify-content:center;
        text-align:center;
        max-width:100%;
    }

    .placar{
        min-width:58px;
    }

    .fases{
        gap:8px;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .fases a{
        flex:0 0 auto;
        margin-right:0;
    }

    .info,
    .legenda,
    .aviso,
    .mensagem,
    .aviso-pagamento,
    .premiacao-box,
    .painel-contador{
        line-height:1.45;
    }

    p,
    li,
    td,
    th,
    label{
        overflow-wrap:anywhere;
    }

    td.nome,
    td.email{
        white-space:normal;
        min-width:160px;
    }
}

@media(max-width:480px){

    body{
        padding:10px;
    }

    .container{
        padding:14px;
    }

    h1{
        font-size:21px;
    }

    .subtitulo{
        font-size:16px;
    }

    .logo-copa{
        max-width:150px;
    }

    .logo-bolao{
        max-width:240px;
    }

    .numero,
    .numero-jogo{
        font-size:19px;
    }

    .titulo-fase{
        font-size:19px;
        line-height:1.25;
    }

    .placar{
        width:48px;
        min-width:48px;
        padding:7px;
        font-size:16px;
    }

    .salvar button,
    button{
        width:100%;
    }
}