/* ============================================================
   RS PRIME — LOGIN PREMIUM
   ============================================================ */

body {
    background:
        radial-gradient(circle at top left, #f5f3ef 0%, transparent 35%),
        radial-gradient(circle at bottom right, #ddd7cd 0%, transparent 30%),
        linear-gradient(135deg, #e7e6df 0%, #dcd8cf 100%);
    background-attachment: fixed;
    font-family: 'Inter', Arial, sans-serif;
    color: #282828;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation: fadeIn 0.8s ease;
    position: relative;
}

body::before {
    content: '';
    position: absolute;
    width: 160%;
    height: 160%;
    background:
        radial-gradient(
            circle at center,
            transparent 58%,
            rgba(255,255,255,0.18) 59%,
            transparent 60%
        );
    opacity: 0.6;
    pointer-events: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

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

/* ============================================================
   CARD LOGIN
   ============================================================ */

.form-signin {
    width: 400px;
    position: relative;
     padding: 24px 26px;
    border-radius: 26px;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: 0 25px 60px rgba(0,0,0,0.08), 0 10px 25px rgba(0,0,0,0.04);
    transition: all .35s ease;
}

/* ============================================================
   MODAL INFRAESTRUTURA
   ============================================================ */

#modalInfra{
    position:fixed;
    inset:0;
    background:rgba(55,55,55,0.86);
    backdrop-filter:blur(4px);
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.modalInfraBox{
    width:540px;
    max-width:100%;
    background:#f4f4f4;
    border-radius:10px;
    border:1px solid #d8d8d8;
    padding:35px;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
    font-family:Arial, Helvetica, sans-serif;
    color:#424242;
    animation:infraShow .25s ease;
}

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

.infraTitulo{
    font-size:24px;
    font-weight:bold;
    color:#2f2f2f;
    margin-bottom:22px;
}

.infraTexto{
    font-size:15px;
    line-height:1.7;
    margin-bottom:18px;
}

.infraData{
    background:#dfdfdf;
    border:1px solid #cecece;
    border-radius:6px;
    padding:15px;
    text-align:center;
    font-size:17px;
    font-weight:bold;
    color:#444;
    margin-bottom:22px;
}

.infraRodape{
    margin-top:30px;
    padding-top:18px;
    border-top:1px solid #dcdcdc;
    font-size:13px;
    color:#7c7c7c;
    line-height:1.6;
}

.btnInfra{
    width:100%;
    height:50px;
    border:none;
    border-radius:6px;
    background:#5c5c5c;
    color:white;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
    margin-top:25px;
    transition:0.2s;
}

.btnInfra:hover{
    background:#444;
}

.form-signin::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background:
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,0.25),
            transparent 70%
        );
    pointer-events: none;
}

.form-signin:hover {
    transform: translateY(-4px);
    box-shadow: 0 35px 80px rgba(0,0,0,0.10), 0 12px 28px rgba(0,0,0,0.05);
}

/* ============================================================
   LOGO
   ============================================================ */

.logo {
    width: 82%;
    margin-bottom: 5px;
    opacity: 0;
    transform: translateY(-5px);
    animation: slideIn 0.6s ease forwards;
}


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

/* ============================================================
   TÍTULO
   ============================================================ */

.titulo {
    font-size: 18px;
    font-weight: 700;
    color: #814a2f;
    margin-bottom: 10px;
    opacity: 0;
    animation: fadeUp 0.6s ease 0.2s forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* ============================================================
   INPUT GROUP
   ============================================================ */

.input-group {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

/* ============================================================
   ÍCONES
   ============================================================ */

.icon-login {
    width: 62px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px 0 0 16px !important;
    border: 1px solid rgba(180,157,130,0.40) !important;
    border-right: none !important;
    background: linear-gradient(180deg, #f7f2eb, #efe6da);
    color: #8b5e3c;
    font-size: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    transition: all .25s ease;
}

/* ============================================================
   INPUTS
   ============================================================ */

.form-control {
    height: 54px !important;
    border-radius: 0 16px 16px 0 !important;
    border: 1px solid rgba(180,157,130,0.40) !important;
    border-left: none !important;
    padding: 5px 8px !important;
    font-size: 16px !important;
    background: rgba(255,255,255,0.94);
    transition: all .25s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
    color: #4a4a4a;
}

.form-control::placeholder {
    color: #8d8d8d;
}

.form-control:focus {
    border-color: #b08a69 !important;
    background: white;

    box-shadow:
        0 0 0 3px rgba(176,138,105,0.08),
        0 4px 12px rgba(0,0,0,0.03);

    outline: none;
}
.input-group:focus-within .icon-login {
    border-color: #b08a69 !important;
    background: linear-gradient(180deg, #fbf7f2, #f1e7da);
}

/* ============================================================
   BOTÃO
   ============================================================ */

.btn-login {   
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #8f5f3d, #c39a6b);
    transition: all .28s ease;
    box-shadow: 0 8px 18px rgba(143,95,61,0.22);
}

.btn-login:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #7d5234, #b88b5c);
    box-shadow: 0 12px 24px rgba(143,95,61,0.28);
}

.btn-login:active {
    transform: scale(0.99);
}

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

.footer-text {
    margin-top: 18px;
	margin-bottom: 0px;
    font-size: 14px;
    color: rgba(40,40,40,0.55);
    letter-spacing: 0.4px;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 480px) {

    .form-signin {
        width: 92%;
        padding: 26px;
    }

    .logo {
        width: 95%;
    }

    .titulo {
        font-size: 17px;
    }
}