body{
    margin:0;
    padding:0;
    background:#070707;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    box-sizing: border-box;
    overflow-x: hidden;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    margin:0;
    padding:0;
    background:#070707;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    overflow:hidden;
}

input,
select,
textarea,
button{
    font-family:Arial, Helvetica, sans-serif;
}

input,
select,
textarea{
    font-size:15px;
}

input::placeholder,
textarea::placeholder{
    color:#999;
    opacity:1;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance:none;
}

button,
input,
select,
textarea{
    outline:none;
}

button{
    border:0;
}

a{
    text-decoration:none;
}

.hidden,
.esconder{
    display:none;
}

.cursor{
    cursor:pointer;
}

.centralizar-input{
    text-align:center;
}

.lista-checkbox{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.lista-form-checkbox{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:18px;
    background:#111;
    border:1px solid #2a2a2a;
    cursor:pointer;
    transition:all .2s ease;
}

.lista-form-checkbox:hover{
    border-color:#d7ff3f;
    background:#171717;
}

.lista-form-checkbox input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:22px;
    height:22px;
    min-width:22px;
    border-radius:7px;
    border:2px solid #555;
    background:#0f0f0f;
    cursor:pointer;
    position:relative;
    transition:all .2s ease;
}

.lista-form-checkbox input[type="checkbox"]:checked{
    background:#d7ff3f;
    border-color:#d7ff3f;
}

.lista-form-checkbox input[type="checkbox"]:checked::after{
    content:'';
    position:absolute;
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid #000;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.lista-form-checkbox-titulo{
    color:#fff;
    font-size:15px;
    font-weight:700;
    line-height:1.3;
}

#loading{
    display:none;
    justify-content:center;
    align-items:center;
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0,0,0,.70);
}

#loading img{
    width:60px;
}

.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.login-card{
    width:100%;
    max-width:380px;
    background:#fff;
    color:#111;
    border-radius:34px;
    padding:28px 24px;
    box-shadow:0 26px 70px rgba(0,0,0,.35);
}

.login-logo{
    text-align:center;
    margin-bottom:22px;
}

.login-logo img{
    width:120px;
}

.login-titulo{
    font-size:12px;
    font-weight:900;
    color:#666;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:8px;
    letter-spacing:.4px;
}

.login-subtitulo{
    font-size:26px;
    font-weight:900;
    text-align:center;
    color:#111;
    margin-bottom:24px;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.login-form input{
    width:100%;
    height:58px;
    border:1px solid #e1e1e1;
    background:#f6f6f6;
    border-radius:20px;
    padding:0 16px;
    font-size:17px;
    font-weight:800;
    color:#111;
    text-align:center;
}

.login-form input:focus{
    background:#fff;
    border-color:#111;
}

.login-botao{
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-botao{
    width:100%;
    height:60px;
    margin-top:16px;
    border-radius:22px;
    background:#d7ff3f;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
}

.caixa-modal[style*="display: block"]{
    display:block !important;
}

.caixa-leitor[style*="display: flex"]{
    display:flex !important;
}

.viva-alerta-area,
#area_alerta{
    position:fixed;
    top:-120px;
    left:0;
    width:100%;
    display:flex;
    justify-content:center;
    padding:14px;
    z-index:999999;
    transition:.28s ease;
    pointer-events:none;
}

.viva-alerta,
#alerta{
    min-width:220px;
    max-width:90%;
    min-height:54px;
    padding:14px 20px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    font-size:14px;
    font-weight:800;
    backdrop-filter:blur(12px);
    box-shadow:0 15px 45px rgba(0,0,0,.28);
}

.bg-verde{
    background:#27A844;
}

.bg-verde-claro{
    background:#F1FAF3;
    border:1px solid #27A844;
}

.bg-verde-claro2{
    background:#ddf7e2;
}

.bg-vermelho{
    background:#DC3546;
}

.bg-vermelho-claro{
    background:#fceeef;
    border:1px solid #DC3546;
}

.bg-vermelho-claro2{
    background:#f7e3e4;
}

.bg-cinza-claro2{
    background:#ddd;
}

.bg-azul{
    background:#007AFF;
}

.bg-azul-claro{
    background:#e8eff7;
    border:1px solid #007AFF;
}

.bg-laranja{
    background:#FEC107;
}

.bg-laranja-claro{
    background:#FAF4E1;
    border:1px solid #FEC107;
}

.cor-verde{
    color:#27A844;
}

.cor-vermelho{
    color:#DC3546;
}

.cor-cinza{
    color:#999;
}

.cor-azul{
    color:#007AFF;
}

.cor-preto{
    color:#000;
}

.viva-alerta-area{
    position:fixed;
    top:-120px;
    left:0;
    width:100%;
    display:flex;
    justify-content:center;
    padding:14px;
    z-index:999999;
    transition:.28s ease;
    pointer-events:none;
}

.viva-alerta{
    min-width:220px;
    max-width:90%;
    min-height:54px;
    padding:14px 20px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    font-size:14px;
    font-weight:800;
    backdrop-filter:blur(12px);
    box-shadow:0 15px 45px rgba(0,0,0,.28);
}

