*{
    box-sizing: border-box;
    margin: 0;
}

header{
    font-family: Play,sans-serif;
    font-weight: bold;
    width: 100%;
    height: 70px;
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(18,18,18);
    color: white;
    border-bottom: 0.5px solid black;
}

header h2{
    font-size: 18px;
    color: rgb(153,153,153);
}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(18,18,18);
}
main{
    font-family: Play,sans-serif;
    font-weight: bold;
    color: white;
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #DD4A1C;
    background: linear-gradient(186deg,rgba(221, 74, 28, 1) 0%, rgba(0, 0, 0, 1) 100%);
    border-radius: 20px;
}

#mainRegistro{
    height: 87vh;
    background: black;
}

/* FORMULARIO DE REGISTRO */

#divRegistro{
    width: 30%;
    height: 74%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(18, 18, 18);
    border-radius: 4px;
}

#divRegistro h1{
    color: rgb(241, 241, 241);
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 10px;
}


#erroresFormulario{
    color: red;
    font-size: 0.8rem;
}
#formularioRegistro input{
    height: 25px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}


#entradasRegistro input{
    background: #f0e675;
    color: black;
}

#formularioRegistro input:hover{
    background-color: rgb(80,80,80);
}

#botonesRegistro{
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
    align-items: center;
    height: 80px;
}

#o{
    width: 344px;
    text-align: center;
    border-top: 1px solid white;
    /*margin-left: 6%;*/
}

#entrarCancelar{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
}
#formularioRegistro input[name="enviar"]{
    background-color: rgb(255, 108, 32);
    padding-left: 8px;
    width:45%;
    margin-right: 10px;
}

#formularioRegistro input[name="cancelar"]{
    width: 45%;
}




#entradasRegistro{
    padding: 20px;
}

#entradasRegistro input{
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
    border-radius: 4px;
    height: 45px;
}


input[name="cerrarSesion"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(255, 108, 32);
    border: none;
    border-radius: 4px;
}

/* FORMULARIO LOGIN */

#divLogin{
    width: 30%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(18, 18, 18);
    border-radius: 4px;
}

#divLogin h1{
    color: rgb(241, 241, 241);
    font-size: 25px;
    margin-top: 30px;
    margin-bottom: 30px;
    
}


#erroresFormulario{
    color: red;
    font-size: 0.8rem;
}
#formularioLogin input{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

#entradasLogin input{
    background: #f0e675;
    color: black;
}

#formularioLogin input:hover{
    background-color: rgb(80,80,80);
}

#botonesLogin{
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
    align-items: center;
    height: 150px;
}

#o{
    width: 344px;
    text-align: center;
    border-top: 1px solid white;
    /*margin-left: 6%;*/
}

#entrarCancelar{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
#formularioLogin input[name="entrar"]{
    background-color: rgb(255, 108, 32);
    padding-left: 8px;
    width:45%;
    margin-right: 10px;
}

#formularioLogin input[name="cancelar"]{
    width: 45%;
}

#sincuenta{
    font-weight: normal;
    margin-top: 13px;
    /*margin-left:35%;*/
    font-size: 0.8rem;
}

#formularioLogin input[name="crearCuenta"]{
    margin-top: 20px;
    background-color: rgb(18, 18, 18);

}

#entradasLogin{
    padding: 20px;
}

#entradasLogin input{
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
    border-radius: 4px;
    height: 45px;
}


input[name="cerrarSesion"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(255, 108, 32);
    border: none;
    border-radius: 4px;
}

/* BUSQUEDA DE DEPARTAMENTO FORMULARIO */
input[name="descBuscado"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(255, 108, 32);
    border: none;
    border-radius: 4px;
}

input[name="DescDepBuscado"]{
    width: 500px;
    height: 32px;
    font-family: Play,sans-serif;
    font-weight: bold;
    text-decoration: inherit;
    border: 1px solid grey;
    border-radius: 4px;
    background: white;
    color: black;
}

/* INICIO PRIVADO */


input[name="detalle"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="detalle"]:hover{
    background-color: rgb(80,80,80);
}

input[name="mtoUsuarios"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="mtoUsuarios"]:hover{
    background-color: rgb(80,80,80);
}

input[name="mantenimientoDep"]:hover{
    background-color: rgb(80,80,80);
}

input[name="mantenimientoDep"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="error"]:hover{
    background-color: rgb(80,80,80);
}

input[name="error"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="rest"]:hover{
    background-color: rgb(80,80,80);
}

