/* ==========================================================================
   Desktop Fixes for IPVA Parcelado Table (pt1:r1:0:tbCa)
   These rules apply by default (desktop-first)
   ========================================================================== */

/* 1. Ensure the main table container and its data wrapper take full width */
#pt1\:r1\:0\:tbCa { /* Main component DIV for Parcelado table */
    width: 100% !important;
    min-width: 100%;
    height: auto !important;
    display: block;
    box-sizing: border-box;
}


/* Modal Fundo */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}

/* Conteúdo do Modal */
.modal-content {
  background-color: #fff;
  padding: 25px 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  max-width: 480px;
  width: 90%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

/* Fechar */
#closeModal {
  float: right;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  color: #555;
}

#closeModal:hover {
  color: #000;
}

/* Títulos */
.modal h3 {
  text-align: center;
  margin-bottom: 15px;
  color: #222;
}

/* Tabela */
.modal table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 15px;
}

.modal th, .modal td {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.modal th {
  background-color: #f1f1f1;
  color: #333;
  font-weight: 600;
}

/* Total */
.modal strong {
  display: block;
  text-align: right;
  margin-top: 5px;
  font-size: 1.05rem;
  color: #111;
}

/* Botão PIX */
#gerarBtn {
  width: 100%;
  padding: 12px 0;
  margin-top: 15px;
  background: #0071e3;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

#gerarBtn:hover {
  background: #005bb5;
}

/* QR e PIX */
#qrcode {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pix-line {
  text-align: center;
  margin-top: 15px;
}

#pixCode {
  word-break: break-all;
  background: #eef3fc;
  padding: 12px;
  border-radius: 8px;
  display: block;
  font-family: monospace;
  font-size: 0.95rem;
}

#copyBtn {
  margin-top: 8px;
  padding: 8px 15px;
  border-radius: 8px;
  cursor: pointer;
  background: #28a745;
  color: #fff;
  border: none;
  transition: 0.3s;
}

#copyBtn:hover {
  background: #1e7e34;
}

#pt1\:r1\:0\:tbCa #pt1\:r1\:0\:tbCa\:\:db { /* Data body wrapper DIV */
    width: 100% !important;
    min-width: 100%;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    box-sizing: border-box;
}

/* 2. Ensure the inner table itself uses available space and has auto layout for desktop */
#pt1\:r1\:0\:tbCa #pt1\:r1\:0\:tbCa\:\:db > table.x14q {
    table-layout: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    border-spacing: 0;
    border-collapse: collapse;
}

/* 3. Desktop row separation and cell padding for "IPVA Parcelado" table */
#pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 8px;
    padding-right: 8px;
    border-bottom: 1px solid #e0e0e0;
    /* text-align: left !important; /* Already default, but can be enforced */
}

#pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o:last-child > td {
    border-bottom: none;
}

/* Hide ADF scroller/helper elements if they interfere with layout for this specific table */
#pt1\:r1\:0\:tbCa\:\:scroller,
#pt1\:r1\:0\:tbCa\:\:dataW,
#pt1\:r1\:0\:tbCa\:\:ri,
#pt1\:r1\:0\:tbCa\:\:sm,
#pt1\:r1\:0\:tbCa\:\:_afrHwdwsId {
    display: none !important;
}


/* ==========================================================================
   CSS RESPONSIVO PARA CONSULTA DE DÉBITOS DO VEÍCULO - IPVA (Layout de Cards)
   ==========================================================================
*/

