@charset "UTF-8";

/* 1. LIMPIEZA Y TRANSPARENCIAS */
.webpayweb .login-header, 
.webpayweb .brand, 
.webpayweb .login-logo, 
.webpayweb .m-b-20 {
    background: transparent !important;
    border: none !important;
}

.webpayweb .panel, .webpayweb .panel-body, .webpayweb #content, 
.webpayweb .col-sm-12, .webpayweb .login-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. LOGO BINET ROJO (PEQUEÑO Y DESPEJADO) */
.webpayweb img[src*="binet"], 
.webpayweb .brand img, 
.webpayweb .login-logo img,
.webpayweb .login-header img {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: -140px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 50px !important; 
    max-width: 50px !important;
    height: auto !important;
    z-index: 9999 !important;
}

/* 3. FONDO DE IMAGEN */
.webpayweb .login-cover-image {
    background: url('../admin/images/login-bg/imagen-02.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
}

/* 4. TÍTULOS EN BLANCO */
.webpayweb #wpsearch::before {
    content: "PORTAL DE PAGOS";
    position: absolute;
    top: -85px;
    left: 0; right: 0;
    text-align: center;
    color: #ffffff !important;
    font-size: 24px;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    text-transform: uppercase;
}

.webpayweb #wpsearch::after {
    content: "Ejemplo: 12345678-9";
    position: absolute;
    top: -45px;
    left: 0; right: 0;
    text-align: center;
    color: #ffffff !important;
    font-size: 13px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* 5. CAJA DE BÚSQUEDA (OPACIDAD 70%) */
.webpayweb #wpsearch {
    background: rgba(255, 255, 255, 0.7) !important; 
    border-radius: 15px !important;
    padding: 25px !important;
    width: 95% !important;
    max-width: 480px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    margin: 8vh auto 15px auto !important; 
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important; 
}

/* --- RESTAURACIÓN DEL TEXTO DE AYUDA --- */
.webpayweb #wpsearch label { font-size: 0 !important; }
.webpayweb #wpsearch label::after {
    content: "Rut sin puntos y con guion";
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important; /* Un poco más oscuro para que se vea bien con el 70% */
    display: block !important;
    margin-bottom: 5px !important;
}
.webpayweb #wpsearch input { border: 1px solid #3498db !important; border-radius: 5px !important; }

/* 6. NOMBRE DEL CLIENTE EN BLANCO */
.webpayweb #content center,
.webpayweb #content center *,
.webpayweb font[color="red"],
.webpayweb b,
.webpayweb strong {
    color: #ffffff !important;
    font-size: 19px !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,1) !important;
}

/* 7. CAJA DE RESULTADOS (OPACIDAD 70%) */
.webpayweb .table-responsive {
    background: rgba(255, 255, 255, 0.7) !important;
    border-radius: 15px !important;
    padding: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    margin: 5px auto !important;
    max-width: 850px !important;
}

.webpayweb .table-responsive *, .webpayweb .table * {
    color: #333333 !important;
    text-shadow: none !important;
}

/* 8. BOTONES */
.webpayweb .btn-primary {
    background-color: #e31a1a !important;
    color: white !important;
    border-radius: 50px !important;
}

.webpayweb .btn-info, .webpayweb .btn-success, .webpayweb .table .btn {
    background-color: #ffffff !important;
    color: #e31a1a !important; 
    border: 2px solid #e31a1a !important; 
    border-radius: 50px !important;
    padding: 6px 20px !important;
}

/* 9. LIMPIEZA FINAL */
.webpayweb .text-muted,
.webpayweb p:not(.table p), 
.webpayweb span:not(.table span):not(.btn-primary span):not(center span) {
    display: none !important;
}