input[name="rest"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

/* ESTILOS DEL BOTON ELIMINAR DEPARTAMENTO */

input[name="eliminarDep"]:hover{
    background-color: rgb(80,80,80);
}

input[name="eliminarDep"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="volver"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
    margin: 7px;
}

input[name="micuenta"]:hover{
    background-color: rgb(80,80,80);
}

input[name="micuenta"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
    margin: 7px;
}

input[name="volver"]:hover{
    background-color: rgb(80,80,80);
}

input[name="cancelar"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="cancelar"]:hover{
    background-color: rgb(80,80,80);
}

#h4InicioPublico{
    font-size: 44px;
    text-shadow:rgba(255, 255, 255, 0.25) 0px 1px 6px;
    margin-bottom: 30px;
}

#pInicioPublico{
    font-size: 22px;
    text-shadow:rgba(255, 255, 255, 0.25) 0px 1px 6px;
}



input[name="iniciarSesion"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="iniciarSesion"]:hover{
    background-color: rgb(80,80,80);
}

footer{
    width: 93%;
    height: 13vh;
    background: rgb(18,18,18);
    display: flex;
    justify-content: space-between;
    padding: 40px;
    align-items: center;
    gap: 20px;
    border-top: 1px solid rgb(46,46,46);
}



.nombre a{
    font-family: Play, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: white;
    text-decoration: none;
    
}

.nombre a:hover{
    text-shadow:rgba(255, 255, 255, 0.25) 0px 1px 6px;
}

.webImitada a{
    font-family: Play, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: white;
    text-decoration: none;
    margin-right: 500px;
}

.webImitada a:hover{
    text-shadow:rgba(255, 255, 255, 0.25) 0px 1px 6px;
}

footer img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

footer img:hover{
   box-shadow:rgba(255, 255, 255, 0.25) 0px 1px 6px;
}

#login, #registro{
    margin-right: 50%;
}

/* ////////////////////////////////////////////////////// */

/* Solo para detalle.php */
main.detalle {
    height: auto;        /* Permite crecer según el contenido */
    padding: 20px;
    display: block;      /* Evita el centrado flex que rompe las tablas */
}

main.detalle article.articleSG {
    margin-bottom: 30px;
    width: 90%;
    overflow-x: auto;    /* Scroll si la tabla es ancha */
    background-color: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 10px;
}

main.detalle table.tableSG {
    width: 100%;
    border-collapse: collapse;
    color: white;
    font-family: Play, sans-serif;
    font-size: 14px;
}

main.detalle table.tableSG th,
main.detalle table.tableSG td {
    border: 1px solid white;
    padding: 6px 10px;
    text-align: left;
}

main.detalle table.tableSG th {
    background-color: rgba(255,255,255,0.2);
}

/* /////////////////////////////////////////////// */
/* ESTILOS DEL CAROUSEL INICIO PÚBLICO */

/* ================= CAROUSEL ================= */

.seccionCarrusel {
    display: flex;
    justify-content: center;
    padding: 4vh 2vw;
}

.carrusel-contenedor {
    position: relative;
    width: 90vw;
    max-width: 1100px;
    /* Ajusta el ancho que quieras que tenga el visor */
    height: 65vh;
    max-height: 700px;
    min-height: 400px;
    /* Ajusta el alto */
    overflow: hidden;
    /* Oculta las fotos que no están activas */
    border: 3px solid var(--colorAzul2);
    border-radius: 10px;
}

.photos {
    display: flex;
    width: 500%;
    /* 5 fotos = 500% de ancho */
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.photos img {
    width: 20%;
    /* Cada foto ocupa 1/4 del contenedor (100% / 5) */
    height: 100%;
    object-fit: contain;
    /* Para que los diagramas no se deformen */
    background-color: white;
}

/* Estilo de los botones (Radios) */
.carrusel-contenedor input {
    position: absolute;
    bottom: 15px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 10;
    appearance: none;
    /* Oculta el radio original */
    background-color: rgb(217, 73, 27);
    border: 2px solid black;
    border-radius: 50%;
    transition: 0.3s;
}

/* Posicionamiento horizontal de los botones */
#rd1 {
    left: 40%;
}

#rd2 {
    left: 46%;
}

#rd3 {
    left: 52%;
}

#rd4 {
    left: 58%;
}

#rd5{
    left: 64%;
}

/* Color cuando están seleccionados */
.carrusel-contenedor input:checked {
    background-color: var(--colorAzul2);
    transform: scale(1.2);
}


/* Cuando el radio X está marcado, mueve el div .photos */
#rd1:checked~.photos {
    transform: translateX(0%);
}

#rd2:checked~.photos {
    transform: translateX(-20%);
}

#rd3:checked~.photos {
    transform: translateX(-40%);
}

#rd4:checked~.photos {
    transform: translateX(-60%);
}

#rd5:checked~.photos {
    transform: translateX(-80%);
}


