html,
body {
    min-height: 100%;
}

body,
div,
form,
input,
select,
p {
    padding: 0;
    margin: 0;
    outline: none;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    color: #5B2333;
}

.header {


    background-color: #5B2333;
    padding: 10px 20px;
    display: flex;
    align-items: center;/* Centra verticalmente los elementos */
    justify-content: space-between;/* Separa izquierda y derecha */
    color: white;
}

.left-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    height: 50px;
    width: auto;
    display: block;
}

.textos {
    display: flex;
    flex-direction: column;
    line-height: 1, 2;
    color: white;
}



.textos .hola {
    font-size: 1.2rem;
    font-weight: bold;
}

.textos .bienvenido {
    font-size: 0.9rem;
}

.right-section {
    display: flex;
    gap: 20px;
   
}

.right-section a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

.right-section a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}


h1 {
    margin: 0;
    font-weight: 400;
}

h3 {
    margin: 12px 0;
    color: #5B2333;
}

.main-block {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

form {
    width: 100%;
    padding: 20px;
}

fieldset {
    border: none;
    border-top: 1px solid #5B2333;
}

.account-details,
.personal-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.account-details>div,
.personal-details>div>div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.account-details>div,
.personal-details>div,
input,
label {
    width: 100%;
}

label {
    padding: 0 5px;
    text-align: right;
    vertical-align: middle;
}

input {
    padding: 5px;
    vertical-align: middle;
}

.checkbox {
    margin-bottom: 10px;
}

select,
.children,
.gender,
.bdate-block {
    width: calc(100% + 26px);
    padding: 5px 0;
}

select {
    background: transparent;
}

.gender input {
    width: auto;
}

.gender label {
    padding: 0 5px 0 0;
}

.bdate-block {
    display: flex;
    justify-content: space-between;
}

.birthdate select.day {
    width: 35px;
}

.birthdate select.mounth {
    width: calc(100% - 94px);
}

.birthdate input {
    width: 38px;
    vertical-align: unset;
}

.checkbox input,
.children input {
    width: auto;
    margin: -2px 10px 0 0;
}

.checkbox a {
    color: #8ebf42;
}

.checkbox a:hover {
    color: #82b534;
}

button {
    width: 30%;
    padding: 10px 0;
    margin: 10px auto;
    border-radius: 5px;
    border: none;
    background: #5B2333;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

button:hover {
    background: #5B2333;
}

@media (min-width: 568px) {

    .account-details>div,
    .personal-details>div {
        width: 50%;
    }

    label {
        width: 40%;
    }

    input {
        width: 60%;
    }

    select,
    .children,
    .gender,
    .bdate-block {
        width: calc(60% + 16px);
    }
}