.area{
    min-height:100vh;
    padding-bottom:110px;
    background:
        radial-gradient(circle at 90% 5%, rgba(215,255,63,.15), transparent 24%),
        linear-gradient(135deg, #050505, #101010);
}

.content{
    padding:0 16px 30px;
}

.caixa-topo{
    padding:20px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.caixa-topo-logo{
    cursor:pointer;
    display:flex;
    align-items:center;
}

.caixa-topo-logo img{
    height:50px;
    width:auto;
    display:block;
}

.caixa-topo-status{
    background:rgba(215,255,63,.12);
    border:1px solid rgba(215,255,63,.25);
    color:#d7ff3f;
    padding:10px 14px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.caixa-page{
    padding-top:10px;
}

.caixa-card{
    background:#fff;
    color:#111;
    border-radius:34px;
    padding:24px;
    box-shadow:0 26px 70px rgba(0,0,0,.35);
}

.caixa-card-label{
    font-size:12px;
    font-weight:900;
    color:#666;
    text-transform:uppercase;
    margin-bottom:12px;
}

.caixa-valor-box{
    display:flex;
    align-items:center;
    border:2px solid #111;
    background:#f5f5f5;
    border-radius:28px;
    padding:16px 18px;
}

.caixa-valor-prefixo{
    font-size:28px;
    font-weight:900;
    margin-right:10px;
}

.caixa-valor-input{
    width:100%;
    border:0;
    outline:none;
    background:transparent;
    font-size:52px;
    font-weight:900;
    color:#111;
    text-align: center;
}

.caixa-acoes{
    display:flex;
    align-items:center;
    margin-top:22px;
    gap:12px;
}

.caixa-btn-principal{
    width:100%;
    height:82px;
    border-radius:24px;
    border:0;
    cursor:pointer;
    font-weight:900;
    font-size:15px;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    justify-content:center;
    transition:.2s;
    background:#d7ff3f;
    color:#111;
}

.caixa-btn-principal i{
    font-size:26px;
    transition:.2s;
}

.caixa-btn-principal:active{
    transform:scale(.98);
}

@media (max-width:520px){

    .caixa-valor-input{
        font-size:42px;
    }

}

.caixa-menu{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    background:rgba(7,7,7,.92);
    backdrop-filter:blur(16px);
    border-top:1px solid rgba(255,255,255,.08);
    padding:10px 10px 14px;
    z-index:50;
}

.caixa-menu-grid{
    display:grid;
    grid-template-columns:repeat(var(--menu-cols, 5), 1fr);
    gap:8px;
}

.caixa-menu-item{
    min-height:64px;
    border-radius:20px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    transition:.2s;
}

.caixa-menu-item i{
    font-size:18px;
    margin-bottom:5px;
    color:#ddd;
}

.caixa-menu-item label{
    font-size:10px;
    font-weight:800;
    color:#ddd;
}

.caixa-menu-item[data-enabled="1"]{
    background:rgba(215,255,63,.12);
    border-color:rgba(215,255,63,.22);
}

.caixa-menu-item[data-enabled="1"] i,
.caixa-menu-item[data-enabled="1"] label{
    color:#d7ff3f;
}

.caixa-menu-sair{
    background:rgba(220,53,70,.14);
    border-color:rgba(220,53,70,.22);
}

.caixa-menu-sair i,
.caixa-menu-sair label{
    color:#ff6b7a;
}

.caixa-menu-item[data-enabled="1"]{
    background:rgba(215,255,63,.12);
    border-color:rgba(215,255,63,.22);
}

.caixa-menu-item[data-enabled="1"] i,
.caixa-menu-item[data-enabled="1"] label{
    color:#d7ff3f;
}

.caixa-menu-item[data-enabled="0"] i,
.caixa-menu-item[data-enabled="0"] label{
    color:#8c8c8c;
}

.caixa-leitor{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    z-index:100;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.caixa-leitor-box{
    width:100%;
    max-width:420px;
}

.caixa-leitor-camera{
    overflow:hidden;
    border-radius:26px;
    background:#111;
}

.caixa-leitor-fechar{
    margin-top:16px;
}

.caixa-leitor-fechar button{
    width:100%;
    height:56px;
    border:0;
    border-radius:18px;
    background:#fff;
    color:#111;
    font-weight:900;
    font-size:15px;
}

.caixa-modal{
    position:fixed;
    inset:0;
    background:#070707;
    z-index:90;
    display:none;
    overflow:auto;
}

.caixa-modal-topo{
    padding:14px 16px 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.caixa-modal-titulo{
    font-size:18px;
    font-weight:900;
    color:#fff;
    line-height:1;
}

.caixa-modal-fechar{
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(255,255,255,.22);
    border:1px solid rgba(255,255,255,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#fff;
    font-size:16px;
    transition:.2s;
    backdrop-filter:blur(10px);
}

.caixa-modal-fechar:hover{
    background:rgba(255,255,255,.30);
}

.caixa-modal-card{
    background:#fff;
    color:#111;
    border-radius:28px;
    padding:22px;
    box-shadow:0 20px 55px rgba(0,0,0,.28);
}

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

.caixa-form-grupo{
    display:flex;
    flex-direction:column;
}

.caixa-form-label{
    font-size:12px;
    font-weight:900;
    color:#555;
    text-transform:uppercase;
    margin-bottom:8px;
    letter-spacing:.3px;
}

.caixa-form input,
.caixa-form select,
.caixa-form textarea{
    width:100%;
    height:52px;
    border:1px solid #e1e1e1;
    background:#f6f6f6;
    border-radius:16px;
    padding:0 14px;
    font-size:15px;
    font-weight:800;
    color:#111;
}

.caixa-form textarea{
    height:110px;
    padding:14px;
    resize:none;
}

.caixa-form input:focus,
.caixa-form select:focus,
.caixa-form textarea:focus{
    border-color:#111;
    background:#fff;
}

.caixa-form-limpar{
    margin-top:16px;
    text-align:center;
    font-size:12px;
    font-weight:900;
    color:#777;
    text-transform:uppercase;
    cursor:pointer;
}

.caixa-opcao{
    min-height:108px;
    border-radius:24px;
    background:#f5f5f5;
    border:1px solid #ececec;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
}

.caixa-opcao i{
    font-size:30px;
    margin-bottom:12px;
}

.caixa-opcao-titulo{
    font-size:14px;
    font-weight:900;
    color:#111;
}

.caixa-modal-area{
    padding:0 16px 120px;
}

.caixa-modal-card{
    background:#fff;
    color:#111;
    border-radius:30px;
    padding:22px;
}

.caixa-modal-label{
    font-size:12px;
    font-weight:900;
    color:#666;
    text-transform:uppercase;
    margin-bottom:14px;
}

.caixa-opcoes{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}

.caixa-opcao{
    min-height:108px;
    border-radius:24px;
    background:#f5f5f5;
    border:1px solid #eee;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
}

.caixa-opcao i{
    font-size:26px;
    margin-bottom:10px;
}

.atalhos{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
}

.atalho{
    background:#f5f5f5;
    border-radius:20px;
    padding:18px 10px;
    text-align:center;
    font-size:16px;
    font-weight:900;
    color:#111;
    cursor:pointer;
    transition:.2s;
}

.atalho:hover{
    background:#d7ff3f;
}

.atalho.ativo{
    background:#d7ff3f;
}

.caixa-opcao-titulo{
    font-size:12px;
    font-weight:900;
}

.caixa-form{
    margin-top:20px;
}

.caixa-form-grupo{
    margin-bottom:14px;
}

.caixa-form-label{
    font-size:12px;
    font-weight:900;
    color:#555;
    text-transform:uppercase;
    margin-bottom:8px;
}

.caixa-form-linha{
    display:flex;
    gap:8px;
}

.caixa-form input{
    width:100%;
    height:56px;
    border:1px solid #ddd;
    background:#f7f7f7;
    border-radius:18px;
    padding:0 16px;
    outline:none;
    font-size:18px;
    font-weight:800;
    color:#111;
}

.caixa-form-icone{
    width:56px;
    min-width:56px;
    height:56px;
    border-radius:18px;
    background:#d7ff3f;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.caixa-form-botao{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:58px;
    border:0;
    border-radius:20px;
    background:#d7ff3f;
    color:#111;
    font-weight:900;
    font-size:15px;
    cursor:pointer;
}

.caixa-retorno{
    display:none;
    margin-top:22px;
    border-radius:20px;
    padding:16px;
    text-align:center;
    font-weight:900;
    background-color: #fceeef;
    border: 1px solid #DC3546;
}

.caixa-codigo-box{
    display:flex;
    gap:10px;
}

.caixa-codigo-box input{
    width:100%;
    height:52px;
    border:2px solid #111;
    background:#f5f5f5;
    border-radius:22px;
    padding:0 18px;
    font-size:30px;
    font-weight:900;
    text-align:center;
    outline:none;
}

.caixa-codigo-btn{
    width:64px;
    min-width:64px;
    height:62px;
    border:0;
    border-radius:22px;
    background:#d7ff3f;
    color:#111;
    font-size:22px;
    cursor:pointer;
}

.caixa-pagamento-card{
    background:#fff;
    color:#111;
    border-radius:34px;
    padding:22px;
    box-shadow:0 26px 70px rgba(0,0,0,.35);
}

.caixa-pagamento-opcoes{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}

.caixa-pagamento-opcao{
    min-height:105px;
    border-radius:24px;
    background:#fff;
    border:2px solid #111;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    transition:.2s;
}

.caixa-pagamento-opcao i{
    font-size:28px;
    margin-bottom:10px;
}

.caixa-pagamento-opcao-titulo{
    font-size:13px;
    font-weight:900;
}

.caixa-pagamento-qrcode{
    margin-top:14px;
    border-radius:22px;
    padding:18px;
    background:#d7ff3f;
    color:#111;
    font-size:14px;
    font-weight:900;
    text-align:center;
    cursor:pointer;
}

.caixa-pagamento-linha{
    margin-top:14px;
    border-radius:16px;
    padding:10px;
    background:#f5f5f5;
    border:1px solid #eee;
}

.caixa-pagamento-linha-area{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.caixa-pagamento-forma{
    font-size:13px;
    font-weight:900;
    color:#555;
    text-transform:uppercase;
}

.caixa-pagamento-valor{
    font-size:22px;
    font-weight:900;
    color:#111;
}

.caixa-pagamento-valor input{
    width:140px;
    height:48px;
    border:0;
    outline:none;
    background:transparent;
    font-size:24px;
    font-weight:900;
    text-align:right;
    color:#111;
}

.caixa-pagamento-total{
    background:#ddf7e2;
    border:1px solid #27A844;
}

.caixa-pagamento-falta{
    background:#fceeef;
    border:1px solid #DC3546;
}

.caixa-menu-finalizar{
    grid-column:span 4;
    min-height:64px;
    border-radius:20px;
    background:rgba(215,255,63,.12);
    border:1px solid rgba(215,255,63,.22);
    color:#d7ff3f;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    font-size:14px;
    font-weight:900;
}

.caixa-pix-centro{
    text-align:center;
    color:#111;
    border-radius:34px;
    padding:24px 18px;
    min-height:calc(100vh - 80px);

    background:
        radial-gradient(circle at top right, rgba(215,255,63,.18), transparent 22%),
        radial-gradient(circle at bottom left, rgba(215,255,63,.10), transparent 24%),
        linear-gradient(145deg, #ffffff, #f5f5f5);

    border:1px solid rgba(215,255,63,.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 25px 70px rgba(0,0,0,.22);
}

.caixa-pix-titulo{
    font-size:18px;
    font-weight:900;
    line-height:1.35;
    margin-bottom:20px;
    color:#111;
}

.caixa-pix-qrcode-area{
    background:#fff;
    border-radius:30px;
    padding:20px;
    display:inline-block;
    margin-bottom:20px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:
        0 20px 50px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.caixa-pix-total{
    font-size:38px;
    font-weight:900;
    color:#111;
    margin-bottom:18px;
    letter-spacing:-1px;
}

.caixa-pix-info{
    font-size:14px;
    font-weight:800;
    color:#222;
    line-height:1.35;
    margin-bottom:16px;
}

.caixa-pix-contador{
    font-size:14px;
    font-weight:900;
    color:#111;
}

.caixa-pix-cancelar{
    margin-top:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(17,17,17,.12);
    border:1px solid rgba(17,17,17,.18);
    color:#111;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.caixa-pix-status-card{
    background:#fff;
    color:#111;
    border-radius:34px;
    padding:38px 22px;
    min-height:calc(100vh - 100px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:0 26px 70px rgba(0,0,0,.35);
}

.caixa-pix-status-card.sucesso{
    background:
        radial-gradient(circle at top right, rgba(215,255,63,.35), transparent 34%),
        #fff;
}

.caixa-pix-status-card.cancelado{
    background:
        radial-gradient(circle at top right, rgba(255,107,122,.18), transparent 34%),
        #fff;
}

.caixa-pix-icone-status{
    width:96px;
    height:96px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:46px;
    margin-bottom:22px;
}

.caixa-pix-icone-status.sucesso{
    background:#d7ff3f;
    color:#111;
}

.caixa-pix-icone-status.cancelado{
    background:#fceeef;
    color:#DC3546;
}

.caixa-pix-status{
    font-size:23px;
    font-weight:900;
    color:#111;
    margin-bottom:8px;
}

.caixa-pix-status-sub{
    font-size:14px;
    font-weight:700;
    color:#666;
    line-height:1.35;
}

.relatorio-page{
    padding-bottom:120px;
}

.relatorio-card{
    background:#fff;
    color:#111;
    border-radius:30px;
    padding:22px;
    margin-bottom:14px;
    box-shadow:0 20px 55px rgba(0,0,0,.28);
}

.relatorio-topo-card{
    background:#fff;
    color:#111;
    border-radius:18px;
    padding:16px;
    margin-bottom:14px;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.relatorio-titulo{
    font-size:12px;
    font-weight:900;
    color:#666;
    text-transform:uppercase;
    margin-bottom:6px;
    letter-spacing:.3px;
}

.relatorio-quantidade{
    font-size:20px;
    line-height:1;
    font-weight:900;
    color:#111;
    letter-spacing:-.6px;
}

.relatorio-destaque{
    font-size:34px;
    font-weight:900;
    color:#111;
    letter-spacing:-1px;
}

.relatorio-resumos{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:14px;
}

.relatorio-resumo{
    background:#fff;
    color:#111;
    border-radius:22px;
    padding:15px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 12px 35px rgba(0,0,0,.18);
}

.relatorio-resumo.verde{
    background:#f1faf3;
    border-color:#27A844;
}

.relatorio-resumo.azul{
    background:#e8eff7;
    border-color:#007AFF;
}

.relatorio-resumo.vermelho{
    background:#fceeef;
    border-color:#DC3546;
}

.relatorio-resumo-label{
    font-size:12px;
    font-weight:900;
    color:#555;
    text-transform:uppercase;
}

.relatorio-resumo-valor{
    font-size:17px;
    font-weight:900;
    color:#111;
}

.relatorio-filtro{
    background:rgba(215,255,63,.10);
    border:1px solid rgba(215,255,63,.22);
    border-radius:22px;
    padding:14px 16px;
    margin-bottom:14px;
}

.relatorio-filtro-titulo{
    font-size:11px;
    font-weight:900;
    color:#d7ff3f;
    text-transform:uppercase;
    margin-bottom:6px;
}

.relatorio-filtro-texto{
    font-size:13px;
    font-weight:700;
    color:#fff;
    line-height:1.4;
}

.relatorio-lista{
    background:#fff;
    color:#111;
    border-radius:18px;
    padding:8px 16px;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.relatorio-item{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:18px 0;
    border-bottom:1px solid #eee;
}

.relatorio-item:last-child{
    border-bottom:0;
}

.relatorio-item-info{
    flex:1;
}

.relatorio-item-titulo{
    font-size:15px;
    font-weight:900;
    margin-bottom:8px;
    color:#111;
}

.relatorio-item-detalhes{
    font-size:12px;
    font-weight:700;
    color:#777;
    line-height:1.55;
}

.relatorio-item-valor{
    min-width:95px;
    text-align:right;
    font-size:17px;
    font-weight:900;
    color:#111;
}

.relatorio-vazio{
    padding:18px 10px;
    text-align:center;
    font-size:14px;
    font-weight:800;
    color:#777;
}

.relatorio-carregar,
.relatorio-fim{
    text-align:center;
    padding:18px 0;
}

.relatorio-carregar i{
    font-size:28px;
    color:#111;
    cursor:pointer;
}

.relatorio-fim{
    display:none;
    color:#777;
    font-weight:800;
}

.relatorio-fim i{
    font-size:24px;
    margin-bottom:8px;
    color:#27A844;
}

.relatorio-item-acoes{
    min-width:44px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.relatorio-item-acoes i{
    font-size:18px;
    cursor:pointer;
}

.modal-confirmacao{
    text-align:center;
}

.modal-confirmacao-icone{
    width:74px;
    height:74px;
    margin:0 auto 18px;
    border-radius:50%;
    background:#fceeef;
    color:#DC3546;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
}

.modal-confirmacao-titulo{
    font-size:18px;
    font-weight:900;
    color:#111;
    margin-bottom:10px;
}

.modal-confirmacao-texto{
    font-size:14px;
    font-weight:700;
    color:#666;
    line-height:1.45;
    margin-bottom:24px;
}

.modal-confirmacao-botoes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.modal-confirmacao-btn{
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

.modal-confirmacao-btn.verde{
    background:#d7ff3f;
    color:#111;
}

.modal-confirmacao-btn.vermelho{
    background:#fceeef;
    color:#DC3546;
    border:1px solid #DC3546;
}

.fechamento-grid{
    display:grid;
    gap:10px;
    margin-bottom:18px;
}

.fechamento-card{
    background:#fff;
    color:#111;
    border-radius:18px;
    padding:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.fechamento-card.verde{
    background:#f1faf3;
    border-color:#27A844;
}

.fechamento-card.vermelho{
    background:#fceeef;
    border-color:#DC3546;
}

.fechamento-card-titulo{
    font-size:13px;
    font-weight:900;
    color:#555;
    text-transform:uppercase;
}

.fechamento-card-valor{
    font-size:18px;
    font-weight:900;
    color:#111;
}

.fechamento-total{
    margin-top:8px;
    margin-bottom:18px;
    background:
        radial-gradient(circle at top right, rgba(215,255,63,.18), transparent 22%),
        linear-gradient(145deg, #ffffff, #f5f5f5);

    border:1px solid rgba(215,255,63,.25);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 25px 70px rgba(0,0,0,.18);
}

.fechamento-total .fechamento-card-titulo{
    color:#666;
}

.fechamento-total .fechamento-card-valor{
    color:#111;
    font-size:24px;
    letter-spacing:-.5px;
}

.comprovante-acoes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:16px;
}

.comprovante-acao{
    min-height:120px;
    border-radius:28px;
    background:#fff;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    box-shadow:0 20px 55px rgba(0,0,0,.28);
    transition:.2s;
}

.comprovante-acao i{
    font-size:34px;
    margin-bottom:12px;
}

.comprovante-acao label{
    font-size:13px;
    font-weight:900;
    line-height:1.4;
    cursor:pointer;
}

.comprovante-acao.verde{
    background:
        radial-gradient(circle at top right, rgba(215,255,63,.18), transparent 24%),
        linear-gradient(145deg, #ffffff, #f5f5f5);

    border:1px solid rgba(215,255,63,.24);
}

.comprovante-acao.verde i{
    color:#27A844;
}

.comprovante-acao.vermelho{
    background:#fff;
    border:1px solid rgba(220,53,70,.16);
}

.comprovante-acao.vermelho i{
    color:#DC3546;
}

.comprovante-erro{
    background:#fff;
    color:#111;
    border-radius:22px;
    padding:18px;
    text-align:center;
    font-size:14px;
    font-weight:800;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.box-resumo{
    display:grid;
    gap:10px;
    margin-bottom:14px;
}

.box-resumo-card{
    border-radius:20px;
    padding:16px;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.box-resumo-card.verde{
    background:#f1faf3;
    border:1px solid #27A844;
}

.box-resumo-card.azul{
    background:#e8eff7;
    border:1px solid #007AFF;
}

.box-resumo-texto{
    font-size:14px;
    font-weight:900;
    color:#111;
    line-height:1.4;
}

.ingressos-lista{
    display:grid;
    gap:10px;
}

.ingresso-card{
    background:#fff;
    color:#111;
    border-radius:22px;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    cursor:pointer;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
    transition:.2s;
}

.ingresso-card:active{
    transform:scale(.98);
}

.ingresso-info{
    flex:1;
    min-width:0;
}

.ingresso-nome{
    font-size:15px;
    font-weight:900;
    color:#111;
    margin-bottom:6px;
    line-height:1.35;
}

.ingresso-preco{
    font-size:13px;
    font-weight:800;
    color:#666;
}

.ingresso-add{
    min-width:52px;
    height:52px;
    border-radius:16px;
    background:#d7ff3f;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.ingressos-vazio{
    background:#fff;
    color:#777;
    border-radius:20px;
    padding:24px 18px;
    text-align:center;
    font-size:14px;
    font-weight:800;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.box-cestinha-badge{
    position:absolute;
    top:8px;
    right:10px;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:#d7ff3f;
    color:#111;
    font-size:11px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
}

.caixa-menu-item{
    position:relative;
}

.box-pagamento-confirmado{
    position:fixed;
    inset:0;
    z-index:9999;
    background:
        radial-gradient(circle at top right, rgba(215,255,63,.22), transparent 26%),
        linear-gradient(135deg, #050505, #101010);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.box-pagamento-card{
    width:100%;
    max-width:360px;
    background:#fff;
    color:#111;
    border-radius:34px;
    padding:42px 24px;
    text-align:center;
    box-shadow:0 26px 70px rgba(0,0,0,.35);
}

.box-pagamento-icone{
    width:92px;
    height:92px;
    border-radius:50%;
    background:#d7ff3f;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:46px;
    margin:0 auto 22px;
}

.box-pagamento-texto{
    font-size:22px;
    font-weight:900;
    color:#111;
}

.cestinha-resumo{
    display:grid;
    gap:10px;
    margin-bottom:14px;
}

.cestinha-total{
    background:#f1faf3;
    border:1px solid #27A844;
    color:#111;
    border-radius:18px;
    padding:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.cestinha-total-label{
    font-size:12px;
    font-weight:900;
    color:#2c6b3f;
    text-transform:uppercase;
}

.cestinha-total-valor{
    font-size:18px;
    font-weight:900;
    color:#111;
}

.cestinha-aviso{
    display:none;
    background:#fceeef;
    border:1px solid #DC3546;
    color:#111;
    border-radius:18px;
    padding:14px 16px;
    font-size:13px;
    font-weight:900;
    text-align:center;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.cestinha-lista{
    background:#fff;
    color:#111;
    border-radius:18px;
    padding:8px 16px;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.cestinha-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 0;
    border-bottom:1px solid #eee;
}

.cestinha-item:last-child{
    border-bottom:0;
}

.cestinha-info{
    flex:1;
    min-width:0;
}

.cestinha-ingresso{
    font-size:15px;
    font-weight:900;
    color:#111;
    line-height:1.35;
    margin-bottom:6px;
}

.cestinha-numero{
    font-size:11px;
    color:#999;
    font-style:normal;
    margin-right:4px;
}

.cestinha-subtotal{
    font-size:12px;
    font-weight:800;
    color:#777;
    line-height:1.4;
}

.cestinha-remover{
    min-width:46px;
    height:46px;
    border-radius:15px;
    background:#fceeef;
    color:#DC3546;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    cursor:pointer;
}

.cestinha-vazia{
    background:#fff;
    color:#777;
    border-radius:18px;
    padding:24px 18px;
    text-align:center;
    font-size:14px;
    font-weight:800;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.menu-app-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}

.menu-app-card{
    min-height:160px;
    border-radius:28px;
    background:#fff;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    box-shadow:0 20px 55px rgba(0,0,0,.28);
    transition:.2s;
    padding:18px;
}

.menu-app-card:active{
    transform:scale(.98);
}

.menu-app-icone{
    width:72px;
    height:72px;
    margin:0 auto 16px;
    border-radius:24px;

    background:
        radial-gradient(circle at top right, rgba(215,255,63,.22), transparent 24%),
        linear-gradient(145deg, #ffffff, #f5f5f5);

    border:1px solid rgba(215,255,63,.24);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#111;
    font-size:30px;
}

.menu-app-titulo{
    font-size:15px;
    font-weight:900;
    line-height:1.35;
    color:#111;
}

.menu-sair{
    background:rgba(220,53,70,.14);
    border-color:rgba(220,53,70,.22);
}

.menu-sair i,
.menu-sair label{
    color:#ff6b7d;
}

.relatorio-item-acoes .fa-share{
    color:#DC3546;
}

@media (max-width:420px){

    .menu-app-card{
        min-height:140px;
    }

    .menu-app-icone{
        width:64px;
        height:64px;
        font-size:26px;
    }

}

.ranking-posicao{
    min-width:34px;
    height:34px;
    border-radius:12px;
    background:#d7ff3f;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:900;
    margin-right:12px;
}

.relatorio-item-com-posicao{
    display:flex;
    align-items:flex-start;
}

.lista-imagem{
    width:64px;
    min-width:64px;
    height:64px;
    border-radius:18px;
    overflow:hidden;

    background:#f5f5f5;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:0 8px 22px rgba(0,0,0,.12);
}

.lista-imagem img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.impressao-card{
    min-height:calc(100vh - 190px);
    background:#fff;
    color:#111;
    border-radius:34px;
    padding:34px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:0 26px 70px rgba(0,0,0,.35);
}

.impressao-icone{
    width:96px;
    height:96px;
    border-radius:30px;
    background:#d7ff3f;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:44px;
    margin-bottom:22px;
}

.impressao-texto{
    font-size:22px;
    font-weight:900;
    line-height:1.25;
    color:#111;
}

.caixa-retorno{
    width:100%;
    margin-top:22px;
    padding:22px 18px;
    border-radius:20px;
    text-align:center;
}

.caixa-retorno #retorno_icone{
    font-size:42px;
    margin-bottom:10px;
}

.caixa-retorno #retorno_titulo{
    font-size:20px;
    font-weight:900;
    margin-bottom:6px;
}

.caixa-retorno #retorno_texto{
    font-size:15px;
    font-weight:700;
}

.retorno-sucesso{
    background:#ecfff2;
    border:1px solid #17b84f;
    color:#0b7a34;
}

.retorno-erro{
    background:#fff0f1;
    border:1px solid #dc3545;
    color:#b3202e;
}

.caixa-btn-principal:disabled{
    opacity:.6;
    cursor:not-allowed;
}

.lista-vip-status{
    display:inline-block;
    margin-top:5px;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.lista-vip-status.verde{
    background:#eafff0;
    color:#108b3f;
}

.lista-vip-status.vermelho{
    background:#fff0f1;
    color:#c82333;
}

.lista-vip-status.amarelo{
    background:#fff9df;
    color:#9b7800;
}
.lista-vip-status.azul{
    background:#eef5ff;
    color:#1261b3;
}


.modal-confirmacao{
    display:none;
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0,0,0,.72);
    padding:24px;
}

.modal-confirmacao-box{
    width:100%;
    max-width:380px;
    margin:120px auto 0 auto;
    background:#fff;
    border-radius:28px;
    padding:28px 22px 24px 22px;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.modal-confirmacao-icone{
    width:74px;
    height:74px;
    border-radius:50%;
    margin:0 auto 16px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ecfff2;
    color:#139b45;
    font-size:38px;
}

.modal-confirmacao-titulo{
    font-size:22px;
    font-weight:900;
    color:#111;
    margin-bottom:10px;
}

.modal-confirmacao-texto{
    font-size:15px;
    font-weight:700;
    color:#555;
    line-height:1.45;
    margin-bottom:24px;
}

.modal-confirmacao-texto strong{
    color:#111;
    font-weight:900;
}

.modal-confirmacao-acoes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.modal-confirmacao-btn{
    height:52px;
    border:0;
    border-radius:18px;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

.modal-confirmacao-btn.verde{
    background:#d7ff3f;
    color:#111;
}

.modal-confirmacao-btn.vermelho{
    background:#fff0f1;
    color:#c82333;
    border:1px solid #ffb5bd;
}

/* ==============================
   PAGAMENTO STONE / GERAL
============================== */

.pagamento-stone-area{
    min-height:100vh;
    padding-bottom:98px;
    background:
        radial-gradient(circle at 90% 5%, rgba(215,255,63,.15), transparent 24%),
        linear-gradient(135deg, #050505, #101010);
}

.pagamento-stone-content{
    padding:0 12px 24px;
}

.pagamento-stone-card{
    background:#fff;
    color:#111;
    border-radius:26px;
    padding:14px;
    box-shadow:0 20px 55px rgba(0,0,0,.28);
}

.pagamento-stone-opcoes{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
}

.pagamento-stone-opcao{
    min-height:72px;
    border-radius:18px;
    background:#fff;
    border:2px solid #111;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    transition:.18s;
}

.pagamento-stone-opcao:active{
    transform:scale(.98);
}

.pagamento-stone-opcao i{
    font-size:20px;
    margin-bottom:6px;
    color:#111;
}

.pagamento-stone-opcao span{
    display:block;
    font-size:11px;
    font-weight:900;
    color:#111;
    text-transform:uppercase;
}

.pagamento-stone-opcao-ativo{
    background:#ddf7e2;
    border-color:#27A844;
}

.pagamento-stone-vazio{
    border-radius:16px;
    padding:13px 10px;
    background:#fff;
    border:1px dashed #ddd;
    font-size:12px;
    font-weight:800;
    color:#777;
    text-align:center;
}

.pagamento-stone-linha{
    border-radius:16px;
    padding:12px;
    background:#f5f5f5;
    border:1px solid #eee;
}

.pagamento-stone-linha-forma{
    margin-top:7px;
    background:#fff;
    border-color:#e8e8e8;
    cursor:pointer;
}

.pagamento-stone-linha-area{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.pagamento-stone-forma{
    font-size:12px;
    font-weight:900;
    color:#555;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:7px;
}

.pagamento-stone-forma i{
    font-size:14px;
    color:#111;
}

.pagamento-stone-valor{
    font-size:17px;
    font-weight:900;
    color:#111;
    white-space:nowrap;
}

.pagamento-stone-total{
    margin-top:10px;
    background:#ddf7e2;
    border:1px solid #27A844;
}

.pagamento-stone-falta{
    margin-top:8px;
}

.pagamento-stone-pendente{
    background:#fceeef !important;
    border:1px solid #DC3546 !important;
}

.pagamento-stone-completo{
    background:#f1faf3 !important;
    border:1px solid #27A844 !important;
}

.pagamento-stone-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:flex-start;
    justify-content:center;
    z-index:99990;
    padding:86px 12px 12px;
    background:rgba(7,7,7,.72);
    backdrop-filter:blur(12px);
}

.pagamento-stone-modal-card{
    width:100%;
    max-width:440px;
    background:#fff;
    color:#111;
    border-radius:26px;
    padding:14px;
    box-shadow:0 22px 70px rgba(0,0,0,.42);
}

.pagamento-stone-modal-topo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.pagamento-stone-modal-titulo-area{
    display:flex;
    align-items:center;
    gap:10px;
}

.pagamento-stone-modal-icone{
    width:44px;
    height:44px;
    border-radius:16px;
    background:#d7ff3f;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
}

.pagamento-stone-modal-titulo{
    font-size:20px;
    font-weight:900;
    color:#111;
    line-height:1;
}

.pagamento-stone-modal-fechar{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#f1f1f1;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.pagamento-stone-modal-input{
    height:70px;
    border:2px solid #111;
    background:#f6f6f6;
    border-radius:22px;
    display:flex;
    align-items:center;
    padding:0 14px;
}

.pagamento-stone-modal-input span{
    font-size:20px;
    font-weight:900;
    color:#111;
    margin-right:8px;
}

.pagamento-stone-modal-input input{
    width:100%;
    height:66px;
    border:0;
    outline:none;
    background:transparent;
    font-size:36px;
    font-weight:900;
    color:#111;
    text-align:right;
}

.pagamento-stone-modal-botoes{
    display:grid;
    grid-template-columns:92px 1fr;
    gap:9px;
    margin-top:12px;
}

.pagamento-stone-modal-btn{
    height:52px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    cursor:pointer;
}

.pagamento-stone-modal-btn:active{
    transform:scale(.98);
}

.pagamento-stone-modal-btn-zerar{
    background:#f5f5f5;
    color:#555;
    border:1px solid #e1e1e1;
}

.pagamento-stone-modal-btn-confirmar{
    background:#d7ff3f;
    color:#111;
}

.pagamento-stone-menu{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    background:rgba(7,7,7,.92);
    backdrop-filter:blur(16px);
    border-top:1px solid rgba(255,255,255,.08);
    padding:10px 10px 14px;
    z-index:99970;
}

.pagamento-stone-menu-grid{
    display:grid;
    grid-template-columns:82px 1fr;
    gap:8px;
}

.pagamento-stone-menu-cancelar{
    min-height:62px;
    border-radius:20px;
    background:rgba(220,53,70,.14);
    border:1px solid rgba(220,53,70,.22);
    color:#ff6b7a;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
}

.pagamento-stone-menu-cancelar i{
    font-size:18px;
}

.pagamento-stone-menu-cancelar span{
    font-size:10px;
    font-weight:900;
}

.pagamento-stone-menu-finalizar{
    min-height:62px;
    border-radius:20px;
    background:#d7ff3f;
    border:1px solid rgba(215,255,63,.22);
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
}

.pagamento-stone-modal-total{
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    background:#f1faf3;
    border:1px solid #27A844;
    color:#111;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

/* ==============================
   PAGAMENTO STONE - COMPLEMENTO PIX
============================== */

.pagamento-stone-lista{
    margin-top:12px;
}

.pagamento-stone-modal-status{
    margin-top:10px;
    min-height:18px;
    font-size:12px;
    font-weight:800;
    color:#666;
    text-align:center;
}

.pagamento-stone-pix-modal{
    position:fixed;
    inset:0;
    background:#070707;
    z-index:99980;
    display:none;
    overflow:auto;
}

.pagamento-stone-pix-topo{
    padding:14px 16px 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.pagamento-stone-pix-topo-titulo{
    font-size:18px;
    font-weight:900;
    color:#fff;
    line-height:1;
}

.pagamento-stone-pix-fechar{
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.22);
    border:1px solid rgba(255,255,255,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#fff;
}

.pagamento-stone-pix-area{
    padding:0 14px 120px;
}

.pagamento-stone-pix-card{
    text-align:center;
    color:#111;
    border-radius:30px;
    padding:22px 16px;
    min-height:calc(100vh - 80px);
    background:
        radial-gradient(circle at top right, rgba(215,255,63,.18), transparent 22%),
        radial-gradient(circle at bottom left, rgba(215,255,63,.10), transparent 24%),
        linear-gradient(145deg, #ffffff, #f5f5f5);
    border:1px solid rgba(215,255,63,.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 25px 70px rgba(0,0,0,.22);
}

.pagamento-stone-pix-titulo{
    font-size:17px;
    font-weight:900;
    line-height:1.35;
    margin-bottom:18px;
    color:#111;
}

.pagamento-stone-pix-qrcode{
    background:#fff;
    border-radius:28px;
    padding:18px;
    display:inline-block;
    margin-bottom:18px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:
        0 20px 50px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.pagamento-stone-pix-qrcode canvas,
.pagamento-stone-pix-qrcode img{
    display:block;
    width:250px !important;
    height:250px !important;
}

.pagamento-stone-pix-total{
    font-size:36px;
    font-weight:900;
    color:#111;
    margin-bottom:16px;
    letter-spacing:-1px;
}

.pagamento-stone-pix-info{
    font-size:13px;
    font-weight:800;
    color:#222;
    line-height:1.35;
    margin-bottom:14px;
}

.pagamento-stone-pix-tempo{
    margin:0 auto 14px;
    width:150px;
    border-radius:18px;
    padding:10px;
    background:#fff;
    border:1px solid #eee;
}

.pagamento-stone-pix-tempo span{
    display:block;
    font-size:11px;
    font-weight:900;
    color:#777;
    text-transform:uppercase;
    margin-bottom:4px;
}

.pagamento-stone-pix-tempo strong{
    display:block;
    font-size:20px;
    font-weight:900;
    color:#111;
}

.pagamento-stone-pix-cancelar{
    margin-top:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 16px;
    border-radius:999px;
    background:rgba(17,17,17,.12);
    border:1px solid rgba(17,17,17,.18);
    color:#111;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    cursor:pointer;
}

.pagamento-stone-pix-status-card{
    background:#fff;
    color:#111;
    border-radius:30px;
    padding:34px 20px;
    min-height:calc(100vh - 100px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:0 26px 70px rgba(0,0,0,.35);
}

.pagamento-stone-pix-status-sucesso{
    background:
        radial-gradient(circle at top right, rgba(215,255,63,.35), transparent 34%),
        #fff;
}

.pagamento-stone-pix-status-cancelado{
    background:
        radial-gradient(circle at top right, rgba(255,107,122,.18), transparent 34%),
        #fff;
}

.pagamento-stone-pix-status-icone{
    width:92px;
    height:92px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:44px;
    margin-bottom:20px;
}

.pagamento-stone-pix-status-icone.sucesso{
    background:#d7ff3f;
    color:#111;
}

.pagamento-stone-pix-status-icone.cancelado{
    background:#fceeef;
    color:#DC3546;
}

.pagamento-stone-pix-status-titulo{
    font-size:22px;
    font-weight:900;
    color:#111;
    margin-bottom:8px;
}

.pagamento-stone-pix-status-texto{
    font-size:14px;
    font-weight:700;
    color:#666;
    line-height:1.35;
}

/* ==============================
   PAGAMENTO STONE - CONFIRMADO
============================== */

.pagamento-stone-confirmado-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    background:rgba(7,7,7,.72);
    backdrop-filter:blur(12px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}

.pagamento-stone-confirmado-card{
    width:100%;
    max-width:340px;
    background:#fff;
    color:#111;
    border-radius:30px;
    padding:34px 22px;
    text-align:center;
    box-shadow:0 26px 80px rgba(0,0,0,.45);
}

.pagamento-stone-confirmado-icone{
    width:88px;
    height:88px;
    border-radius:50%;
    margin:0 auto 18px;
    background:#d7ff3f;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
}

.pagamento-stone-confirmado-titulo{
    font-size:21px;
    font-weight:900;
    color:#111;
    margin-bottom:8px;
}

.pagamento-stone-confirmado-texto{
    font-size:14px;
    font-weight:700;
    color:#666;
    line-height:1.35;
}



.teclado-pagamento-area{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:999999;
    display:none;
    align-items:flex-end;
    justify-content:center;
    pointer-events:none;
}

.teclado-pagamento-area.ativo{
    display:flex;
}

body.teclado-pagamento-aberto{
    padding-bottom:315px;
}

.teclado-pagamento-card{
    width:100%;
    max-width:520px;
    background:#ffffff;
    border-radius:24px 24px 0 0;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -12px 34px rgba(0,0,0,.16);
    pointer-events:auto;
    animation:tecladoPagamentoSubir .16s ease-out;
}

@keyframes tecladoPagamentoSubir{
    from{
        transform:translateY(100%);
    }
    to{
        transform:translateY(0);
    }
}

.teclado-pagamento-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
}

.teclado-pagamento-tecla{
    height:54px;
    border:0;
    border-radius:16px;
    background:#f3f3f3;
    color:#111111;
    font-size:23px;
    font-weight:950;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.06);
    transition:transform .08s ease, background .08s ease;
    -webkit-tap-highlight-color:transparent;
}

.teclado-pagamento-tecla i{
    font-size:20px;
}

.teclado-pagamento-tecla:active,
.teclado-pagamento-tecla.clicado{
    transform:scale(.95);
    background:#e4e4e4;
}

.teclado-pagamento-acoes{
    margin-top:8px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
}

.teclado-pagamento-acao{
    height:52px;
    border:0;
    border-radius:16px;
    background:#111111;
    color:#ffffff;
    font-size:20px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .08s ease, background .08s ease, color .08s ease;
    -webkit-tap-highlight-color:transparent;
}

.teclado-pagamento-acao i{
    font-size:20px;
}

.teclado-pagamento-acao:active,
.teclado-pagamento-acao.clicado{
    transform:scale(.95);
    background:#2b2b2b;
}

.teclado-pagamento-acao-confirmar{
    background:#cccccc;
    color:#555555;
}

.teclado-pagamento-acao-confirmar:active,
.teclado-pagamento-acao-confirmar.clicado{
    background:#bfbfbf;
    color:#333333;
}

.teclado-pagamento-acao-confirmar.ativo{
    background:#d7ff3f;
    color:#111111;
}

.teclado-pagamento-acao-confirmar.ativo:active,
.teclado-pagamento-acao-confirmar.ativo.clicado{
    background:#c5ed32;
    color:#111111;
}



.teclado-validacao-area{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    display:none;
    padding:0 6px 8px 6px;
    box-sizing:border-box;
}

.teclado-validacao-area.ativo{
    display:block;
}

.teclado-validacao-card{
    width:100%;
    background:#ffffff;
    border-radius:24px;
    padding:12px;
    box-sizing:border-box;
    box-shadow:0 -10px 35px rgba(0,0,0,.18);
}

.teclado-validacao-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
}

.teclado-validacao-tecla{
    height:52px;
    border:0;
    border-radius:16px;
    background:#f1f1f1;
    color:#111111;
    font-size:24px;
    font-weight:950;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.06);
    transition:transform .08s ease, background .08s ease;
    -webkit-tap-highlight-color:transparent;
}

.teclado-validacao-tecla:active,
.teclado-validacao-tecla.clicado{
    transform:scale(.95);
    background:#e4e4e4;
}

.teclado-validacao-tecla i{
    font-size:18px;
}

.teclado-validacao-acoes{
    margin-top:8px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
}

.teclado-validacao-acao{
    height:52px;
    border:0;
    border-radius:16px;
    background:#111111;
    color:#ffffff;
    font-size:20px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .08s ease, background .08s ease, color .08s ease;
    -webkit-tap-highlight-color:transparent;
}

.teclado-validacao-acao i{
    font-size:20px;
}

.teclado-validacao-acao:active,
.teclado-validacao-acao.clicado{
    transform:scale(.95);
    background:#2b2b2b;
}

.teclado-validacao-acao-confirmar{
    background:#cccccc;
    color:#555555;
}

.teclado-validacao-acao-confirmar:active,
.teclado-validacao-acao-confirmar.clicado{
    background:#bfbfbf;
    color:#333333;
}

.teclado-validacao-acao-confirmar.ativo{
    background:#d7ff3f;
    color:#111111;
}

.teclado-validacao-acao-confirmar.ativo:active,
.teclado-validacao-acao-confirmar.ativo.clicado{
    background:#c5ed32;
    color:#111111;
}

body.teclado-validacao-aberto{
    padding-bottom:260px;
}