.photos img {
    width: 25%;
    height: 100%;
    object-fit: contain;
    background-color: white;

    /* Efecto hover */
    transition: transform 0.3s ease; /* animación suave */
}

.photos img:hover {
    transform: scale(1.2); /* aumenta 10% */
    z-index: 5; /* se asegura de que quede encima de las otras imágenes */
}

/* ESTILOS DE LA VENTANA REST */

/* ================= DIV APIS ================= */

#apis{
    width: 90vw;
    height: 70vh;
    margin-top: 5vh;
    margin-bottom: 2vh;
    border: 2px solid black;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.Rest{
    border: 2px solid black;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgb(56,56,56);

    & h2{
        margin-bottom: 30px;
    }
}

.tituloRest{
    margin-bottom: 30px;
}

.formulariosApi{
    background: lightgoldenrodyellow;
    width: 150px;
}

#descripcionNasa{
    font-size: small;
}

/* Titulo de la foto de la Nasa */
#tituloFotoNasa{
    margin-top: 8px;
}
#urlNasa{
    color: white;
}
/* INFORMACIÓN APIS */

.infoApi{
    margin-top: 30px;
}

.infoRestPokemon{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    width: 100%;
}

.infoResPokemon model-viewer {
    width: 100%;               /* Ancho del modelo 3D */
    height: 250px;              /* Alto del modelo 3D */
    margin-bottom: 50px;
}

input[name="enviarNasa"]:hover{
    background-color: rgb(170, 70, 3);
}

input[name="enviarNasa"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(255, 108, 32);
    border: none;
    border-radius: 4px;
}

input[name="detalleNasa"]:hover{
    background-color: rgb(170, 70, 3);
}

input[name="detalleNasa"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(255, 108, 32);
    border: none;
    border-radius: 4px;
}

input[name="fechaNasa"]:hover{
    background-color: rgb(255, 222, 74);
}

input[name="fechaNasa"]{
    height: 32px;
    width: 170px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: black;
    padding: 8px 24px;
    background-color: rgb(255, 215, 83);
    border: none;
    border-radius: 4px;
}

/* ESTILOS MENSAJE DE ERROR */

.error-valor{
    background-color: red;  /* Fondo rojo */
    color: white;           /* Texto blanco */
    padding: 2px 6px;       /* Pequeño espacio alrededor del texto */
    border-radius: 3px;  /* Bordes ligeramente redondeados */
}

/* ESTILOS TABLA MTO DEPARTAMENTOS */
#flechaArriba{
        width: 10px;
        height: 10px;
}

#tablaBuscarDep{
    border: 2px solid black;
    margin-top: 1%;
    background: #f0972b;
    color: black;

    & th{
        border: 2px solid black;
        padding: 15px;
    }

    & td{
        border: 2px solid black;
        padding: 15px;
    }
}

/* FORMULARIO CREAR DEP */

#formularioAltaDep{
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    background: black;
    padding: 30px;
}

#formularioMAltaDep h2{
    margin:4%;
    margin-bottom: 6%;
    text-align: center;
}



#formularioAltaDep input{
    height: 32px;
    width: 90%;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56, 56, 56);
    border: none;
    border-radius: 4px;
    margin-top: 3%;
    margin-bottom: 5%;
}

#formularioAltaDep input[name="crearDep"]{
    background-color: rgb(255, 108, 32);
    padding-left: 8px;
    margin-right: 10px;
}

input[name="crearDep"]:hover{
    background-color: rgb(170, 70, 3);
}

input[name="crearDep"]{
    height: 32px;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(255, 108, 32);
    border: none;
    border-radius: 4px;
}


/* MTO USUARIOS*/

#tablaUsuarios{
    margin-top: 1%;
    width: 70%;
    background: white;
    color: black;

    & th{
        padding: 0px;
        background: #f0972b;
    }

    
    & td{
        border-bottom: 1px solid black;
        border-top: 1px solid black;
        font-size: 0.9rem;
        padding: 1px;
        background: white;
    }
}

input[id="campoBusquedaUsuario"]{
    height: 32px;
    width: 400px;
    font-family: Play,sans-serif;
    font-size: 14px;
}


/* FORMULARIO VER EDITAR DEPARTAMENTO */

#formularioMostrarEditar{
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    background: black;
    padding: 30px;
}

#formularioMostrarEditar h2{
    margin:4%;
    text-align: center;
}


#formularioMostrarEditar input{
    height: 32px;
    width: 90%;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
    margin-top: 2%;
    margin-bottom: 3%;
}

#formularioMostrarEditar input[name="editar"]{
    background-color: rgb(255, 108, 32);
    padding-left: 8px;
    width:45%;
    margin-right: 10px;
}

