/* =========================
   MENSAJES DE ÉXITO Y PDF
========================= */

.success-box{
   background:white;
   border-radius:18px;
   padding:30px;
   box-shadow:0 8px 28px rgba(0,0,0,0.06);
}

.success-title{
   font-size:24px;
   font-weight:700;
   color:#166534;
   margin-bottom:12px;
}

.success-text{
   color:#475569;
   margin-bottom:25px;
}

.pdf-preview{
   margin-top:25px;
   margin-bottom:25px;
   display:flex;
   justify-content:center;
}

/* =========================
   DESCARGA DE DOCUMENTOS
========================= */

.download-area{
   margin-top:25px;
   margin-bottom:30px;
   text-align:center;
}

.download-area .primary-btn{
   text-decoration:none;
   display:inline-block;
}

/* =========================
   ADVERTENCIAS Y CARTERAS
========================= */

.warning-box{
   background:#fff7ed;
   border:1px solid #fdba74;
   color:#9a3412;
   padding:20px;
   border-radius:14px;
   margin-bottom:25px;
}

.warning-title{
   font-size:18px;
   font-weight:700;
   margin-bottom:10px;
}

/* =========================
   SELECCIÓN DE AÑOS
========================= */

.payment-box,
.years-box{
   margin-top:35px;
   padding:25px;
   border:1px solid #e2e8f0;
   border-radius:16px;
   background:#f8fafc;
}

.payment-box h3,
.years-box h3{
   margin-bottom:10px;
   color:#003b73;
}

.years-grid{
   display:grid;
   grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
   gap:12px;
   margin-top:20px;
}

.year-item{
   background:white;
   border:1px solid #cbd5e1;
   border-radius:10px;
   padding:12px;
   display:flex;
   align-items:center;
   gap:10px;
}

/* =========================
   INTEGRACIÓN WOMPI
========================= */

.wompi-button-container{
   text-align:center;
   margin-top:20px;
}

.wompi-image-btn{
   max-width:280px;
   cursor:pointer;
   transition:0.25s ease;
}

.wompi-image-btn:hover{
   transform:scale(1.03);
}

@keyframes wompiFade{

   from{
      opacity:0;
      transform:translateY(15px);
   }

   to{
      opacity:1;
      transform:translateY(0);
   }

}
.secondary-btn{
   background:#e2e8f0;
   color:#1e293b;
   border:none;
   padding:14px 20px;
   border-radius:10px;
   cursor:pointer;
   font-weight:600;
   transition:0.25s ease;
}

.secondary-btn:hover{
   background:#cbd5e1;
}

/* =========================
   LOGO WOMPI
========================= */

.wompi-brand
{
   text-align:center;
   margin-bottom:15px;
}

.wompi-brand img
{
   max-width:140px;
   height:auto;
}

/* =========================
   VISOR PDF
========================= */

.download-area .primary-btn{
   color:#ffffff !important;
   text-decoration:none;
   font-weight:600;
}

.download-area .primary-btn:visited{
   color:#ffffff !important;
}

.download-area .primary-btn:hover{
   color:#ffffff !important;
}

/* =========================
   GENERACIÓN PAZ Y SALVO
========================= */

.pazsalvo-area{
   margin-top:25px;
   padding-top:20px;
   border-top:1px solid rgba(153,27,27,0.15);
   text-align:center;
}

.pazsalvo-area p{
   margin-bottom:18px;
   color:#7f1d1d;
   font-size:15px;
   line-height:1.6;
}

.pazsalvo-btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   min-width:240px;
   text-decoration:none;
   color:#ffffff !important;
}

.pazsalvo-btn:hover{
   color:#ffffff !important;
}

/* =========================
   VISOR PDF
========================= */

.pdf-preview{
   border-radius:22px;
   overflow:hidden;
   box-shadow:0 12px 30px rgba(0,0,0,.12);
   border:1px solid #e5e7eb;
   background:#fff;
}

.pdfobject-container{
   height:646px !important;
   border-radius:22px;
   overflow:hidden;
   background:#fff !important;
}

#preview{
   background:transparent !important;
}

.header-shield{
   display:flex;
   align-items:center;
   justify-content:center;
}

/* =========================
   NUEVO ESTILO POSITIVO
========================= */

