:root{--dian-azul-oficial:#003087;--dian-azul-claro:#0066cc;--colombia-amarillo:#fcde00;--colombia-azul:#003087;--colombia-rojo:#ce1126;--blanco-oficial:#ffffff;--gris-claro:#f8f9fa;--gris-borde:#e3e8ed;--azul-enlaces:#0066cc;--verde-exito:#28a745;--naranja-alerta:#ffc107;--rojo-error:#dc3545}*{box-sizing:border-box}body{background-color:var(--blanco-oficial);min-height:100vh;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;color:#333;margin:0;padding:0;line-height:1.6}.header-superior{background:var(--gris-claro);border-bottom:1px solid var(--gris-borde);padding:.5rem 0;font-size:.875rem}.header-superior .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.links-gobierno{display:flex;gap:1rem;align-items:center}.links-gobierno a{color:var(--dian-azul-oficial);text-decoration:none;font-weight:500;padding:.25rem .5rem;border-radius:3px;transition:background-color .2s}.links-gobierno a:hover{background-color:#e9ecef;text-decoration:underline}.accesibilidad-controles{display:flex;gap:.5rem;align-items:center}.accesibilidad-controles button{border:1px solid var(--gris-borde);background:white;color:var(--dian-azul-oficial);padding:.25rem .5rem;border-radius:3px;font-size:.75rem;cursor:pointer;transition:all .2s}.accesibilidad-controles button:hover{background:var(--dian-azul-oficial);color:white}.header-principal{background:var(--blanco-oficial);border-bottom:3px solid var(--colombia-amarillo);padding:1rem 0;box-shadow:0 2px 4px rgba(0,0,0,.1)}.header-principal .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.marca-gobierno{display:flex;align-items:center;gap:2rem}.logos-oficiales{display:flex;align-items:center;gap:1rem}.logo-dian{height:80px;width:auto}.logo-colombia,.logo-gov{height:60px;width:auto}.info-institucional h1{color:var(--dian-azul-oficial);font-size:1.8rem;font-weight:700;margin:0;letter-spacing:-.5px}.info-institucional p{color:#666;margin:.25rem 0 0 0;font-size:1rem}.redes-sociales{display:flex;gap:.75rem}.red-social{color:var(--dian-azul-oficial);font-size:1.25rem;text-decoration:none;transition:color .2s}.red-social:hover{color:var(--azul-enlaces)}.navegacion-principal{background:var(--dian-azul-oficial);padding:0}.navegacion-principal .container{display:flex;align-items:center}.migas-pan{background:var(--gris-claro);padding:.75rem 0;border-bottom:1px solid var(--gris-borde);font-size:.9rem}.migas-pan .container{display:flex;align-items:center}.breadcrumb{background:none;padding:0;margin:0;display:flex;align-items:center;flex-wrap:wrap}.breadcrumb-item{color:#666}.breadcrumb-item a{color:var(--azul-enlaces);text-decoration:none}.breadcrumb-item a:hover{text-decoration:underline}.breadcrumb-item+.breadcrumb-item::before{content:">";margin:0 .5rem;color:#999}.breadcrumb-item.active{color:var(--dian-azul-oficial);font-weight:500}.contenido-principal{max-width:1200px;margin:2rem auto;padding:0 1rem}.tarjeta-sistema{background:white;border:1px solid var(--gris-borde);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);overflow:hidden;margin-bottom:2rem}.encabezado-tarjeta{background:linear-gradient(135deg,var(--dian-azul-oficial) 0%,var(--azul-enlaces) 100%);color:white;padding:2.5rem 2rem;text-align:center;position:relative}.encabezado-tarjeta::after{content:"";position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--colombia-amarillo)}.titulo-sistema{font-size:2.2rem;font-weight:700;margin:0 0 .5rem 0;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.subtitulo-sistema{font-size:1.2rem;margin:0;opacity:.95;font-weight:400}.seccion-formulario{padding:2.5rem}.titulo-seccion{color:var(--dian-azul-oficial);font-size:1.4rem;font-weight:600;margin:0 0 1.5rem 0;padding-bottom:.75rem;border-bottom:3px solid var(--colombia-amarillo);display:flex;align-items:center;gap:.75rem}.estado-sistema{padding:1.25rem;border-radius:8px;margin-bottom:2rem;border:2px solid;display:flex;align-items:center;gap:.75rem;font-weight:500}.estado-online{background:rgba(40,167,69,.1);border-color:var(--verde-exito);color:var(--verde-exito)}.estado-procesando{background:rgba(255,193,7,.1);border-color:var(--naranja-alerta);color:#856404}.estado-error{background:rgba(220,53,69,.1);border-color:var(--rojo-error);color:var(--rojo-error)}.pulso{animation:pulso 2s infinite}@keyframes pulso{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}.grupo-campos{background:#fbfcfd;border:1px solid var(--gris-borde);border-radius:8px;padding:2rem;margin-bottom:2rem}.form-label{color:#495057;font-weight:600;margin-bottom:.75rem;display:block;font-size:.95rem}.form-control,.form-select{border:2px solid var(--gris-borde);border-radius:6px;padding:.875rem;font-size:1rem;transition:all .3s ease;background:white}.form-control:focus,.form-select:focus{border-color:var(--azul-enlaces);box-shadow:0 0 0 .2rem rgba(0,102,204,.15);outline:none}.form-control:invalid{border-color:var(--rojo-error)}.input-group-text{background:var(--gris-claro);border:2px solid var(--gris-borde);color:var(--dian-azul-oficial);font-weight:600}.resumen-pago{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border:2px solid var(--gris-borde);border-radius:8px;padding:2rem;margin:2rem 0}.botones-accion{text-align:center;margin:2.5rem 0}.btn-pago-principal{background:linear-gradient(135deg,var(--verde-exito) 0%,#218838 100%);border:none;border-radius:6px;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;color:white;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;box-shadow:0 4px 12px rgba(40,167,69,.3)}.btn-pago-principal:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(40,167,69,.4)}.btn-pago-principal:disabled{background:#6c757d;transform:none;box-shadow:none;cursor:not-allowed}.btn-secundario{background:white;border:2px solid var(--gris-borde);color:var(--dian-azul-oficial);padding:1rem 2rem;font-weight:600;border-radius:6px;transition:all .3s ease}.btn-secundario:hover{background:var(--gris-claro);border-color:var(--azul-enlaces)}.historial-transacciones{max-height:350px;overflow-y:auto;border:1px solid var(--gris-borde);border-radius:8px}.item-transaccion{padding:1.25rem;border-bottom:1px solid var(--gris-borde);transition:background-color .3s ease}.item-transaccion:hover{background-color:#f8f9fa}.item-transaccion:last-child{border-bottom:none}.badge-estado{padding:.5rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600;text-transform:uppercase}.badge-exitosa{background:var(--verde-exito);color:white}.badge-fallida{background:var(--rojo-error);color:white}.valor-pago{font-size:1.5rem;font-weight:700;color:var(--dian-azul-oficial)}.footer-oficial{background:var(--dian-azul-oficial);color:white;padding:3rem 0 1rem 0;margin-top:4rem}.seccion-footer{margin-bottom:2rem}.titulo-footer{color:var(--colombia-amarillo);font-weight:600;margin-bottom:1.5rem;font-size:1.1rem}.enlace-footer{color:#e9ecef;text-decoration:none;line-height:2;display:block;transition:color .2s}.enlace-footer:hover{color:white;text-decoration:underline}.footer-inferior{border-top:1px solid rgba(255,255,255,.2);padding-top:1.5rem;text-align:center;font-size:.9rem}.footer-inferior p{margin:.5rem 0;opacity:.9}@media (max-width:768px){.marca-gobierno{flex-direction:column;text-align:center;gap:1rem}.info-institucional h1{font-size:1.4rem}.titulo-sistema{font-size:1.8rem}.seccion-formulario{padding:1.5rem}.grupo-campos{padding:1.5rem}.botones-accion .btn-pago-principal,.botones-accion .btn-secundario{width:100%;margin-bottom:1rem}.redes-sociales{justify-content:center}}.mensaje-no-transacciones{text-align:center;padding:3rem 2rem;color:#666;font-style:italic}