@media (max-width: 992px) {

    /* General Mobile Styles for Data Presentation */
    #pt1\:r1\:0\:j_idt14 .x23r label { font-size: 20px; line-height: 1.3; white-space: normal; }
    #pt1\:r1\:0\:pfl1 table tbody tr,
    #pt1\:r1\:0\:pfl2 table tbody tr,
    #pt1\:r1\:0\:pfl3 table tbody tr,
    #pt1\:r1\:0\:pfl4 table tbody tr { display: flex; flex-direction: column; }
    #pt1\:r1\:0\:pfl1 table tbody tr td,
    #pt1\:r1\:0\:pfl2 table tbody tr td,
    #pt1\:r1\:0\:pfl3 table tbody tr td,
    #pt1\:r1\:0\:pfl4 table tbody tr td { width: 100% !important; padding-left: 5px; padding-right: 5px; margin-bottom: 15px; box-sizing: border-box; }
    .x253, .x24d { font-size: 14px; line-height: 1.4; }
    .x253 { margin-bottom: 3px; }
    #pt1\:r1\:1\:pgl28 .x23x { font-size: 18px; }

    /* Mobile Styles for Cota Única Header */
    #pt1\:r1\:0\:pgl20 { display: flex; flex-direction: column; align-items: flex-start; }
    #pt1\:r1\:0\:pgl20 > tbody > tr > td:first-child { margin-bottom: 10px; width: 100%; padding-left: 5px; }
    #pt1\:r1\:0\:ot32 { font-size: 17px; }
    #pt1\:r1\:0\:pgl21 { width: 100%; padding-bottom: 10px; margin-left: 5px; }
    #pt1\:r1\:0\:pgl21 > tbody > tr { display: flex; flex-direction: column; width: 100%; }
    #pt1\:r1\:0\:pgl21 > tbody > tr > td { width: 100%; margin-bottom: 8px; }
    #pt1\:r1\:0\:pgl22, #pt1\:r1\:0\:pgl23 { text-align: left; padding-left: 0; padding-right: 0; }
    #pt1\:r1\:0\:s11, #pt1\:r1\:0\:s12 { display: none; }

    /* Mobile Styles for Parcelado Header */
    #pt1\:r1\:0\:ot39 { font-size: 17px; padding-left: 5px; }


    /* ----- TABELAS DE DÉBITO: TRANSFORMAR EM CARDS ----- */

    /* Ocultar os cabeçalhos originais das tabelas */
    #pt1\:r1\:0\:tbCu #pt1\:r1\:0\:tbCu\:\:ch,
    #pt1\:r1\:0\:tbCa #pt1\:r1\:0\:tbCa\:\:ch {
        display: none !important;
    }

    /* Hide <colgroup> and <col> on mobile as they interfere with card layout */
    #pt1\:r1\:0\:tbCu table.x14q colgroup,
    #pt1\:r1\:0\:tbCu table.x14q col,
    #pt1\:r1\:0\:tbCa table.x14q colgroup,
    #pt1\:r1\:0\:tbCa table.x14q col {
        display: none !important;
        width: auto !important; /* Just in case */
    }

    /* Ensure inner tables use auto layout and fill their containers */
    #pt1\:r1\:0\:tbCu table.x14q,
    #pt1\:r1\:0\:tbCa table.x14q {
        table-layout: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse; /* Good practice */
        border-spacing: 0;
    }

    /* Center the main table containers and give them a max-width */
    #pt1\:r1\:0\:tbCu,  /* Cota Unica table container */
    #pt1\:r1\:0\:tbCa {  /* Parcelado table container */
        display: block;
        height: auto !important;
        overflow: visible !important;
        margin-left: auto;     /* Center the block */
        margin-right: auto;    /* Center the block */
        max-width: 90%;      /* Adjust as needed, e.g., 450px or 95% for smaller screens */
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
    }

    /* Ensure ::db wrappers fill their (now centered and max-width) parent */
    #pt1\:r1\:0\:tbCu #pt1\:r1\:0\:tbCu\:\:db,
    #pt1\:r1\:0\:tbCa #pt1\:r1\:0\:tbCa\:\:db {
        display: block;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Ensure #linhas-... (tbody) takes full width of its ::db parent */
    #pt1\:r1\:0\:tbCu #linhas-cota-unica,
    #pt1\:r1\:0\:tbCa #linhas-parcelado {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Estilo de cada "card" (originalmente uma <tr>) */
   #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o,
   #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o {
       display: block;
       border: 1px solid #ccc;
       border-radius: 8px;
       margin-bottom: 20px; /* Space BETWEEN cards */
       padding: 15px;       /* Uniform padding for the card's content area */
       background-color: #fff;
       box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
       width: 100% !important; /* Card takes full width of its parent (#linhas-...) */
       box-sizing: border-box;
   }

    /* Estilo de cada item dentro do card (originalmente uma <td>) */
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td,
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td {
        display: block;
        padding: 10px 0;
        border-bottom: 1px dashed #e0e0e0;
        width: 100% !important;
        text-align: left !important;
        box-sizing: border-box;
    }

    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td:last-child,
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td:last-child {
        border-bottom: none;
    }

    /* Conteúdo do label injetado */
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td::before,
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #555;
        display: block;
        margin-bottom: 4px;
        font-size: 13px;
    }

    /* Conteúdo do valor */
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td .x221,
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td .x221 {
        text-align: left;
        display: block;
    }

    /* Styles for regular text values (.x24k or non-button .x24w) inside cards */
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td .x221 > .x24k, /* Targets direct child .x24k spans */
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td .x221 > .x24k, /* Targets direct child .x24k spans */
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td .x221 > span.x24w, /* Targets span.x24w if .x24w is not on the button itself */
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td .x221 > span.x24w { /* Targets span.x24w */
        font-size: 15px;
        color: #101010; /* Black for regular text */
        font-weight: normal;
    }

    /* Specific styles for the button.x24w within the cards */
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td .x221 button.x24w,
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td .x221 button.x24w {
        font-size: 14px;                /* Or your preferred button font size for mobile, app.css default is 14px */
        color: #FFFFFF !important;      /* FORCE White text */
        font-weight: bold !important;    /* FORCE Bold text */
        background-color: #005394;      /* Ensure blue background from app.css .h6-background-blue */
        border-radius: 5px;             /* Ensure border-radius from app.css */
        padding: 8px 15px;              /* Mobile specific padding for better touch area */
        text-align: center;
        display: block;                 /* Make button take full width of its container in the card */
        width: 100%;
        box-sizing: border-box;
        border: none;                   /* Remove default browser button borders for cleaner look */
        line-height: normal;            /* From app.css */
        text-decoration: none;          /* Remove underline if any from default button styles */
    }


    /* --- Labels específicos para a Tabela de Cota Única --- */
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr > td:nth-of-type(1)::before { content: "Exercício:"; }
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr > td:nth-of-type(2)::before { content: "Vencimento:"; }
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr > td:nth-of-type(3)::before { content: "IPVA:"; }
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr > td:nth-of-type(4)::before { content: "Multa:"; }
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr > td:nth-of-type(5)::before { content: "Desconto:"; }
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr > td:nth-of-type(6)::before { content: "Juros:"; }
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr > td:nth-of-type(7)::before { content: "Total a Pagar:"; }

    /* --- Labels específicos para a Tabela Parcelada --- */
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr > td:nth-of-type(1)::before { content: "Exercício:"; }
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr > td:nth-of-type(2)::before { content: "Vencimento:"; }
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr > td:nth-of-type(3)::before { content: "Cotas:"; }
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr > td:nth-of-type(4)::before { content: "IPVA:"; }
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr > td:nth-of-type(5)::before { content: "Multa:"; }
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr > td:nth-of-type(6)::before { content: "Juros:"; }
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr > td:nth-of-type(7)::before { content: "Total a Pagar:"; }


    .x24w { /* Button style */
        padding: 8px 10px;
        font-size: 13px;
        min-width: 90px;
        text-align: center;
        display: inline-block; /* Keep as inline-block for button behavior */
        width: auto; /* Allow button to size to content or min-width */
    }

    /* Hide ADF scroller/helper elements */
    #pt1\:r1\:0\:tbCu\:\:scroller, #pt1\:r1\:0\:tbCu\:\:dataW, #pt1\:r1\:0\:tbCu\:\:ri, #pt1\:r1\:0\:tbCu\:\:sm,
    #pt1\:r1\:0\:tbCa\:\:scroller, #pt1\:r1\:0\:tbCa\:\:dataW, #pt1\:r1\:0\:tbCa\:\:ri, #pt1\:r1\:0\:tbCa\:\:sm,
    #pt1\:r1\:0\:tbCu\:\:_afrHwdwsId, #pt1\:r1\:0\:tbCa\:\:_afrHwdwsId {
        display: none !important;
    }


    /* ----- INFORMAÇÕES AO CONTRIBUINTE ----- */
    #pt1\:r1\:0\:pgl39 .x24e { font-size: 17px; }
    #pt1\:r1\:0\:pgl40 td,
    #pt1\:r1\:0\:pgl41 td,
    #pt1\:r1\:0\:pgl45 td,
    #pt1\:r1\:0\:pgl46 td,
    #pt1\:r1\:0\:pgl50 td {
        display: block; width: 100%; padding-bottom: 5px;
    }
    #pt1\:r1\:0\:pgl40 td:first-child,
    #pt1\:r1\:0\:pgl41 td:first-child,
    #pt1\:r1\:0\:pgl45 td:first-child,
    #pt1\:r1\:0\:pgl46 td:first-child,
    #pt1\:r1\:0\:pgl50 td:first-child {
        padding-bottom: 2px; font-weight: bold;
    }
    #pt1\:r1\:0\:pgl40 img, #pt1\:r1\:0\:pgl41 img, #pt1\:r1\:0\:pgl45 img, #pt1\:r1\:0\:pgl46 img, #pt1\:r1\:0\:pgl50 img {
        display: none;
    }
    #pt1\:r1\:0\:pgl46 .xgn { display: inline-block; word-break: break-all; }

} /* --- Fim do @media (max-width: 992px) --- */


