html,body{margin:0;padding:0;font-family:'Roboto',sans-serif;background:#fff;color:#000;}
.archivo{font-family:'Archivo',sans-serif;}
.celeste{background:#12a9dc;}
.azul{background:#2d2c69;}
.gris{background:#e4e7eb;}

.top-fecha{font-size:11px;color:#fff;text-align:right;padding:4px 8px 0 0;}
.header-main{height:92px;position:relative;}
.logo-left{position:absolute;left:14px;top:18px;height:60px;}
.logo-right{position:absolute;right:0;top:17px;height:65px;max-width:40%;}
.titulo-head{text-align:center;color:#fff;font-size:32px;line-height:92px;font-weight:800;}

.menu-bar{height:74px;color:#fff;text-align:center;font-size:16px;font-weight:700;}
.menu-item{display:inline-block;background:transparent;padding:25px 28px;height:74px;transition:.2s;}
.menu-item:hover{background:#12a9dc;}

.contenido{min-height:570px;padding:90px 15px 60px;}
.contenedor-main{max-width:1250px;margin:auto;}
.titulo-principal{text-align:center;font-size:30px;font-weight:700;margin-bottom:55px;}

.bloque-consulta{display:flex;justify-content:center;align-items:flex-start;gap:25px;}
.col-form{width:710px;}
.col-img{width:440px;}
.texto-ayuda{font-size:18px;line-height:1.35;margin-bottom:22px;}
.form-card{border:1px solid #ccd2d8;border-radius:10px;padding:25px 25px 28px;}

.predial-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;text-align:center;}
.campo-label{font-weight:700;font-size:15px;margin-bottom:6px;}
.predial-input{width:100%;height:47px;border:2px solid #d0d4da;border-radius:6px;text-align:center;font-size:20px;font-weight:700;color:#000;outline:none;}
.predial-input::placeholder{color:#b6bbc1;}
.predial-input:focus{border-color:#12a9dc;}

.turnstile-demo{width:360px;max-width:100%;margin:30px auto 15px;border:1px solid #d5d5d5;background:#fafafa;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;}
.check-demo{width:36px;height:36px;border-radius:50%;background:#2c9a58;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:26px;font-weight:bold;margin-right:10px;}
.cloud-demo{text-align:right;font-size:11px;font-weight:700;}

.btn-consultar{background:#b9ecf7;color:#fff;border:0;border-radius:7px;padding:14px 34px;font-size:20px;font-weight:700;cursor:not-allowed;opacity:.85;}
.btn-consultar.activo{background:#12a9dc;cursor:pointer;opacity:1;}
.btn-consultar.activo:hover{background:#0798c9;}

.img-codigo{width:100%;border-radius:2px;}

.resultado-wrap{max-width:1050px;margin:auto;display:none;}
.codigo-card{border:1px solid #ccd2d8;border-radius:6px;padding:22px;margin-bottom:40px;}
.codigo-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:18px;text-align:center;}
.codigo-box{border:2px solid #d0d4da;border-radius:6px;height:48px;line-height:48px;font-size:20px;font-weight:500;}

.contribuyente{background:#dfe4e8;border-radius:5px;padding:14px 18px;margin-bottom:35px;font-size:16px;}
.contribuyente strong{margin-right:20px;}

.tabla-result,.tabla-seleccion{width:100%;border-collapse:collapse;margin-bottom:70px;}
.tabla-result thead tr,.tabla-seleccion thead tr{background:#2f639b;color:#fff;}
.tabla-result th,.tabla-seleccion th{padding:16px;font-size:16px;text-align:center;}
.tabla-result th:first-child,.tabla-seleccion th:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px;}
.tabla-result th:last-child,.tabla-seleccion th:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px;}
.tabla-result td,.tabla-seleccion td{padding:14px 16px;border-bottom:1px solid #ccc;text-align:center;}
.tabla-result td:first-child{padding-left:65px;}
.tabla-seleccion td.detalle{text-align:left;font-weight:700;}
.sin-deuda{background:#fffdb0;text-align:center!important;padding:12px!important;border-bottom:0!important;}

.pagos-box{background:#fff;padding:30px 25px;margin:0 auto 40px;max-width:980px;text-align:center;}
.pagos-title{font-size:16px;margin-bottom:28px;}
.pasarelas{display:flex;justify-content:center;gap:45px;flex-wrap:wrap;}
.pasarela{width:190px;text-align:center;}
.pasarela-logo{height:40px;max-width:160px;object-fit:contain;margin-bottom:12px;}
.pagar-btn{background:#12a9dc;color:#fff;border:0;border-radius:5px;padding:12px 24px;font-weight:700;font-size:15px;box-shadow:0 4px 8px rgba(0,0,0,.25);cursor:pointer;}
.pagar-btn:hover{background:#0798c9;}
.tarjetas{display:flex;justify-content:center;gap:6px;align-items:center;margin-top:18px;}
.tarjetas img{height:20px;max-width:54px;object-fit:contain;}

.seleccion-nuvei{display:none;margin-top:10px;padding-bottom:45px;}
.seleccion-title{text-align:center;color:#2f639b;font-size:22px;font-weight:700;margin:25px 0;}
.subtotal-row{display:flex;justify-content:flex-end;gap:130px;font-weight:700;color:#2f639b;margin:-50px 20px 55px 0;}
.subtotal-row span:last-child{color:#000;font-size:18px;min-width:80px;text-align:right;}

.check-wrap{display:inline-block;position:relative;width:32px;height:32px;cursor:pointer;}
.check-wrap input{opacity:0;width:0;height:0;}
.check-ui{position:absolute;left:0;top:0;width:32px;height:32px;border:4px solid #999;border-radius:5px;background:#f5f5f5;}
.check-wrap input:checked + .check-ui::after{content:"";position:absolute;left:7px;top:1px;width:10px;height:18px;border:solid #2d7df0;border-width:0 5px 5px 0;transform:rotate(45deg);}
.check-wrap input:checked + .check-ui{background:#f5f5f5;border-color:#999;}

.total-box{text-align:center;margin-top:25px;}
.total-linea{display:flex;align-items:center;justify-content:center;gap:35px;margin-top:20px;}
.total-info{text-align:left;font-weight:700;}
.total-info small{display:block;color:#777;font-weight:500;}
.total-monto{font-size:38px;font-weight:700;}
.btn-ir-pagar{background:#b9ecf7;color:#fff;border:0;border-radius:7px;padding:15px 38px;font-size:20px;font-weight:700;cursor:not-allowed;margin-top:25px;}
.btn-ir-pagar.activo{background:#12a9dc;cursor:pointer;}
.btn-ir-pagar.activo:hover{background:#0798c9;}

.mensaje-monto{border-radius:5px;text-align:center;padding:10px 15px;margin:25px auto;max-width:940px;}
.mensaje-amarillo{background:#ffd87b;color:#000;}
.mensaje-verde{background:#91f2aa;color:#000;}
.mensaje-azul{background:#7fa2f4;color:#000;}

.info-nuvei{background:#e5e5e5;border-radius:5px;margin:70px auto 40px;padding:25px 35px;max-width:940px;font-size:14px;line-height:1.45;}
.info-nuvei p{margin:14px 0;}
.info-nuvei .i{border:1px solid #999;color:#999;border-radius:50%;font-weight:bold;width:18px;height:18px;line-height:16px;text-align:center;display:inline-block;margin-right:8px;}

.consultar-otro{text-align:center;margin-top:35px;}
.consultar-otro a{font-weight:700;text-decoration:underline;color:#000;cursor:pointer;}

.modal-overlay{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.55);overflow:auto;}
.modal-pago{background:#f5f6fb;max-width:560px;margin:20px auto;border-radius:10px;padding:30px 42px 45px;position:relative;}
.modal-logo{display:block;max-width:210px;max-height:90px;object-fit:contain;margin:0 auto 25px;}
.modal-title{text-align:center;font-size:22px;font-weight:700;margin-bottom:30px;}
.modal-title.grande{font-size:32px;}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;font-size:15px;line-height:1.45;}
.modal-grid h4{font-size:15px;text-align:center;margin:0 0 8px;font-weight:700;}
.modal-text{font-size:16px;line-height:1.45;margin-top:25px;}
.modal-actions{display:flex;justify-content:center;gap:55px;margin-top:35px;flex-wrap:wrap;}
.modal-btn{background:#12a9dc;color:white;border:0;border-radius:8px;padding:15px 28px;font-size:22px;font-weight:700;cursor:pointer;}
.modal-btn:hover{background:#0798c9;}
.modal-close{position:absolute;right:16px;top:10px;font-size:28px;cursor:pointer;color:#555;}

.modal-forma{max-width:640px;}
.modal-facturacion{max-width:620px;}
.politica-row{display:flex;align-items:center;gap:10px;font-size:13px;margin:25px 0;}
.politica-row.center{justify-content:center;}
.custom-check{width:28px;height:28px;accent-color:#12a9dc;}
.forma-actions{display:flex;justify-content:center;gap:80px;margin:25px 0 10px;flex-wrap:wrap;}
.btn-forma{min-width:190px;background:#b9ecf7;}
.tarjetas-modal{display:flex;justify-content:center;gap:180px;margin-bottom:20px;}
.tarjetas-modal img{height:22px;max-width:60px;object-fit:contain;}
.texto-diferido{text-align:center;font-size:13px;margin:15px 0;}
.bancos-modal{display:flex;justify-content:center;gap:18px;align-items:center;flex-wrap:wrap;margin-top:15px;}
.bancos-modal img{height:24px;max-width:110px;object-fit:contain;}

.label-form{display:block;font-weight:700;margin-left:15px;margin-top:8px;}
.row-identificacion{display:flex;gap:15px;margin-bottom:5px;}
.input-form{height:45px;border:2px solid #d9dde4;border-radius:6px;font-size:18px;padding:0 14px;background:#fff;}
.input-form.full{width:100%;box-sizing:border-box;}
.select-form{width:135px;}

.loading-overlay{
    display:none;
    position:fixed;
    z-index:10000;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.70);
    align-items:center;
    justify-content:center;
    text-align:center;
}

.loading-content{
    color:#fff;
    font-size:22px;
    font-weight:700;
}

.loading-logo{
    width:120px;
    opacity:.75;
    display:block;
    margin:0 auto 12px;
}

.footer-top{padding:15px 0;}
.footer-logos{max-width:500px;width:100%;}
.footer-copy{color:#fff;font-size:14px;text-align:center;padding:12px 0;}
.canales-title{font-weight:700;color:#2d2c69;font-size:22px;}
.canales-text{font-size:15px;color:#2d2c69;}

@media(max-width:900px){
    .top-fecha{font-size:10px;white-space:nowrap;overflow:hidden;}
    .header-main{height:245px;text-align:center;}
    .logo-left{position:relative;left:auto;top:18px;height:86px;display:block;margin:auto;}
    .titulo-head{font-size:36px;line-height:1.1;margin-top:28px;}
    .logo-right{position:relative;right:auto;top:24px;height:auto;max-width:78%;display:block;margin:auto;}
    .menu-bar{height:auto;border-top:1px solid rgba(255,255,255,.2);}
    .menu-item{height:auto;padding:24px 0;display:block;font-size:16px;}
    .contenido{padding:85px 13px 35px;}
    .titulo-principal{font-size:31px;line-height:1.5;margin-bottom:35px;}
    .bloque-consulta{display:block;}
    .col-form,.col-img{width:100%;}
    .texto-ayuda{font-size:20px;line-height:1.28;padding:0 12px;}
    .form-card{padding:28px 20px 30px;border-radius:11px;}
    .predial-grid{grid-template-columns:repeat(2,1fr);gap:30px 18px;}
    .predial-grid .numero-box{grid-column:1/3;width:48%;margin:auto;}
    .turnstile-demo{width:100%;margin-top:30px;}
    .col-img{margin-top:28px;}

    .codigo-card{padding:20px 15px;}
    .codigo-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
    .codigo-grid .numero-r{grid-column:1/3;width:48%;margin:auto;}
    .tabla-result td:first-child{padding-left:12px;}
    .tabla-result th,.tabla-result td,.tabla-seleccion th,.tabla-seleccion td{font-size:13px;padding:10px 6px;}
    .pasarelas{gap:25px;}
    .pasarela{width:100%;}
    .pagos-box{padding:25px 10px;}

    .subtotal-row{gap:20px;justify-content:space-between;margin:-50px 0 45px;padding:0 10px;}
    .total-linea{display:block;}
    .total-info{text-align:center;}
    .total-monto{margin-top:10px;font-size:36px;}
    .info-nuvei{margin-top:45px;padding:20px;font-size:13px;}

    .modal-pago{width:94%;padding:25px 25px 35px;}
    .modal-grid{grid-template-columns:1fr 1fr;font-size:14px;}
    .modal-title{font-size:20px;}
    .modal-title.grande{font-size:28px;}
    .forma-actions{gap:20px;}
    .modal-btn{width:180px;font-size:20px;}
    .tarjetas-modal{gap:80px;}
    .row-identificacion{gap:8px;}
    .select-form{width:110px;}
    .input-form{font-size:16px;}

    .footer-top{padding:10px 20px 18px;}
    .footer-logos{margin-bottom:20px;}
    .canales-text{font-size:16px;}
    .footer-copy{font-size:16px;line-height:1.35;padding:18px 20px;}
}