:root {
        --ink: #16333A;
        --teal: #006C81;
        --teal-deep: #00505F;
        --wine: #9C3464;
        --wine-deep: #7A2650;
        --canvas: #EEF3F2;
        --paper: #FBF4E6;
        --paper-line: #E3D3AF;
        --muted: #57696C;
        --ok: #1F7A4D;
        --ok-bg: #E6F3EA;
        --danger: #B3261E;
        --card-line: #DCE4E3;
        --shadow: 0 10px 30px -12px rgba(22, 51, 58, 0.18);
        --radius: 18px;
    }

    * { box-sizing: border-box; }

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

    body {
        margin: 0;
        background: var(--canvas);
        color: var(--ink);
        font-family: system-ui, -apple-system, sans-serif;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        line-height: 1.4;
    }

    .app { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }

    .hidden { display: none !important; }

    button { font-family: inherit; }

    a { color: var(--teal); }

    :focus-visible {
        outline: 3px solid var(--teal);
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
        * { transition: none !important; animation: none !important; }
    }

    /* ============ LOGIN ============ */

    .tela-login {
        background: #fff;
        border: 1px solid var(--card-line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 2.25rem 1.75rem;
        margin-top: 2.5rem;
    }

    .login-marca { text-align: center; margin-bottom: 1.75rem; }
    .login-marca .login-logo {
        max-width: 230px;
        width: 70%;
        height: auto;
        margin: 0 auto 0.9rem;
        display: block;
    }
    .login-marca p {
        margin: 0;
        color: var(--muted);
        font-size: 0.92rem;
    }

    .campo { margin-bottom: 1.1rem; }
    .campo label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 0.4rem;
    }
    .campo input {
        width: 100%;
        font-family: inherit;
        font-size: 1.05rem;
        padding: 0.85rem 1rem;
        border: 1.5px solid var(--card-line);
        border-radius: 12px;
        background: #fff;
        color: var(--ink);
    }
    .campo input:focus { border-color: var(--teal); }
    #input-senha { text-align: center; letter-spacing: 0.5em; }

    .cf-turnstile { display: flex; justify-content: center; margin-bottom: 1.1rem; }

    .btn-entrar {
        width: 100%;
        background: var(--teal);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 0.95rem;
        font-size: 1.02rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s ease;
    }
    .btn-entrar:hover { background: var(--teal-deep); }
    .btn-entrar:active { background: var(--teal-deep); }

    #mensagem-erro {
        color: var(--danger);
        font-size: 0.85rem;
        font-weight: 600;
        text-align: center;
        margin-top: 0.9rem;
        min-height: 1.1rem;
    }

    /* ============ PAINEL ============ */

    .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.9rem;
        margin-bottom: 1.1rem;
        border-bottom: 1px solid var(--card-line);
    }
    .topbar h2 {
        font-weight: 600;
        font-size: 1.15rem;
        margin: 0;
        color: var(--teal-deep);
    }
    .topbar span {
        display: block;
        font-size: 0.85rem;
        font-weight: 700;
        margin-top: 0.1rem;
    }
    .btn-sair {
        background: #fff;
        border: 1.5px solid var(--card-line);
        border-radius: 999px;
        padding: 0.4rem 0.95rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
    }

    .banner-wrap {
        width: 100%;
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 1.5rem;
        border: 1px solid var(--card-line);
    }
    .banner-wrap img { width: 100%; height: auto; display: block; }

    /* ---- Blocos de categoria (ficha do carne) ---- */

    .bloco-categoria {
        background: #fff;
        border: 1px solid var(--card-line);
        border-left: 5px solid var(--teal);
        border-radius: 14px;
        margin-bottom: 0.85rem;
        overflow: hidden;
    }
    .bloco-categoria.cor-vencido { border-left-color: var(--wine); }
    .bloco-categoria.cor-mes { border-left-color: #B8860B; }
    .bloco-categoria.cor-futuro { border-left-color: var(--teal); }

    .cabecalho-categoria {
        width: 100%;
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1.05rem 1.1rem;
        cursor: pointer;
        text-align: left;
    }
    .cabecalho-categoria .info { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
    .cabecalho-categoria .icone {
        width: 40px; height: 40px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.15rem; flex-shrink: 0;
        background: var(--canvas);
    }
    .cor-vencido .icone { color: var(--wine); }
    .cor-mes .icone { color: #96690A; }
    .cor-futuro .icone { color: var(--teal); }

    .cabecalho-categoria .titulo { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
    .cabecalho-categoria .total { font-weight: 700; font-size: 1.15rem; margin-top: 0.05rem; }
    .cabecalho-categoria .lado-direito { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
    .contagem {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--muted);
        background: var(--canvas);
        border-radius: 999px;
        padding: 0.2rem 0.6rem;
        white-space: nowrap;
    }
    .seta { color: var(--muted); transition: transform 0.15s ease; flex-shrink: 0; }
    .seta.aberta { transform: rotate(180deg); }

    .corpo-categoria { border-top: 1px solid var(--card-line); background: var(--paper); }

    .lista-parcelas { list-style: none; margin: 0; padding: 0; }
    .lista-parcelas li + li { border-top: 1px dashed var(--paper-line); }

    .linha-parcela {
        width: 100%;
        background: none;
        border: none;
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.85rem 1.1rem;
        cursor: pointer;
        text-align: left;
        min-height: 44px;
    }

    .chip-data {
        flex-shrink: 0;
        width: 54px;
        text-align: center;
        background: #fff;
        border: 1.5px solid var(--teal);
        border-radius: 10px;
        padding: 0.35rem 0.2rem 0.3rem;
        line-height: 1;
    }
    .chip-data .dia { display: block; font-size: 1.3rem; font-weight: 700; color: var(--teal-deep); }
    .chip-data .mes { display: block; font-size: 0.65rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.2rem; }
    .cor-vencido .chip-data { border-color: var(--wine); }
    .cor-vencido .chip-data .dia { color: var(--wine-deep); }
    .cor-vencido .chip-data .mes { color: var(--wine); }
    .cor-mes .chip-data { border-color: #B8860B; }
    .cor-mes .chip-data .dia { color: #8A660A; }
    .cor-mes .chip-data .mes { color: #B8860B; }

    .linha-parcela .meio { flex: 1; min-width: 0; }
    .linha-parcela .parcela-label { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
    .selo-nova { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--wine); color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: 1px; }
    .linha-parcela .comprado { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }

    .linha-parcela .direita { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
    .linha-parcela .valor-parcela {
        font-weight: 600;
        font-size: 1.05rem;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .linha-parcela .chev { color: var(--muted); font-size: 0.95rem; transition: transform 0.15s ease; }
    .linha-parcela[aria-expanded="true"] .chev { transform: rotate(180deg); }

    .detalhe-itens { padding: 0 1.1rem 1.1rem; }
    .caixa-itens {
        background: #fff;
        border: 1px solid var(--paper-line);
        border-radius: 10px;
        overflow: hidden;
        font-size: 0.85rem;
    }
    .caixa-itens .item-linha {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.55rem 0.75rem;
    }
    .caixa-itens .item-linha + .item-linha { border-top: 1px solid var(--canvas); }
    .caixa-itens .item-nome { color: var(--ink); }
    .caixa-itens .item-qtd { color: var(--muted); flex-shrink: 0; }
    .sem-itens { color: var(--danger); font-size: 0.85rem; padding: 0.6rem 0.75rem; }

    /* ---- Estado "em dia" ---- */
    .estado-em-dia {
        background: var(--ok-bg);
        border: 1px solid rgba(31,122,77,0.25);
        border-radius: 14px;
        padding: 1.1rem;
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin-bottom: 0.85rem;
    }
    .estado-em-dia .icone-check { font-size: 1.9rem; color: var(--ok); flex-shrink: 0; }
    .estado-em-dia p { margin: 0 0 0.4rem; color: #145536; font-size: 0.9rem; font-weight: 600; }

    /* ---- Pagamento ---- */

    .secao-pagamento { margin-top: 1.6rem; }
    .secao-pagamento h3 {
        font-weight: 600;
        font-size: 1.05rem;
        margin: 0 0 0.7rem;
        color: var(--teal-deep);
    }

    .ficha-loja {
        border: 1.5px solid var(--card-line);
        border-radius: 14px;
        padding: 1rem 1.1rem;
        display: flex;
        align-items: center;
        gap: 0.85rem;
        background: #fff;
    }
    .ficha-loja .icone-loja {
        width: 44px; height: 44px; border-radius: 12px;
        background: var(--canvas); color: var(--teal);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.25rem; flex-shrink: 0;
    }
    .ficha-loja .conteudo { flex: 1; min-width: 0; }
    .ficha-loja .nome-loja { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
    .ficha-loja .linha-pix {
        display: flex; align-items: center; flex-wrap: wrap;
        gap: 0.5rem 0.6rem; margin-top: 0.2rem;
    }
    .ficha-loja .chave-pix {
        font-weight: 700; font-size: 0.98rem;
        word-break: break-word;
        flex: 1 1 auto;
        min-width: 0;
    }
    .btn-copiar {
        background: #fff;
        border: 1.5px solid var(--card-line);
        border-radius: 999px;
        padding: 0.4rem 0.8rem;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--ink);
        cursor: pointer;
        display: flex; align-items: center; gap: 0.35rem;
        flex-shrink: 0;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .btn-copiar.copiado { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }

    .aviso-comprovante {
        background: var(--ok-bg);
        border: 1px solid rgba(31,122,77,0.25);
        border-radius: 14px;
        padding: 1rem;
        text-align: center;
        margin-top: 0.85rem;
    }
    .aviso-comprovante p { margin: 0 0 0.65rem; color: #145536; font-size: 0.85rem; font-weight: 600; }
    .btn-whatsapp {
        display: inline-block;
        background: var(--ok);
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 0.7rem 1.6rem;
        border-radius: 999px;
    }

    /* ---- Selecao de parcelas + barra de total ---- */
    .linha-wrap { display: flex; align-items: stretch; }
    .marcador {
        display: flex; align-items: center; justify-content: center;
        width: 42px; flex-shrink: 0; cursor: pointer;
    }
    .chk-parcela { width: 22px; height: 22px; margin: 0; accent-color: var(--teal); cursor: pointer; }
    .linha-wrap .linha-parcela { flex: 1; width: auto; min-width: 0; gap: 0.55rem; padding: 0.85rem 0.9rem 0.85rem 0.1rem; }
    .linha-wrap .chip-data { width: 50px; }
    .linha-wrap .chip-data .dia { font-size: 1.2rem; }
    .linha-wrap .parcela-label { white-space: nowrap; }
    .linha-wrap .comprado { font-size: 0.75rem; }
    .item-parcela.selecionada { background: rgba(0, 108, 129, 0.09); }

    .acoes-categoria { display: flex; justify-content: flex-end; padding: 0.45rem 1.1rem 0.15rem; }
    .btn-link {
        background: none; border: none; padding: 0.4rem 0;
        color: var(--teal-deep); font-size: 0.85rem; font-weight: 700;
        cursor: pointer; text-decoration: underline;
    }

    body.com-barra { padding-bottom: 92px; }
    .barra-selecao {
        position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
        width: 100%; max-width: 560px; z-index: 50;
        display: flex; align-items: center; gap: 0.6rem;
        background: #fff; border-top: 1px solid var(--card-line);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px -12px rgba(22, 51, 58, 0.35);
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
    .barra-info { flex: 1; min-width: 0; }
    .barra-qtd { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 600; }
    .barra-total { display: block; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
    .btn-barra-limpar {
        background: none; border: none; color: var(--muted);
        font-size: 0.85rem; font-weight: 600; padding: 0.6rem 0.4rem; cursor: pointer;
    }
    .btn-barra {
        background: var(--teal); color: #fff; border: none; border-radius: 999px;
        padding: 0.75rem 1.1rem; font-size: 0.92rem; font-weight: 700; cursor: pointer;
        display: flex; align-items: center; gap: 0.4rem; white-space: nowrap;
    }
    .btn-barra.copiado { background: var(--ok); }
    .barra-qtd { white-space: nowrap; }
    .btn-barra-limpar { display: flex; align-items: center; gap: 0.25rem; }
    @media (max-width: 420px) {
        .btn-barra-limpar .txt-limpar { display: none; }  /* celulares: fica so o x */
        .barra-total { font-size: 1.12rem; }
    }
    @media (max-width: 360px) {
        /* telas muito estreitas: menos enfeite, nada pode se sobrepor */
        .marcador { width: 36px; }
        .linha-wrap .chip-data { width: 44px; }
        .linha-wrap .chip-data .dia { font-size: 1.05rem; }
        .linha-wrap .parcela-label { white-space: normal; font-size: 0.8rem; }
        .linha-wrap .comprado { display: none; }   /* a data de compra continua visivel ao expandir */
        .linha-parcela .valor-parcela { font-size: 0.92rem; }
        .barra-selecao { gap: 0.4rem; padding-left: 0.75rem; padding-right: 0.75rem; }
        .barra-total { font-size: 1.05rem; }
        .btn-barra { padding: 0.7rem 0.85rem; font-size: 0.85rem; }
        .btn-barra-limpar .txt-limpar { display: none; }  /* fica so o x */
    }

    .btn-copia-cola { margin-top: 0.6rem; }
    .dica-pix { margin: 0.5rem 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--muted); }

    .card-avisos { display: flex; gap: 0.9rem; align-items: flex-start; margin: 1rem 0; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--card-line); border-left: 4px solid var(--teal); border-radius: var(--radius); box-shadow: var(--shadow); }
    .avisos-icone { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: rgba(0, 108, 129, 0.12); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
    .avisos-texto strong { display: block; font-size: 1rem; color: var(--ink); }
    .card-avisos p { margin: 0.2rem 0 0.7rem; font-size: 0.9rem; line-height: 1.4; color: var(--muted); }
    .card-avisos .acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .card-avisos button, .btn-avisos { font: inherit; font-size: 0.88rem; font-weight: 600; border-radius: 999px; padding: 0.5rem 1.1rem; cursor: pointer; border: 1px solid var(--teal); }
    .card-avisos .sim { background: var(--teal); color: #fff; }
    .card-avisos .nao, .btn-avisos { background: transparent; color: var(--teal); }
    .btn-avisos { display: block; margin: 0.75rem auto; }
    .dica-avisos { text-align: center; font-size: 0.78rem; color: var(--muted); margin: 0.75rem 1rem; }

    /* Selecao de parcelas DESATIVADA (SELECAO_PARCELAS_ATIVA = false no JS).
       O codigo continua no arquivo; para religar, mude a chave para true. */
    body.sem-selecao .marcador,
    body.sem-selecao .acoes-categoria,
    body.sem-selecao .barra-selecao,
    body.sem-selecao #btn-copia-cola,
    body.sem-selecao #dica-pix { display: none !important; }
    body.sem-selecao .linha-wrap .linha-parcela { padding-left: 0.9rem; }

    .card-iphone { margin: 1rem 0; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--card-line); border-left: 4px solid var(--wine); border-radius: var(--radius); box-shadow: var(--shadow); }
    .card-iphone strong { display: block; font-size: 1rem; color: var(--ink); margin-bottom: 0.2rem; }
    .card-iphone p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--muted); line-height: 1.4; }
    .card-iphone ol { margin: 0 0 0.75rem; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.55; color: var(--ink); }
    .card-iphone button { font: inherit; font-size: 0.88rem; font-weight: 600; border-radius: 999px; padding: 0.45rem 1.1rem; cursor: pointer; border: 1px solid var(--wine); background: transparent; color: var(--wine); }

    footer {
        text-align: center;
        font-size: 0.78rem;
        color: var(--muted);
        padding: 1.5rem 0;
    }

    @media (max-width: 380px) {
        .app { padding: 1rem 0.75rem 1.75rem; }
        .tela-login { padding: 1.75rem 1.25rem; }
    }