.tr-register-container {

    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #000000;

    padding: 20px;

    box-sizing: border-box;

}


.tr-register-box {

    width: 100%;
    max-width: 480px;

    background: #111111;

    border-radius: 18px;

    padding: 30px 25px;

    box-shadow: 0 10px 40px rgba(0,0,0,.5);

    color: #ffffff;

}


.tr-title {

    text-align: center;

    font-size: 30px;

    font-weight: 700;

    margin-bottom: 10px;

    color: #ffffff;

}


.tr-subtitle {

    text-align:center;

    font-size:16px;

    color:#cccccc;

    margin-bottom:30px;

}


.tr-field {

    margin-bottom:20px;

}


.tr-field label {

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

    color:#ffffff;

}


.tr-field input {


    width:100%;

    height:52px;

    padding:0 16px;

    border-radius:10px;

    border:1px solid #444;

    background:#000;

    color:#ffffff;

    font-size:16px;

    box-sizing:border-box;

    transition:.3s;

}



.tr-field input::placeholder {

    color:#888;

}



.tr-field input:focus {

    outline:none;

    border-color:#ffffff;

    background:#050505;

}



.tr-privacy {

    margin:25px 0;

    font-size:14px;

    line-height:1.6;

    color:#dddddd;

}



.tr-privacy label {

    display:flex;

    align-items:flex-start;

    gap:10px;

    cursor:pointer;

}


.tr-privacy input[type="checkbox"] {

    width:18px;

    height:18px;

    margin-top:3px;

    cursor:pointer;

}



.tr-privacy a {

    color:#ffffff;

    text-decoration:underline;

    font-weight:600;

}



.tr-button {


    width:100%;

    height:55px;

    border:none;

    border-radius:12px;

    background:#ffffff;

    color:#000000;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;


}



.tr-button:hover {


    transform:translateY(-2px);

    opacity:.9;


}



.tr-button:disabled {

    opacity:.5;

    cursor:not-allowed;

}



.tr-message {

    display:none;

    padding:15px;

    margin-bottom:20px;

    border-radius:10px;

    font-size:15px;

    text-align:center;

}



.tr-message.success {

    display:block;

    background:#0f5132;

    color:#ffffff;

}



.tr-message.error {

    display:block;

    background:#842029;

    color:#ffffff;

}




/* Tablets y pantallas medianas */

@media(max-width:768px){


    .tr-register-container {

        align-items:flex-start;

        padding-top:30px;

    }


    .tr-register-box {

        padding:25px 20px;

    }


    .tr-title {

        font-size:26px;

    }


}



/* Celulares pequeños */

@media(max-width:380px){


    .tr-register-box {

        padding:20px 15px;

        border-radius:12px;

    }


    .tr-title {

        font-size:23px;

    }


    .tr-field input {

        height:48px;

        font-size:15px;

    }


    .tr-button {

        height:50px;

        font-size:16px;

    }


}