@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/*Menu superior*/
header{display: flex;justify-content: space-between;background-color: black;min-height: 70px; align-items: center; max-width: 100%;}
.logo {display: flex;} .logo img { height: 41px;} @media (max-width:700px){header{flex-direction: column;}}
.btn-square{display: inline-block; width: 100px; height: 100px; background-color: black; color: rgb(0, 193, 135); text-align: center;line-height: 100px; text-decoration: none; border: none;}
.btn-square:hover{background-color: rgb(0, 193, 135); color: white;}

/* Login y diseno del usario */
*{margin: 0; padding: 0; box-sizing: border-box;}
body{font-family: 'Roboto','sans-serif'; background-color: #e5e5f7; background-size:20px 20px; background-position: 0 0, 10px 10px; min-height: 100vh;}
.contenedor{background-color: #fff; margin: auto; width: 90%;  max-width: 400px; padding: 4.5em 3em; border-radius: 10px; box-shadow: 0 5px 10px -5px rgb(0, 0, 0 / 0%);text-align: center;}
.IMG{margin-top: -110px; width: 100px; height: 100px; border-radius: 51px;}
.form__title{font-size: 2em; margin-bottom: .5em;}
.form__container{margin-top: 1.5em; display: grid; gap: 2.5em;}
.form__group{position: relative; --color: #5757577e;}
.form__input{width: 100%; background: none; --color: #5757577e; font-size: 1rem; padding: .6em .3em; border: none; outline: none; border-bottom: 1px solid var(--color); font-family: 'Roboto','sans-serif';}
.form__input:not(:placeholder-shown) {color: #4d4646;}
.form__input:focus +.form__label,.form__input:not(:placeholder-shown) + .form__label{transform: translateY(-12px) scale(.7);transform-origin: left top ; color: rgb(0,193,135);}
.form__label{color: var(--color); cursor: pointer;  position: absolute; left: 5px; transform: translateY(10px);  transition: transform .5s, color .3s;}
.form__submit{background: rgb(0,193,135); color: #fff; font-family: 'Roboto', 'sans-serif'; font-weight: normal; font-size: 1rem; padding: .8em 0; border: none; border-radius: .5em;}
.form__line{position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #3866f2; transform: scale(0); transform: left bottom; transform: transform .4s;}
.form__input:focus ~ .form__line.form__input:not(:placeholder-shown) + .form__line{transition: scale(1);}
@media (max-width:425px){.form__title{font-size: 1.8rem;}}

/*Insertar y modificar del root y menu*/
.TextArea::-webkit-scrollbar{width: 10px; height: 10px;}
.TextArea::-webkit-scrollbar-thumb{background-color: #333;}
.TextArea::-webkit-scrollbar-track{background-color: #eee0;}
.TextArea{width: 100%; background: none; --color: #5757577e; font-size:1rem; padding:.6em .3em; outline:none; border-bottom:1px solid var(--color); font-family: 'Roboto','sans-serif'; border-radius: 30px; border: 5px solid Black; height:112px;}
.TextArea:not(:placeholder-shown) {color: #4d4646;}
.TextArea:focus + .label,.TextArea:not(:placeholder-shown) + .label {transform: translateY(-20px) scale(.90); transform-origin: left top; color: rgb(0, 193, 135);}

.Input{width: 100%; background: none; --color: #5757577e; font-size: 1rem; padding: 0.6em 0.3em; outline: none; border-bottom: 1px solid var(--color); font-family: 'Roboto','sans-serif'; border: 5px solid black; border-radius: 185px;}
.Input:not(:placeholder-shown) {color: #4d4646;}
.Input:focus + .label,.Input:not(:placeholder-shown) + .label {transform: translateY(-20px) scale(.90);transform-origin: left top; color: rgb(0, 193, 135);}
.label{color: var(--color); cursor: pointer;  position: absolute; left: 16px; transform: translateY(10px);  transition: transform .5s, color .3s;}
input[type="checkbox"]:checked + label::before {background-color: rgb(0,193,135);}

/*Filtros y botones de nuevos datos*/
.btndisin{color: rgb(0,193,135); border-radius: 30px; border: 5px solid Black; text-align: center; width: 138px;}
.tablabtn{color: rgb(0,193,135); background-color: black; border-radius: 9px; margin-left:61px; width: 80px; height: 41px; text-align: center;}
.tablabtn:hover{color: white; background-color:  rgb(0,193,135); border-radius: 9px; height: 41px; text-align: center;}