.tr-register-container {

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

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

    background: #F4F8FC;

    padding: 20px;

    box-sizing: border-box;

}


.tr-register-box {

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

    background: #FFFFFF;

    border-radius: 18px;

    padding: 30px 25px;

    box-shadow: 0 10px 35px rgba(30, 64, 100, 0.10);

    color: #1E293B;

    border: 1px solid #E2EAF2;

}


.tr-title {

    text-align: center;

    font-size: 30px;

    font-weight: 700;

    margin-bottom: 10px;

    color: #1E3A5F;

}


.tr-subtitle {

    text-align: center;

    font-size: 16px;

    color: #64748B;

    margin-bottom: 30px;

}


.tr-field {

    margin-bottom: 20px;

}


.tr-field label {

    display: block;

    margin-bottom: 8px;

    font-size: 15px;

    font-weight: 600;

    color: #334155;

}


.tr-field input {

    width: 100%;

    height: 52px;

    padding: 0 16px;

    border-radius: 10px;

    border: 1px solid #D7E3F0;

    background: #F8FBFF;

    color: #1E293B;

    font-size: 16px;

    box-sizing: border-box;

    transition: .3s;

}


.tr-field input::placeholder {

    color: #94A3B8;

}


.tr-field input:hover {

    border-color: #B8CDE3;

}


.tr-field input:focus {

    outline: none;

    border-color: #3B82F6;

    background: #FFFFFF;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);

}


.tr-privacy {

    margin: 25px 0;

    font-size: 14px;

    line-height: 1.6;

    color: #64748B;

}


.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: #2563EB;

    text-decoration: underline;

    font-weight: 600;

}


.tr-button {

    width: 100%;

    height: 55px;

    border: none;

    border-radius: 12px;

    background: #3B82F6;

    color: #FFFFFF;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;

    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.20);

}


.tr-button:hover {

    background: #2563EB;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);

}


.tr-button:active {

    transform: translateY(0);

}


.tr-button:disabled {

    opacity: .5;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}


.tr-message {

    display: none;

    padding: 15px;

    margin-bottom: 20px;

    border-radius: 10px;

    font-size: 15px;

    text-align: center;

}


.tr-message.success {

    display: block;

    background: #E8F7EF;

    color: #166534;

    border: 1px solid #BBE7CD;

}


.tr-message.error {

    display: block;

    background: #FDECEC;

    color: #B42318;

    border: 1px solid #F5C2C0;

}


/* 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;

    }

}