121 lines
2.4 KiB
CSS
121 lines
2.4 KiB
CSS
/* ====== FORMULARIO ====== */
|
|
.editar {
|
|
max-width: 1000px;
|
|
display: flex;
|
|
gap: 20px;
|
|
margin: 40px auto;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.columna {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
input {
|
|
padding: 6px 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
outline: none;
|
|
}
|
|
|
|
input:focus {
|
|
border-color: #003366;
|
|
box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
|
|
}
|
|
|
|
/* Botón cerrar sesión */
|
|
.boton-cerrar {
|
|
background-color: #e60000;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: background-color 0.3s;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.boton-cerrar:hover {
|
|
background-color: #cc0000;
|
|
}
|
|
|
|
.titulo-editar {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%; /* centra horizontalmente */
|
|
transform: translate(-50%, -50%); /* centra vertical y horizontalmente */
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 35%; /* ajusta el ancho del bloque de texto */
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #003366;
|
|
z-index: 5;
|
|
}
|
|
|
|
.titulo-editar span {
|
|
flex: 1;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: color 0.3s, text-decoration 0.3s;
|
|
}
|
|
|
|
/* Cambia de color al pasar el mouse */
|
|
.titulo-editar span:hover {
|
|
color: #b8870b;
|
|
}
|
|
|
|
.recuadro {
|
|
border-radius: 10px; /* Bordes redondeados */
|
|
padding: 10px; /* Espacio interno */
|
|
margin: 85px 350px; /* Separación del resto del contenido */
|
|
}
|
|
|
|
.titulo-rec {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-left: 0; /* alinea el texto con el resto de la columna */
|
|
text-align: left; /* asegura que esté alineado a la izquierda */
|
|
margin-bottom: 8px; /* un poco de espacio debajo del título */
|
|
}
|
|
.linea {
|
|
border-bottom: 2px solid #003366; /* color y grosor de la línea */
|
|
width: 100%; /* ocupa toda la columna */
|
|
margin-bottom: 10px; /* espacio entre línea y los campos */
|
|
}
|
|
|
|
.botones {
|
|
display: flex;
|
|
justify-content: flex-end; /* Alinea los botones a la derecha */
|
|
gap: 10px; /* Espacio entre ellos */
|
|
margin-top: 15px; /* Separación del formulario */
|
|
}
|
|
.guardar {
|
|
background-color: #b8870b;
|
|
color: #003366;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.cancelar {
|
|
background-color: #003366;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|