/* --- Breakpoint para celulares menores (ajustes mais finos, opcional) --- */
@media (max-width: 600px) {
    #pt1\:r1\:0\:j_idt14 .x23r label { font-size: 18px; }
    #pt1\:r1\:0\:ot32, #pt1\:r1\:0\:ot39 { font-size: 16px; }

    /* Adjust card container max-width for very small screens if needed */
    #pt1\:r1\:0\:tbCu,
    #pt1\:r1\:0\:tbCa {
        max-width: 95%; /* Or even closer to 100% if preferred */
    }

    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td::before,
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td::before {
        min-width: auto;
        font-size: 12px;
        margin-bottom: 2px;
    }
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td .x221 .x24k,
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td .x221 .x24k,
    #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td .x221 .x24w,
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td .x221 .x24w {
        font-size: 14px;
    }
     #pt1\:r1\:0\:tbCu #linhas-cota-unica > tr.x14o > td,
    #pt1\:r1\:0\:tbCa #linhas-parcelado > tr.x14o > td {
        padding: 6px 0;
    }
    .x24k, .x24m, .x253, .x24d { font-size: 13px; }
    #pt1\:r1\:1\:pgl28 .x23x { font-size: 17px; }
    #pt1\:r1\:0\:pgl39 .x24e { font-size: 16px; }
} /* --- Fim do @media (max-width: 600px) --- */