.alert-success-clean{
   background:linear-gradient(135deg,#ecfdf5,#f0fdf4);
   border:1px solid #bbf7d0;
   border-radius:22px;
   padding:35px;
   text-align:center;
   box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.alert-success-icon{
   font-size:62px;
   margin-bottom:18px;
}

.alert-success-title{
   font-size:28px;
   font-weight:700;
   color:#166534;
   margin-bottom:12px;
}

.alert-success-text{
   color:#166534;
   font-size:16px;
   line-height:1.7;
   margin-bottom:28px;
}

.alert-success-sub{
   color:#475569;
   margin-bottom:30px;
   line-height:1.7;
}

.pazsalvo-btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:10px;
}


/* =========================
   NUEVO PANEL DE PAGO
========================= */

.recibo-layout{
   display:flex;
   gap:30px;
   align-items:flex-start;
   margin-top:25px;
}

.recibo-pdf{
   flex:1;
   min-width:0;
}

.recibo-sidebar{
   width:340px;
   background:#ffffff;
   border-radius:22px;
   padding:28px;
   box-shadow:0 10px 30px rgba(0,0,0,.08);
   position:sticky;
   top:20px;
}

.sidebar-title{
   font-size:28px;
   font-weight:700;
   color:#0a4f93;
   margin-bottom:25px;
}

.sidebar-label{
   color:#64748b;
   font-size:15px;
   margin-bottom:8px;
}

.sidebar-value{
   font-size:42px;
   font-weight:800;
   color:#0a4f93;
   line-height:1.1;
   margin-bottom:10px;
}

.sidebar-currency{
   color:#64748b;
   font-size:14px;
   margin-bottom:25px;
}

.sidebar-info{
   background:#eff6ff;
   border:1px solid #bfdbfe;
   padding:16px;
   border-radius:14px;
   color:#1e40af;
   line-height:1.6;
   font-size:14px;
   margin-bottom:30px;
}

.sidebar-reference-box{
   background:#f8fafc;
   border:1px solid #dbeafe;
   border-radius:16px;
   padding:18px;
   margin-bottom:24px;
}

.ref-item{
   display:flex;
   justify-content:space-between;
   align-items:flex-start;
   padding:10px 0;
   border-bottom:1px solid #e5e7eb;
}

.ref-item:last-child{
   border-bottom:none;
}

.ref-label{
   color:#64748b;
   font-size:14px;
   font-weight:600;
}

.ref-value{
   color:#0f172a;
   font-size:15px;
   font-weight:700;

   max-width:160px;
   text-align:right;

   word-break:break-all;
   overflow-wrap:anywhere;
   line-height:1.4;
}

.sidebar-divider{
   height:1px;
   background:#e5e7eb;
   margin:25px 0;
}

.sidebar-payment-title{
   font-size:20px;
   font-weight:700;
   color:#111827;
   margin-bottom:12px;
}

.sidebar-payment-text{
   font-size:14px;
   color:#6b7280;
   line-height:1.6;
   margin-bottom:22px;
}

.wompi-pay-btn{
   width:100%;
   border:none;
   border-radius:16px;
   padding:18px;
   background:linear-gradient(135deg,#005bea,#2563eb);
   color:#ffffff;
   font-size:20px;
   font-weight:700;
   cursor:pointer;
   transition:.25s;
}

.wompi-pay-btn:hover{
   transform:translateY(-2px);
   box-shadow:0 10px 25px rgba(37,99,235,.25);
}

.sidebar-secure{
   text-align:center;
   margin-top:18px;
   color:#16a34a;
   font-size:14px;
   font-weight:600;
}

/* =====================================
     RESPONSIVE PREDIAL
===================================== */

@media(max-width:1100px){

   .recibo-layout{
      flex-direction:column;
   }

   .recibo-sidebar{
      width:100%;
      position:relative;
      top:0;
   }

   .ref-item{
      align-items:flex-start;
   }

   .ref-value{
      max-width:140px;
      font-size:13px;
   }

}

@media(max-width:900px){

   .predial-options{
      display:grid !important;
      grid-template-columns:1fr !important;
   }

}

.years-row td{
   background:#f8fafc;
   border-top:none;
}

.years-hidden{
   display:none;
}

.years-container{
   display:flex;
   flex-wrap:wrap;
   gap:10px;
   padding:12px 0;
}

.year-check{
   display:flex;
   align-items:center;
   gap:6px;
   background:white;
   border:1px solid #dbeafe;
   border-radius:10px;
   padding:8px 12px;
   cursor:pointer;
   transition:.2s;
   font-size:14px;
}

.year-check:hover{
   background:#eff6ff;
   border-color:#93c5fd;
}

.year-check input{
   accent-color:#0f5aa6;
}


/* =====================================
   DISTRIBUCIÓN DE OPCIONES DE CONSULTA
===================================== */

.predial-options{

   display:grid;

   grid-template-columns:1fr 1fr;

   gap:25px;

   margin-top:30px;

   align-items:start;

}

/* =====================================
   BOTÓN VOLVER
===================================== */

.back-area{

   text-align:center;

   margin-top:35px;

}