/* ************************************* ESTILOS COMPARTIDOS ************************************* */
* {
    font-family: Arial, Helvetica, sans-serif;
}

body,
html,
.tamañoCompleto,
#diseño {
    height: 100%;
}

body,
.caja h3 {
    margin: 0px;
}

button,
input,
select {
    background: none;
    border: none;
    font-size: 16px;
    outline: none;
}

form,
main,
.nav,
.subCaja,
#cajaImagen {
    overflow: auto;
}

form,
nav button,
.nav,
#cajaImagenes {
    margin: auto;
}

form,
form button,
header,
nav button,
.botonFlotante,
.caja,
.nav,
#botonesMapa button,
#cajaImagen button,
#cajaImagenes,
#cajaImagenes button {
    box-shadow: 0px 4px 4px gray;
}

form,
.nav,
#cajaImagenes {
    background: whitesmoke;
}

form input,
form select {
    border-bottom: 1px solid gray;
    width: 60%;
}

form input,
form select,
#cajaImagen button,
#cajaImagenes #boton1,
#formularioAñadir #boton1,
#formularioIniciarSesion button,
#formularioPerfil button,
#formularioRegistro button {
    padding: 2% 0px;
}

header,
header button {
    height: 8%;
}

nav,
.tamañoCompleto,
#opcionesLista {
    width: 100%;
}

main,
nav,
#fondo {
    height: 92%;
}

.borrar,
.botonFlotante,
.camara,
.carpeta,
.descargar,
.gps,
.imagen,
.llamar,
.mapa,
.opcionesLista,
.ver {
    border-radius: 25px;
}

.borrar,
.camara,
.carpeta,
.centro .gps,
.descargar,
.mapa,
.ver {
    height: 40px;
    width: 40px;
}

.borrar,
#cerrarMapa,
#borrarMapa,
#botonFormularioAñadir {
    background: red;
}

.botonFlotante,
#opcionesLista button {
    height: 50px;
    width: 50px;
}

.carpeta,
.gps,
.mapa,
.ver,
#centrarMapa,
#formularioPerfil #boton1,
#formularioRegistro #boton1 {
    background: blue;
}

.descargar,
.imagen,
.llamar,
#atrasMapa,
#botonRefrescar,
#cajaImagen button,
#cajaImagenes #boton1,
#formularioAñadir #boton1,
#formularioIniciarSesion button,
#formularioPerfil #boton2,
#formularioRegistro #boton2 {
    background: green;
}

.gps,
.llamar,
.imagen {
    height: 30px;
    width: 30px;
}

#cajaImagen,
#coordenadas,
#formularioAñadir,
#imagenes {
    background: rgba(255, 255, 255, 0.9);
}

#cajaImagenes #boton1,
#formularioAñadir #boton1,
#formularioIniciarSesion button,
#formularioPerfil button,
#formularioRegistro button {
    width: 30%;
}
/* **************************************** ESTILOS UNICOS **************************************** */
header button {
    padding: 0px 2%;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

nav {
    z-index: 1;
}

nav button {
    display: block;
}

.absoluto {
    position: absolute;
}

.botonFlotante {
    bottom: 25px;
}

.caja {
    margin: 1%;
}

.caja h3 {
    padding: 5px;
}

.camara {
    background: orange;
}

.celda {
    display: table-cell;
    padding: 0px;
    vertical-align: middle;
}

.centro {
    text-align: center;
}

.fondo {
    bottom: 10px;
    max-height: 25%;
    max-width: 25%;
}

.noVisible {
    display: none;
}

.opcionesLista {
    background: lightblue;
}

.subCaja {
    height: 88%;
    word-break: break-word;
}

.tabla {
    border-collapse: collapse;
    border-spacing: 0px;
    display: table;
}

#botonFormularioAñadir {
    right: 25px;
}

#botonRefrescar {
    left: 25px;
}

#cajaImagenesInterna div {
    border: 1px solid gray;
}

#fondo {
    background-image: url("../multimedia/imagenes/fondo.png");
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: -1;
}

#fondo1 {
    left: 10px;
}

#fondo2 {
    right: 10px;
}

#opcionesLista {
    float: left;
}
/* ********************************* ESTILOS COMPARTIDOS DERIVADOS ********************************* */
::-webkit-scrollbar-thumb,
nav button {
    background: darkgray;
}

header,
nav button.activo {
    background: black;
}

nav button.activo,
.imagen,
#botonesMapa button,
#cajaImagen button,
#cajaImagenes #boton1,
#formularioAñadir #boton1,
#formularioIniciarSesion button,
#formularioPerfil button,
#formularioRegistro button,
#titulo {
    color: white;
}

header button.activo,
nav,
.caja {
    background: white;
}

header button:last-child,
#cajaImagen,
#coordenadas,
#formularioAñadir,
#imagenes {
    top: 0px;
}
/* ************************************ ESTILOS UNICOS DERIVADOS ************************************ */
::-webkit-scrollbar {
    height: 1%;
    width: 0.5%;
}

::-webkit-scrollbar-track {
    background: lightgray;
}

form input:focus {
    border-bottom: 1px solid black;
}

header button:first-child {
    border-right: 1px solid white;
}

header button:last-child {
    border-left: 1px solid white;
    right: 0px;
}

header button.activo {
    color: black;
}

header button.activo img {
    filter: invert(1);
}

#botonFormularioAñadir.activo {
    background: darkred;
}

#formularioPerfil #boton1.activo {
    background: darkblue;
}