#formularioMostrarEditar input[name="volver"]{
    width: 45%;
}

#formularioMostrarEditar input[name="volverMostrar"]{
    width: 90%;
    background-color: rgb(255, 108, 32);
}


/* FORMULARIO ELIMINAR DEPARTAMENTO */

#formularioEliminar{
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    background: black;
    padding: 30px;
}

#formularioEliminar h2{
    margin:4%;
    
}


#formularioEliminar input{
    height: 32px;
    width: 90%;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
    margin-top: 2%;
    margin-bottom: 3%;
}

#formularioEliminar input[name="eliminarDep"]{
    background-color: rgb(255, 108, 32);
    padding-left: 8px;
    width:45%;
    margin-right: 10px;
}

#formularioEliminar input[name="volver"]{
    width: 45%;
}

/* ALTA Y BAJA LÓGICA DEPARTAMENTO */

button.baja{
    background: red;
    
    margin: 10px;
    padding: 10px;
    border-radius: 20%;
}

.alta{
    background: green;
    margin: 10px;
    padding: 10px;
    border-radius: 20%;
}

/* ESTILOS PDF INICIO PUBLICO*/

/* MENU DE NAVEGACIÓN */

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.menu-radio{
    display: none;
}

.menu label {
    flex: 1;
    text-align: center;
    margin-top: 0;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    margin: 2px;
    transition: background 0.3s, color 0.3s;
}

.menu label:hover {
    background-color: rgba(255, 108, 32, 0.8);
}

/* LABEL SELECCIONADO */
#btn1:checked ~ .menu label[for="btn1"],
#btn2:checked ~ .menu label[for="btn2"],
#btn3:checked ~ .menu label[for="btn3"],
#btn4:checked ~ .menu label[for="btn4"],
#btn5:checked ~ .menu label[for="btn5"],
#btn6:checked ~ .menu label[for="btn6"],
#btn7:checked ~ .menu label[for="btn7"],
#btn8:checked ~ .menu label[for="btn8"] {
    background-color: rgb(255, 108, 32);
    color: black;
    font-weight: bold;
}

/* APARTADOS (iframe o img) */
.apartados {
    width: 100%;
    height: 70vh;
    position: relative;
}

.apartados iframe,
.apartados img {
    width: 100%;
    height: 100%;
    display: none;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background-color: white;
    object-fit: contain;
}

/* MOSTRAR EL ELEMENTO SELECCIONADO */
#btn1:checked ~ .apartados #vInicioPublico01,
#btn2:checked ~ .apartados #vInicioPublico02,
#btn3:checked ~ .apartados #vInicioPublico03,
#btn4:checked ~ .apartados #vInicioPublico04,
#btn5:checked ~ .apartados #vInicioPublico05,
#btn6:checked ~ .apartados #vInicioPublico06,
#btn7:checked ~ .apartados #vInicioPublico07,
#btn8:checked ~ .apartados #vInicioPublico08 {
    display: block;
}

/* ADAPTACIÓN RESPONSIVE */
@media (max-width: 900px) {
    .menu {
        flex-direction: column;
    }
    .menu label {
        margin: 4px 0;
    }
    main {
        padding: 10px;
    }
    .apartados {
        height: 60vh;
    }
}

/* FORMULARIO EDITAR CUENTA */

#formularioMiCuenta{
    width: 500px;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    background: black;
    padding: 30px;
}

#formularioMiCuenta h3{
    margin:4%;
    text-align: center;
}

#editarCancelar{
    margin-top: 4%;
}

.campos{
    height: 30px;
    width: 90%;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(56,56,56);
    border: none;
    border-radius: 4px;
}

input[name="DescUsuario"]{
    color: black;
    background-color: lightgoldenrodyellow;
}

input[name="imagen"]{
    color: black;
    background-color: lightgoldenrodyellow;
    
}

input[name="editarCuenta"]{
    height: 32px;
    margin-right: 2%;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color: rgb(255, 108, 32);
    border: none;
    border-radius: 4px;
}

input[name="borrarCuenta"]{
    height: 32px;
    margin-left: 2%;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color:red;
    border: none;
    border-radius: 4px;
}

input[name="borrarCuentaPagina"]{
    height: 32px;
    margin-right: 2%;
    font-family: Play,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: inherit;
    color: rgb(241,241,241);
    padding: 8px 24px;
    background-color:red;
    border: none;
    border-radius: 4px;
}
#editarCancelar{
    display: flex;
    justify-content: center;
    align-items: center;
}

#formularioMiCuenta h4{
    background: yellow;
    color: black;
    padding: 2%;
    border-radius: 5%;
    text-align: center;
    margin-bottom: 3%;
}