@media screen and (max-width: 768px) {
    * {
        box-sizing: border-box;
        max-width: 100vw;
    }

    html, body {
        font-size: 14px;
        padding: 0;
        margin: 0;
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    
    header {
        padding: 10px !important;
    }

    header p:first-child img {
        height: 18px !important;
    }

    header p:nth-child(2),
    header .ipvatitulomobile {
        font-size: 22px !important;
    }

    
    #subheader {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    
    .container {
        padding: 0 10px !important;
    }

    .custom-container {
        padding: 15px !important;
        margin: 10px 5px !important;
        border-radius: 8px !important;
    }

    
    form {
        max-width: 100% !important;
        padding: 0 !important;
    }

    form input,
    input#renavam {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px !important;
    }

    .botaoEnviar {
        margin: 15px 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .botaoEnviar button {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    .ajudarenavam,
    .tooltiptext {
        display: none !important;
    }

    
    .vehicle-data h2 {
        font-size: 18px !important;
    }

    .vehicle-data ul {
        padding: 0 !important;
        flex-direction: column !important;
    }

    .vehicle-data li {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        font-size: 13px !important;
    }

    
    .conteudo {
        overflow: visible !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }

    .table.cabecalho,
    table.cabecalho,
    .table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .table.cabecalho thead,
    .table thead {
        display: none !important;
    }

    .table.cabecalho tbody,
    #tabela-debitos {
        display: block !important;
        width: 100% !important;
    }

    .table.cabecalho tr.selectable-row,
    tr.selectable-row {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        border: 1px solid #ddd !important;
        border-left: 4px solid #327dff !important;
        border-radius: 8px !important;
        padding: 15px !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }

    .table.cabecalho td,
    tr.selectable-row td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 8px 5px !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        text-align: right !important;
        font-size: 14px !important;
        background: transparent !important;
    }

    .table.cabecalho td:last-child,
    tr.selectable-row td:last-child {
        border-bottom: none !important;
    }

    .table.cabecalho td::before,
    tr.selectable-row td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #555;
        text-align: left;
        flex-shrink: 0;
        margin-right: 15px;
    }

    
    tr.selectable-row td:first-child {
        justify-content: flex-start !important;
        padding-bottom: 10px !important;
        border-bottom: none !important;
    }

    tr.selectable-row td:first-child::before {
        content: "Selecionar" !important;
    }

    
    tr.selectable-row td:nth-child(2) {
        display: block !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        color: #333 !important;
        background: #f0f7ff !important;
        margin: -15px -15px 10px -15px !important;
        padding: 12px 15px !important;
        border-radius: 8px 8px 0 0 !important;
        border-bottom: 1px solid #e0e8f0 !important;
        text-align: left !important;
    }

    tr.selectable-row td:nth-child(2)::before {
        display: none !important;
    }

    tr.selectable-row td:nth-child(2) span {
        display: block !important;
        font-size: 11px !important;
        color: #666 !important;
        font-weight: normal !important;
        margin-top: 3px !important;
    }

    
    tr.selectable-row td:last-child {
        font-weight: 700 !important;
        font-size: 16px !important;
        color: #327dff !important;
        background: #f0f7ff !important;
        margin: 10px -15px -15px -15px !important;
        padding: 12px 15px !important;
        border-radius: 0 0 8px 8px !important;
        border-top: 1px solid #e0e8f0 !important;
    }

    
    tr.selectable-row td:nth-child(3)::before { content: "Vencimento"; }
    tr.selectable-row td:nth-child(4)::before { content: "Valor"; }
    tr.selectable-row td:nth-child(5)::before { content: "Juros"; }
    tr.selectable-row td:nth-child(6)::before { content: "Multa"; }
    tr.selectable-row td:nth-child(7)::before { content: "Descontos"; }
    tr.selectable-row td:nth-child(8)::before { content: "Valor Total"; }

    
    input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
    }

    
    .selecionarTodosDebitos {
        padding: 10px 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        height: auto !important;
    }

    .selecionarTodosDebitos label {
        margin-top: 5px !important;
        font-size: 13px !important;
    }

    
    .subtotal-total {
        text-align: center !important;
        padding: 15px !important;
    }

    .subtotal-total p {
        display: flex !important;
        justify-content: space-between !important;
        margin: 8px 0 !important;
        padding: 5px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .subtotal-total p:last-of-type {
        border-bottom: none !important;
        font-size: 18px !important;
        color: #327dff !important;
    }

    
    .pay-via-pix {
        justify-content: center !important;
        flex-direction: column !important;
    }

    .pay-via-pix .btn,
    .pagar-pix,
    button.pagar-pix {
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    
    .modal-dialog {
        margin: 10px !important;
    }

    .modal-content {
        width: 100% !important;
    }

    #modalPix .modal-body {
        padding: 15px !important;
    }

    #modalPix .headerseguralayout {
        margin-bottom: 15px !important;
    }

    #modalPix .seguralayout {
        overflow-x: hidden !important;
        overflow: visible !important;
    }

    #modalPix .seguralayout table {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }

    #modalPix .seguralayout table thead {
        display: none !important;
    }

    #modalPix .seguralayout table tbody {
        display: block !important;
        width: 100% !important;
    }

    #modalPix .seguralayout table tbody tr {
        display: block !important;
        width: 100% !important;
    }

    #modalPix .seguralayout table tbody tr td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 10px 0 !important;
        border: none !important;
    }

    
    #modalPix #imgQrCodePix {
        width: 100% !important;
        max-width: 250px !important;
        height: auto !important;
        margin: 15px auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #modalPix #imgQrCodePix canvas,
    #modalPix #imgQrCodePix img {
        max-width: 100% !important;
        height: auto !important;
    }

    
    #modalPix #pixCodigo {
        width: 100% !important;
        font-size: 11px !important;
        word-break: break-all !important;
        text-align: center !important;
        padding: 15px 10px !important;
        margin-top: 10px !important;
    }

    #modalPix .copyBtn {
        width: 100% !important;
        padding: 15px !important;
        font-size: 16px !important;
        margin-top: 10px !important;
    }

    
    #modalPix .botaoConfirmar {
        margin-top: 15px !important;
    }

    #modalPix .botaoConfirmar button {
        width: 100% !important;
        padding: 15px !important;
        font-size: 16px !important;
    }

    .modal-container .modal-content {
        width: 90% !important;
        max-width: 300px !important;
    }

    
    footer {
        padding: 15px 10px !important;
    }

    footer .container {
        flex-direction: column !important;
        text-align: center !important;
    }

    footer p {
        font-size: 12px !important;
    }
}

@media screen and (max-width: 480px) {
    header p:nth-child(2),
    header .ipvatitulomobile {
        font-size: 18px !important;
    }

    #subheader {
        font-size: 10px !important;
    }

    .custom-container {
        padding: 12px !important;
        margin: 10px 5px !important;
    }

    .table.cabecalho td,
    tr.selectable-row td {
        font-size: 13px !important;
        padding: 6px 5px !important;
    }

    tr.selectable-row td:nth-child(2) {
        font-size: 14px !important;
        padding: 10px 12px !important;
        margin: -12px -12px 8px -12px !important;
    }

    tr.selectable-row td:last-child {
        font-size: 15px !important;
        padding: 10px 12px !important;
        margin: 8px -12px -12px -12px !important;
    }

    .table.cabecalho tr.selectable-row,
    tr.selectable-row {
        padding: 12px !important;
    }
}