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

body{
   font-family:'Segoe UI',Tahoma,sans-serif;
   background:#f1f5f9;
   color:#1e293b;
   min-height:100vh;
}

/* =========================
   CONTENEDOR GENERAL
========================= */

.main-wrapper{
   width:92%;
   max-width:1000px;
   margin:40px auto;
}

/* =========================
   HEADER
========================= */

.top-header{
   background:linear-gradient(135deg,#003b73,#005ea6);
   border-radius:18px;
   padding:30px;
   color:white;
   box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.logo-area{
   display:flex;
   align-items:center;
   gap:20px;
}

.logo-circle{
   width:70px;
   height:70px;
   border-radius:50%;
   background:rgba(255,255,255,0.12);
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:34px;
   backdrop-filter:blur(4px);
}

.top-header h1{
   font-size:32px;
   font-weight:700;
   margin-bottom:6px;
}

.top-header p{
   opacity:0.9;
   font-size:15px;
}

/* =========================
   TARJETA PRINCIPAL
========================= */

.content-card{
   background:white;
   margin-top:25px;
   border-radius:18px;
   padding:35px;
   box-shadow:0 8px 28px rgba(0,0,0,0.06);
}

/* =========================
   INTRO
========================= */

.section-intro{
   margin-bottom:35px;
}

.section-intro h2{
   font-size:24px;
   color:#003b73;
   margin-bottom:12px;
}

.section-intro p{
   line-height:1.6;
   color:#475569;
   font-size:15px;
}

/* =========================
   FORMULARIOS
========================= */

.form-card{
   border:1px solid #e2e8f0;
   border-radius:16px;
   padding:25px;
   background:#ffffff;
   transition:0.3s ease;
}

.form-card:hover{
   box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

.card-header{
   font-size:18px;
   font-weight:600;
   color:#003b73;
   margin-bottom:25px;
   padding-bottom:12px;
   border-bottom:1px solid #e2e8f0;
}

/* =========================
   CAMPOS
========================= */

.form-group{
   margin-bottom:22px;
}

.form-group label{
   display:block;
   margin-bottom:10px;
   font-size:14px;
   font-weight:600;
   color:#334155;
}

.form-group input{
   width:100%;
   padding:14px 16px;
   border:1px solid #cbd5e1;
   border-radius:10px;
   font-size:15px;
   transition:0.25s ease;
   background:#f8fafc;
}

.form-group input:focus{
   outline:none;
   border-color:#005ea6;
   background:white;
   box-shadow:0 0 0 4px rgba(0,94,166,0.12);
}

.form-group small{
   display:block;
   margin-top:8px;
   color:#64748b;
   font-size:12px;
}

/* =========================
   BOTONES
========================= */

.primary-btn{
   background:linear-gradient(135deg,#005ea6,#0078d4);
   color:white;
   border:none;
   padding:14px 22px;
   border-radius:10px;
   font-size:14px;
   font-weight:600;
   cursor:pointer;
   transition:0.25s ease;
   min-width:220px;
   box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.primary-btn:hover{
   transform:translateY(-2px);
   opacity:0.96;
}

.primary-btn:active{
   transform:scale(0.98);
}

/* =========================
   DIVISOR
========================= */

.divider{
   text-align:center;
   margin:28px 0;
   font-size:24px;
   font-weight:700;
   color:#005ea6;
}

/* =========================
   FOOTER
========================= */

.footer{
   margin-top:22px;
   text-align:center;
   font-size:13px;
   color:#64748b;
   padding:18px;
}

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

@media(max-width:768px){

   .main-wrapper{
      width:95%;
      margin:20px auto;
   }

   .top-header{
      padding:22px;
   }

   .logo-area{
      flex-direction:column;
      align-items:flex-start;
   }

   .top-header h1{
      font-size:26px;
   }

   .content-card{
      padding:20px;
   }

   .primary-btn{
      width:100%;
   }

}
/* =========================
   TABLAS MODERNAS
========================= */

.table-container{
   width:100%;
   overflow-x:auto;
   margin-top:25px;
}

.modern-table{
   width:100%;
   border-collapse:collapse;
   background:white;
   border-radius:16px;
   overflow:hidden;
   box-shadow:0 8px 24px rgba(0,0,0,0.06);
}

.modern-table thead{
   background:linear-gradient(135deg,#003b73,#005ea6);
   color:white;
}

.modern-table th{
   padding:16px 14px;
   font-size:14px;
   text-align:center;
   font-weight:600;
}

.modern-table td{
   padding:14px 12px;
   border-bottom:1px solid #e2e8f0;
   font-size:13px;
   color:#334155;
   text-align:center;
}

.modern-table tbody tr:hover{
   background:#f8fafc;
}

.table-actions{
   margin-top:30px;
   text-align:center;
}

.alert-error{
   background:#fee2e2;
   border:1px solid #fecaca;
   color:#991b1b;
   padding:18px;
   border-radius:12px;
   margin-top:20px;
   font-size:15px;
   font-weight:600;
}

/* =========================
   SUCCESS 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;
}

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

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

.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;
}

.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;
}
/* =========================
   WOMPI MODAL
========================= */

.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);
}

.wompi-modal-overlay{
   display:none;
   position:fixed;
   z-index:9999;
   left:0;
   top:0;
   width:100%;
   height:100%;
   background:rgba(0,0,0,0.55);
   justify-content:center;
   align-items:center;
   padding:20px;
}

.wompi-modal{
   background:white;
   width:100%;
   max-width:520px;
   border-radius:20px;
   overflow:hidden;
   animation:wompiFade 0.25s ease;
   box-shadow:0 18px 45px rgba(0,0,0,0.18);
}

@keyframes wompiFade{

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

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

}

.wompi-modal-header{
   background:linear-gradient(135deg,#003b73,#005ea6);
   color:white;
   padding:22px;
   font-size:20px;
   font-weight:700;
}

.wompi-modal-content{
   padding:28px;
   color:#334155;
   line-height:1.7;
   font-size:15px;
}

.wompi-modal-content ul{
   margin-top:15px;
   margin-bottom:15px;
   padding-left:20px;
}

.wompi-modal-actions{
   display:flex;
   justify-content:flex-end;
   gap:12px;
   padding:20px 28px 28px 28px;
}

.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;
}
/* =========================
   BOTÓN DESCARGAR 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;
}
/* =========================
   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;
}
/* =========================
   VALIDACION PYS
========================= */

.validation-table{
   margin-top:28px;
   border:1px solid #e2e8f0;
   border-radius:16px;
   overflow:hidden;
   background:#ffffff;
}

.validation-item{
   display:flex;
   border-bottom:1px solid #e2e8f0;
}

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

.validation-label{
   width:240px;
   background:#f8fafc;
   padding:18px 22px;
   font-weight:700;
   color:#0f172a;
   border-right:1px solid #e2e8f0;
}

.validation-value{
   flex:1;
   padding:18px 22px;
   color:#334155;
   word-break:break-word;
}

@media (max-width:768px){

   .validation-item{
      flex-direction:column;
   }

   .validation-label{
      width:100%;
      border-right:none;
      border-bottom:1px solid #e2e8f0;
   }

}

.header-content{
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap:20px;
   width:100%;
}

.header-shield img{
   width:200px;
   height:auto;
   object-fit:contain;
   filter:drop-shadow(0 4px 10px rgba(0,0,0,.15));
}

@media (max-width:768px){

   .header-content{
      flex-direction:column;
      text-align:center;
   }

   .header-shield img{
      width:72px;
   }

}

/* ESTILO MODERNO PARA SELECT */

select{
   width:100%;
   height:58px;
   padding:0 18px;
   border:1px solid #cbd5e1;
   border-radius:14px;
   background:#f8fafc;
   font-size:15px;
   color:#0f172a;
   outline:none;
   transition:all .25s ease;
   appearance:none;
   -webkit-appearance:none;
   -moz-appearance:none;

   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23475569' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23475569' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

   background-repeat:no-repeat;
   background-position:right 16px center;
   background-size:18px;
}

select:focus{
   border-color:#0d5ea8;
   background:#ffffff;
   box-shadow:0 0 0 4px rgba(13,94,168,.12);
}

.back-portal-container{
   display:flex;
   justify-content:center;
   margin-top:40px;
}

.back-portal-btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:10px;
   background:#ffffff;
   color:#0d5ea8;
   border:1px solid #cbd5e1;
   border-radius:14px;
   padding:14px 24px;
   text-decoration:none;
   font-weight:600;
   transition:.25s ease;
   box-shadow:0 6px 18px rgba(15,23,42,.05);
}

.back-portal-btn:hover{
   background:#0d5ea8;
   color:#ffffff;
   border-color:#0d5ea8;
   transform:translateY(-2px);
   box-shadow:0 10px 22px rgba(13,94,168,.18);
}

.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:640px !important;
   border-radius:22px;
   overflow:hidden;
   background:#fff !important;
}

#preview{
   background:transparent !important;
}