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

body{
    font-family:'Inter',sans-serif !important;
    background: linear-gradient(270deg, #22c55e, #06b6d4, #1d4ed8, #2563eb);
    background-size: 600% 600%;
    animation: gradientMove 10s ease infinite;
    min-height:100vh;
}
.logo-facturacion{
    display:block;
    margin: 0 auto;
    border-radius: 20px;
}
.register-page{
    display:flex !important;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}

.register-box{
    width:100%;
    max-width:520px;
}

.register-box-body{
    background:rgba(255,255,255,.10) !important;
    backdrop-filter:blur(25px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:32px;
    padding:40px;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    animation:fadeIn .6s ease;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(30px);}
    to{opacity:1; transform:translateY(0);}
}

.login-box-msg{
    color:white !important;
    text-align:center;
    font-weight:600;
}

.form-control{
    height:55px;
    border-radius:16px !important;
    border:none !important;
    padding-left:15px;
}

.btn-primary{
    height:55px;
    border-radius:16px !important;
    background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
    border:none;
    font-weight:600;
    transition:.3s;
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(37,99,235,.4);
}
.btn-img{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:#2563eb;
    color:white;
    border-radius:8px;
    padding:6px 8px;
    cursor:pointer;
    font-size:14px;
    transition:.3s;
}

.btn-img:hover{
    background:#1d4ed8;
    transform:translateY(-50%) scale(1.1);
}

#previewImg{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(0.7);
    opacity:0;
    background:white;
    padding:10px;
    border-radius:15px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    transition:.3s ease;
    z-index:9999;
}

#previewImg img{
    width:300px;
    border-radius:10px;
}

#previewImg.show{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}
.btn-mini {
    padding: 5px 8px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
}

#contenedorImagen {
    margin-top: 10px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

#contenedorImagen img {
    width: 200px;
    border-radius: 10px;
}

.mostrar {
    opacity: 1;
    transform: scale(1);
}

.oculto {
    display: none;
}
.icono-btn{
    width:20px;
    height:20px;
    object-fit:contain;
}

.btn-img{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent; /* sin fondo */
    padding:0;
    cursor:pointer;
}
p, li{
    color:white;
}
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .error-container {
            display:flex;
            justify-content:center;
            align-items:center;
            min-height:100vh;
        }

        .error-card {
            background:#fff;
            padding:40px;
            border-radius:16px;
            text-align:center;
            max-width:520px;
            width:100%;
            box-shadow:0 20px 40px rgba(0,0,0,0.2);
            animation: fadeInUp 0.6s ease-out;
        }

        .error-code {
            font-size:80px;
            font-weight:700;
            color:#f59e0b;
            animation: bounceIn 0.8s ease;
        }

        .error-icon {
            font-size:40px;
            color:#f59e0b;
            margin-bottom:10px;
            animation: pulse 1.5s infinite;
        }

        .error-title {
            font-size:24px;
            margin-bottom:10px;
        }

        .error-message {
            color:#555;
            margin-bottom:25px;
            line-height:1.6;
        }

        .brand {
            font-weight:bold;
            margin-bottom:15px;
            font-size:18px;
            color:#1d4ed8;
        }

        .error-actions .btn {
            margin:5px;
            border-radius:8px;
            transition: all 0.3s ease;
        }

        .error-actions .btn:hover {
            transform: translateY(-3px);
            box-shadow:0 8px 20px rgba(0,0,0,0.2);
        }

        @keyframes fadeInUp {
            from { opacity:0; transform:translateY(30px); }
            to { opacity:1; transform:translateY(0); }
        }

        @keyframes bounceIn {
            0% { transform:scale(0.5); opacity:0; }
            60% { transform:scale(1.2); opacity:1; }
            100% { transform:scale(1); }
        }

        @keyframes pulse {
            0% { transform:scale(1); }
            50% { transform:scale(1.15); }
            100% { transform:scale(1); }
        }
}
</style> 